JQuery cannot get values

Question

I can get a text/val from a text area. But I am trying to get an input from a Form. I've read a bunch of articles to try different things but I can only get a value/text from my textarea.

Tried serialize, get the same result. I have a msg that prints out and my NodeJS server spits out same result on console. I've tried using classes instead of IDs. Tried adding type="text" to customer didn't work. Tried with JSON.stringify and without for both cust and date. Do input fields not work? I'm using JQuery 3.1.1

Response says: {date: '', customer: '""', notes: 'notes go here'}

<form name="loginForm" method="post" action="/sendReturnForm" id="returnForm">

        <p>Date:</p>
        <input type="date" name="formDate" id="formDate"/>
        <p>Customer:</p>
        <input name="formCustomer" id="formCustomer"/>
        <p>Notes:</p>
        <textarea rows="5" cols="40" id="notes">Notes go here</textarea>
</form>

<script language="JavaScript">
    $(document).ready(function () {
        var values = {
            date: $("#formDate").text(),
            customer: JSON.stringify($("#formCustomer").text()),
            notes: $("#notes").text()
        };

        $(".submitButton").click(function () {
            $.ajax({
                url: '/sendReturnForm',
                type: 'POST',
                data: JSON.stringify(values),
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                async: false,
                success: function (msg) {
                    alert(JSON.stringify(values));
                }
            });
        });
    });
</script>

Thank you all for your help. The data collection was in the wrong spot as pointed out by Yaroslav and Mosd. I tried text and val but it didn't matter when I was trying to collect data that wasn't there. — allegory
– allegory, Commented Mar 11, 2017 at 17:57

Timur Gilauri · Accepted Answer · 2017-03-11 09:19:53Z

3

$('#formCustomer') is an input field, so to get its value you need to use $('#formCustomer').val() instead of $("#formCustomer").text()

answered Mar 11, 2017 at 9:19

Timur Gilauri

9148 silver badges14 bronze badges

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

1 Comment

allegory Over a year ago

Yes text won't work but I had originally tried switching between the two. Ended up being code needed to be moved to the submit click button.

TheMY3 · Accepted Answer · 2017-03-11 09:36:29Z

2

You need to collect data when you click submit button:

$(".submitButton").click(function (event) {
    event.preventDefault();
    var values = {
        date: $("#formDate").val(),
        customer: JSON.stringify($("#formCustomer").val()),
        notes: $("#notes").text()
    };
    $.ajax({
        url: '/sendReturnForm',
        type: 'POST',
        data: JSON.stringify(values),
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        async: false,
        success: function (msg) {
            alert(JSON.stringify(values));
        }
    });
});

edited Mar 11, 2017 at 9:36

answered Mar 11, 2017 at 9:10

TheMY3

3533 silver badges11 bronze badges

1 Comment

allegory Over a year ago

It makes sense now seeing it laid out that the form loads and I had pre-made text in the field, which is why I was only getting that field. Thank you.

Mosd · Accepted Answer · 2017-03-11 09:21:53Z

As already pointed out by @Yaroslav, you should be collecting the values in the onclick handler, see my code, wrapped you values in a function that i call before sending the data, also val worked for me instead of text():

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="loginForm" method="post" action="/sendReturnForm" id="returnForm">

        <p>Date:</p>
        <input type="date" name="formDate" id="formDate"/>
        <p>Customer:</p>
        <input name="formCustomer" id="formCustomer"/>
        <p>Notes:</p>
        <textarea rows="5" cols="40" id="notes">Notes go here</textarea>
        <button type='button' class='submitButton'>submit</button>
</form>

<script language="JavaScript">
    $(document).ready(function () {
        
        function getValues(){
                  var values = {
            date: $("#formDate").val(),
            customer:                        JSON.stringify($("#formCustomer").val()),
            notes: $("#notes").text()
        };
        return values;
        }
        //$.each($('#returnForm').serializeArray(), function (i, field) {
            //values[field.name] = field.value;
        //});
        $(".submitButton").click(function () {
            console.log(JSON.stringify(getValues()));
            $.ajax({
                url: '/sendReturnForm',
                type: 'POST',
                data: JSON.stringify(getValues()),
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                async: false,
                success: function (msg) {
                    alert(JSON.stringify(values));
                }
            });
        });
    });
    </script>

Kirit Patel · Accepted Answer · 2017-03-11 09:21:46Z

1

You must have to use the .val() function instead of the .text() to get the value from the input. see in below code. for textarea .text() is fine but for input .val() would work.

<script language="JavaScript">
$(document).ready(function () {
    var values = {
        date: $("#formDate").val(),
        customer: JSON.stringify($("#formCustomer").text()),
        notes: $("#notes").val()
    };
    //$.each($('#returnForm').serializeArray(), function (i, field) {
        //values[field.name] = field.value;
    //});
    $(".submitButton").click(function () {
        $.ajax({
            url: '/sendReturnForm',
            type: 'POST',
            data: JSON.stringify(values),
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            async: false,
            success: function (msg) {
                alert(JSON.stringify(values));
            }
        });
    });
});

Hope this will work for you.

answered Mar 11, 2017 at 9:21

Kirit Patel

1229 bronze badges

1 Comment

allegory Over a year ago

Yes text won't work but I had originally tried switching between the two. Ended up being code needed to be moved to the submit click button.

Collectives™ on Stack Overflow

JQuery cannot get values

4 Answers 4

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related