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 · Accepted Answer · 2016-11-15 05:56:47Z

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, 2016 at 5:56

answered Nov 15, 2016 at 5:46

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

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

1 Comment

GR Miller Over a year ago

awesome. Thanks! this worked and helped me out so much!

Akshay · Accepted Answer · 2016-11-15 05:48:14Z

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, 2016 at 5:48

Akshay

8057 silver badges16 bronze badges

Comments

user3040610 · Accepted Answer · 2016-11-15 05:53:42Z

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, 2016 at 5:53

user3040610

7604 silver badges15 bronze badges

1 Comment

GR Miller Over a year ago

Thank you! New to dev and I knew the answer was out here and simpler than what I was trying. Thanks!

RizkiDPrast · Accepted Answer · 2016-11-15 05:57:23Z

0

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));

answered Nov 15, 2016 at 5:57

RizkiDPrast

1,7251 gold badge15 silver badges22 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related