0

Similar to this question: jQuery append fadeIn

But the solution isn't working for me.

Basically trying to ask the user their name and then append a greeting below. Preferably on a fade in, I've tried a few solutions I came across here but to no avail.

The "document.name_form..etc) works fine when called inside an alert as well.

Can anyone see where I'm going wrong?

function doit() {
    $('#item2').append( document.name_form.fname.value +"U WOT");  
}

(The function doit gets triggered from the html forms "onSubmit", and has triggered alerts etc successfully)

Code snippet:

var greeting = "hello "
var div = document.getElementById('#item2');

function doit() {
  $('#item2').append(document.name_form.fname.value + "U WOT");
}


// alert(greeting + document.name_form.fname.value)
//
//
// $( " HEYTHERDUDE "  + document.name_form.fname.value).appendTo($( " #item2 " )); 
//
// div.innerHTML = div.innerHTML + 'LOOK AT ME' + document.name_form.fname.value;
/***************************/


/*****CONTAINER STYLES******/


/***************************/

body {
  background-color: #212130;
}

#container {
  font-family: 'Exo 2', sans-serif;
  color: #c5c520;
  font-weight: 300;
  width: 100%;
  min-width: 225px;
  max-width: 325px;
}


/***************************/


/*******INPUT STYLES********/


/***************************/

.input {
  height: 25px;
  width: 100%;
  background-color: transparent;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  border-color: #c5c520;
  outline: 0;
  -webkit-transition: background-color 0.2s;
  -o-transition: background-color 0.2s;
  transition: background-color 0.2s;
  -webkit-transition: box-shadow 0.2s;
  -o-transition: box-shadow 0.2s;
  transition: box-shadow 0.2s;
  font-family: 'Exo 2', sans-serif;
  color: #c5c520;
  font-weight: 300;
}

.input:hover {
  box-shadow: inset 0 -10px 20px -10px #131322;
  -moz-box-shadow: inset 0 -10px 20px -10px #131322;
  -webkit-box-shadow: inset 0 -10px 20px border-right-width: 1px;
  border-left-color: #181825;
  border-right-color: #181825;
}

.input:focus {
  background-color: #191929;
}

.name_submit {
  color: #181825;
  background-color: #c5c520;
  border: none;
}

.submit_btn {
  display: none;
}

.question {
  display: block;
  bottom: 15px;
}


/***********************************/


/*******ITEM SPECIFIC STYLES********/


/***********************************/

#item1 {
  display: block;
}

#item2 {
  top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">


  <!-- WHAT IS YOUR NAME -->

  <div class="question" id="item1">
    <div class="text">
      <p>
        Before we get started, what is your name?
      </p>
    </div>
    <form name="name_form" action="" onSubmit="doit()">
      <input type="text" class="input" name="fname">
      <p></p>
      <input type="button" value="Submit" class="submit_btn">
    </form>
  </div>

  <!-- GREETING RE NAME -->
  <div class="question" id="item2">
    HI THERE
  </div>



</div>
Goran Stoyanov
  • 2,311
  • 1
  • 21
  • 31
ladanta
  • 459
  • 2
  • 6
  • 18

2 Answers2

2

.append() should be used to add new DOM elements. To add text to an existing element, use .text.

function doit(e) {
    e.preventDefault();
    $('#item2').text( function(i, oldtext) {
        return oldtext + $("form[name=name_form] input[name=fname]").val()+"U WOT";
    });
}

You also have to use preventDefault() to prevent the form from being submitted. To match this, I changed the <form> to:

<form name="name_form" action="" onSubmit="doit(event)">

Demo:

var greeting = "hello "
var div = document.getElementById('#item2');

function doit(e) {
  e.preventDefault();
  $('#item2').text(function(i, oldtext) {
    return oldtext + $("form[name=name_form] input[name=fname]").val() + "U WOT";
  });
}


// alert(greeting + document.name_form.fname.value)
//
//
// $( " HEYTHERDUDE "  + document.name_form.fname.value).appendTo($( " #item2 " )); 
//
// div.innerHTML = div.innerHTML + 'LOOK AT ME' + document.name_form.fname.value;
/***************************/


