How To output form input value using appendTo with jquery

Question

Alright Before Getting Started Here is the idea . i'm making a reminder app it's just a simple app . i'm getting the value from the input field and making a checkbox with the input value next to it . now i'm using appendTo method but it's not printing the value . if you guys can help it would be awesome thanks!

enter image description here

MY HTML

 <form id="form">
   <input class="form-control topSpaceFromRoof" type="text"id="getReminder"/>
   <p class="text-center">
      <input type="submit" value="submit" class="btn btn-default">
   </p>
 </form>

 <!-- here is the div in which i want to append check boxes -->
 <div class="checkbox">

 </div>

MY JAVASCRIPT

 (function(){

    var input = $('#getReminder');
    $this     = $(this);

    $( "form" ).submit(function() {
     if(input.val() == ""){
       input.addClass('warning').attr('placeholder','Please set the reminder').addClass('warning-red');
       return false;
     }
    else
    {
        input.removeClass('warning');
        $('<label>
            <input type="checkbox" id="checkboxSuccess" value="option1">
            '+ input.val() +'
           </label>').appendTo('.checkbox');
        return true;
    }

});

})();

George · Accepted Answer · 2015-07-06 17:05:51Z

2

In JavaScript, a new line within a string denotes the start of a new statement. If you want your string to cover multiple lines, you need to escape the carriage return:

 $('<label>\
    <input type="checkbox" id="checkboxSuccess" value="option1">\
    '+ input.val() +'\
    </label>').appendTo('.checkbox');

Or, concatenate each line:

 $('<label>' +
    '<input type="checkbox" id="checkboxSuccess" value="option1">' +
    input.val() +
    '</label>').appendTo('.checkbox');

answered Jul 6, 2015 at 17:05

George

36.8k9 gold badges70 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Daniel Over a year ago

your answer helping a lil bit . the value is coming but just for one second and then disappears

George Over a year ago

That's because your form is submitted so your browser is redirected. You can prevent that with event.preventDefault().

Daniel Over a year ago

event.preventDefault() is useful but when i refresh page the outputs disappears

George Over a year ago

That's normal behaviour, there is no reason for it to 'stay'. The page gets rerequested so everything goes back to how the document is received.

Daniel Over a year ago

is there any way that we can store these values with jquery ? . so even if we refresh the page it stays there?

|

bcr · Accepted Answer · 2015-07-06 17:02:46Z

0

else { 
   input.removeClass('warning');
    $('.checkbox').append('<label><input type="checkbox" id="checkboxSuccess" value="option1"> ' + input.val() + '</label>');
    return true;
 }

I'm not sure .appendTo() is what you want to use here, I would select the element with $(selector) and then use the .append() method to add the next item.

answered Jul 6, 2015 at 17:02

bcr

3,82120 silver badges28 bronze badges

Collectives™ on Stack Overflow

How To output form input value using appendTo with jquery

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related