Post jquery/ajax data to hidden field

Question

I have a jquery/ajax geolocation script that outputs data such as:

$.ajax({
        url: "https://geoip-db.com/jsonp",
        jsonpCallback: "callback",
        dataType: "jsonp",
        success: function( location ) {
            $('#country').html(location.country_name);
        }
    });

I'm trying to get it to include that in a php form in a hidden field when the rest of the form is submitted. But so far I can't seem to get the geolocation script's data to submit with the form.

The important bit from the php form handler would be:

Country: " . $_POST['field_7'] . "

And in the html form I've tried:

<input type="hidden" name="field_7" id="#country" value=''>

And various other things like value="$('#country')" but the geolocation data is not being posted/emailed with the form. How can I get the data the geolocation script captures to post to the hidden input in the form?

The # in jquery means id=, so you don't want the # in your id, change <input type="hidden" name="field_7" id="#country" value=''> to <input type="hidden" name="field_7" id="country" value=''>. And then set with $("#country").val(location.country_name); - edit: as someone answered. — fdomn-m
– fdomn-m, Commented Jun 22, 2018 at 12:51

DS9 · Accepted Answer · 2018-06-22 12:48:24Z

3

Remove # from your input field.

<input type="hidden" name="field_7" id="country" value=''>

And then in your JS, replace html with val

$.ajax({
    url: "https://geoip-db.com/jsonp",
    jsonpCallback: "callback",
    dataType: "jsonp",
    success: function( location ) {
        $('#country').val(location.country_name);
    }
});

answered Jun 22, 2018 at 12:48

DS9

3,0436 gold badges61 silver badges106 bronze badges

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

2 Comments

IncredibleHat Over a year ago

Original answer, and nice that you described the two issues.

VAnton Over a year ago

This is helpful. Thanks. Yes, I can see html is for printing to the page now. val for a form.

Zeynal · Accepted Answer · 2018-06-22 12:49:29Z

1

Try this code:

$.ajax({
        url: "https://geoip-db.com/jsonp",
        jsonpCallback: "callback",
        dataType: "jsonp",
        success: function( location ) {
            $('#country').val(location.country_name);
        }
    });


<input type="hidden" name="field_7" id="country" value=''>

answered Jun 22, 2018 at 12:49

Zeynal

16910 bronze badges

3 Comments

fdomn-m Over a year ago

meta.stackoverflow.com/questions/300837/…

Zeynal Over a year ago

@freedomn-m thanks. i wrote a short answer to answer quickly

fdomn-m Over a year ago

yes, but a short description would improve it drastically (and may have got you marked as the answer).

Sachin Sudhakar Sonawane · Accepted Answer · 2018-06-22 12:52:21Z

1

you just need to small change

write val instead of html

$('#country').val(location.country_name); // use val

and in html

Remove # from your input field id.

edited Jun 22, 2018 at 12:52

Sachin Sudhakar Sonawane

1,9371 gold badge24 silver badges37 bronze badges

answered Jun 22, 2018 at 12:50

Bhargav Chudasama

7,2336 gold badges24 silver badges41 bronze badges

Collectives™ on Stack Overflow

Post jquery/ajax data to hidden field

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related