Getting text from input form returns empty string, but console.log shows displays text

Question

I know this is a commonly posted question so I apologize, but I've tried javascript, jQUERY, parts of this,several versions from previous work that DO work, .value, .textContent, .innerHTML, getAttribute('value'), document.getElementById and just everything else I could think of.

I console.log(user_name.value) and get the value I want, but when I console.log(name) or try to use user_name.value it's just an empty string. I'm new to development and got all the rest of the code working, everything else is hanging on this simple part and I can't solve it yet. Any help would be so appreciated.

HTML:

    <form>
        <input id="user_name" type="text" placeholder="Your Name" />
        <input id="user_email" type="text" placeholder="Your E-mail" />
    </form>

JavaScript:

var name;
var email;

function reserveSeat(name, seatNumber, email) {

    var name = $('#user_name').getAttribute('value');

    var email = $('#user_email').getAttribute('value');

    var seatNumber = seatNumbers;

    reservedSeats.push (new CustomerReservation (name, seatNumber,   email));
    console.log(name)
    console.log(email)
};

$('.submitBtn').on('click', reserveSeat(name, seatNumber, email));

madalinivascu · Answer 1 · 2016-11-15T05:56:47.053

1

You tried all but the right one: val()

name = $('#user_name').val();

email = $('#user_email').val();

Note: if submitBtn is a type submit don't forget to prevent the default event,

$('.submitBtn').on('click', function(e){
    e.preventDefault();
    name = $('#user_name').val();
    email = $('#user_email').val();
    reservedSeats.push (new CustomerReservation (name, seatNumber,   email));
    console.log(name)
    console.log(email)

});

Note2: if your form is dynamically added don't forget to delegate your event

edited Nov 15 '16 at 05:56

answered Nov 15 '16 at 05:46

madalinivascu

32,064
4
39
55

awesome. Thanks! this worked and helped me out so much! – GR Miller Nov 16 '16 at 17:34

score 0 · Answer 2 · answered Nov 15 '16 at 05:48

0

there is no attribute called value in the input box and you are using jquery with javascript functions using ".val()" is the right option

answered Nov 15 '16 at 05:48

Akshay

815
7
16

score 0 · Answer 3 · answered Nov 15 '16 at 05:53

0

Try this,

<form>
    <input id="user_name" type="text" placeholder="Your Name" />
    <input id="user_email" type="text" placeholder="Your E-mail" />
    <input id="submitBtn" type="submit" class="submitBtn"/>
</form>


$(document).on('click','.submitBtn',function(){

       var name = $('#user_name').val();
       var email = $('#user_email').val();

       console.log(name)
       console.log(email)

});

answered Nov 15 '16 at 05:53

user3040610

750
4
15

Thank you! New to dev and I knew the answer was out here and simpler than what I was trying. Thanks! – GR Miller Nov 16 '16 at 17:34

score 0 · Answer 4 · answered Nov 15 '16 at 05:57

please review this one

/*need gobal variable or not?? if not I will just remove it
var name;
var email; */


function reserveSeat(seatNumbers) {
  /*for savety*/
  seatNumber = Number(seatNumbers) || 5;
  /* change getAttribute(value) to val()*/
  var name = $('#user_name').val(),
    email = $('#user_email').val();

  reservedSeats.push(new CustomerReservation(name, seatNumber, email));
  console.log(name);
  console.log(email);
};

$('.submitBtn').on('click', reserveSeat(seatNumber));

Getting text from input form returns empty string, but console.log shows displays text

4 Answers4