/*****CONTAINER STYLES******/


/***************************/

body {
  background-color: #212130;
}

#container {
  font-family: 'Exo 2', sans-serif;
  color: #c5c520;
  font-weight: 300;
  width: 100%;
  min-width: 225px;
  max-width: 325px;
}


/***************************/


/*******INPUT STYLES********/


/***************************/

.input {
  height: 25px;
  width: 100%;
  background-color: transparent;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  border-color: #c5c520;
  outline: 0;
  -webkit-transition: background-color 0.2s;
  -o-transition: background-color 0.2s;
  transition: background-color 0.2s;
  -webkit-transition: box-shadow 0.2s;
  -o-transition: box-shadow 0.2s;
  transition: box-shadow 0.2s;
  font-family: 'Exo 2', sans-serif;
  color: #c5c520;
  font-weight: 300;
}

.input:hover {
  box-shadow: inset 0 -10px 20px -10px #131322;
  -moz-box-shadow: inset 0 -10px 20px -10px #131322;
  -webkit-box-shadow: inset 0 -10px 20px border-right-width: 1px;
  border-left-color: #181825;
  border-right-color: #181825;
}

.input:focus {
  background-color: #191929;
}

.name_submit {
  color: #181825;
  background-color: #c5c520;
  border: none;
}

.submit_btn {
  display: none;
}

.question {
  display: block;
  bottom: 15px;
}


/***********************************/


/*******ITEM SPECIFIC STYLES********/


/***********************************/

#item1 {
  display: block;
}

#item2 {
  top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">


  <!-- WHAT IS YOUR NAME -->

  <div class="question" id="item1">
    <div class="text">
      <p>
        Before we get started, what is your name?
      </p>
    </div>
    <form name="name_form" action="" onSubmit="doit(event)">
      <input type="text" class="input" name="fname">
      <p></p>
      <input type="button" value="Submit" class="submit_btn">
    </form>
  </div>

  <!-- GREETING RE NAME -->
  <div class="question" id="item2">
    HI THERE
  </div>



</div>

Actually, your append() DOES work. You had two problems in your fiddle:

  1. You had onLoad selected. This causes all the code to be inside a window.onload function, so it wasn't in the global scope, which is needed for functions used in onsubmit attributes. Using No wrap fixes this.

  2. You weren't preventing the default submission. Beside the way I did this above, you can also do it by simply returning false in the onsubmit:

    onsubmit="doit(); return false;"

Demo:

var greeting = "hello "
var div = document.getElementById('#item2');

function doit() {
  $('#item2').append(document.name_form.fname.value + "U WOT");
}


// alert(greeting + document.name_form.fname.value)
//
//
// $( " HEYTHERDUDE "  + document.name_form.fname.value).appendTo($( " #item2 " )); 
//
// div.innerHTML = div.innerHTML + 'LOOK AT ME' + document.name_form.fname.value;
/***************************/


/*****CONTAINER STYLES******/


/***************************/

body {
  background-color: #212130;
}

#container {
  font-family: 'Exo 2', sans-serif;
  color: #c5c520;
  font-weight: 300;
  width: 100%;
  min-width: 225px;
  max-width: 325px;
}


/***************************/


/*******INPUT STYLES********/


/***************************/

.input {
  height: 25px;
  width: 100%;
  background-color: transparent;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  border-color: #c5c520;
  outline: 0;
  -webkit-transition: background-color 0.2s;
  -o-transition: background-color 0.2s;
  transition: background-color 0.2s;
  -webkit-transition: box-shadow 0.2s;
  -o-transition: box-shadow 0.2s;
  transition: box-shadow 0.2s;
  font-family: 'Exo 2', sans-serif;
  color: #c5c520;
  font-weight: 300;
}

.input:hover {
  box-shadow: inset 0 -10px 20px -10px #131322;
  -moz-box-shadow: inset 0 -10px 20px -10px #131322;
  -webkit-box-shadow: inset 0 -10px 20px border-right-width: 1px;
  border-left-color: #181825;
  border-right-color: #181825;
}

.input:focus {
  background-color: #191929;
}

.name_submit {
  color: #181825;
  background-color: #c5c520;
  border: none;
}

.submit_btn {
  display: none;
}

.question {
  display: block;
  bottom: 15px;
}


/***********************************/


/*******ITEM SPECIFIC STYLES********/


/***********************************/

#item1 {
  display: block;
}

#item2 {
  top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">


  <!-- WHAT IS YOUR NAME -->

  <div class="question" id="item1">
    <div class="text">
      <p>
        Before we get started, what is your name?
      </p>
    </div>
    <form name="name_form" action="" onSubmit="doit(); return false">
      <input type="text" class="input" name="fname">
      <p></p>
      <input type="button" value="Submit" class="submit_btn">
    </form>
  </div>

  <!-- GREETING RE NAME -->
  <div class="question" id="item2">
    HI THERE
  </div>



</div>
Goran Stoyanov
  • 2,311
  • 1
  • 21
  • 31
Barmar
  • 741,623
  • 53
  • 500
  • 612
  • Well append can be used to add text nodes as well. – dfsq Dec 25 '14 at 21:57
  • True, but then you have to actually create a text node. If the argument is a string, it's parsed as HTML if it begins with a tag, otherwise it's treated as a selector. – Barmar Dec 25 '14 at 21:59
0

I think the problem is that the function doit is not available when you bind onsubmit.

You can try to declare doit like a variable:

doit = function(){

By the way, if you don't want to submit really the form you can bind onclick instead of onsubmit.

Code snippet:

var greeting = "hello "
var div = document.getElementById('#item2');

doit = function() {
  $('#item2').append(document.name_form.fname.value + "U WOT");
  return false;
}


// alert(greeting + document.name_form.fname.value)
//
//
// $( " HEYTHERDUDE "  + document.name_form.fname.value).appendTo($( " #item2 " )); 
//
// div.innerHTML = div.innerHTML + 'LOOK AT ME' + document.name_form.fname.value;
/***************************/


/*****CONTAINER STYLES******/


/***************************/

body {
  background-color: #212130;
}

#container {
  font-family: 'Exo 2', sans-serif;
  color: #c5c520;
  font-weight: 300;
  width: 100%;
  min-width: 225px;
  max-width: 325px;
}


/***************************/


/*******INPUT STYLES********/


/***************************/

.input {
  height: 25px;
  width: 100%;
  background-color: transparent;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  border-color: #c5c520;
  outline: 0;
  -webkit-transition: background-color 0.2s;
  -o-transition: background-color 0.2s;
  transition: background-color 0.2s;
  -webkit-transition: box-shadow 0.2s;
  -o-transition: box-shadow 0.2s;
  transition: box-shadow 0.2s;
  font-family: 'Exo 2', sans-serif;
  color: #c5c520;
  font-weight: 300;
}

.input:hover {
  box-shadow: inset 0 -10px 20px -10px #131322;
  -moz-box-shadow: inset 0 -10px 20px -10px #131322;
  -webkit-box-shadow: inset 0 -10px 20px border-right-width: 1px;
  border-left-color: #181825;
  border-right-color: #181825;
}

.input:focus {
  background-color: #191929;
}

.name_submit {
  color: #181825;
  background-color: #c5c520;
  border: none;
}

.submit_btn {
  display: none;
}

.question {
  display: block;
  bottom: 15px;
}


/***********************************/


/*******ITEM SPECIFIC STYLES********/


/***********************************/

#item1 {
  display: block;
}

#item2 {
  top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">


  <!-- WHAT IS YOUR NAME -->

  <div class="question" id="item1">
    <div class="text">
      <p>
        Before we get started, what is your name?
      </p>
    </div>
    <form name="name_form" action="#" onSubmit="doit()">
      <input type="text" class="input" name="fname">
      <p></p>
      <input type="button" value="Submit" class="submit_btn">
    </form>
  </div>

  <!-- GREETING RE NAME -->
  <div class="question" id="item2">
    HI THERE
  </div>



</div>
Goran Stoyanov
  • 2,311
  • 1
  • 21
  • 31
cesare
  • 2,098
  • 19
  • 29