Why wont javascript get values of php generated html?

Question

im using ajax to query my mysql to my database. But im stock at issue with my php generated html form input - javascript/jquery will simply not pick up the value. From normal html is no issue of course.

php (works fine, all echos are good)

<?php
function getAge() {
    $age = "<select name='age'>";
    $result = $mysqli->query("select * from ages");
    while ($row = $result->fetch_row()) {
        $age.="<option value=" . $row[0] . ">". $row[1] ."</option>";
    }
    $age.="</select>";

    return $age;
}
?>

html

<form id="myform">
   <input name='name' value='Nick'>
   <input name='sport' value='Football'>
   <?php echo getAge(); ?>
   <input type='submit'>
</form>

javascript

$("form#myform").on('submit', function(e){
    e.preventDefault();
    var json = {}
    $.each(this.elements, function(){
        json[this.name] = this.value || '';
    });
}

Everything works well except it wont get the value of the <select>. If i make a normal html select it works.. ?! Also anybody know how to delete the submit button from the json object? :-)

did you try to serialize the form? Have a look at Jquery Form Serialization — Guns
– Guns, Commented Apr 11, 2014 at 11:25
What's the generated HTML? Put in some console.debug(); and trace down the issue. — Daniel W.
– Daniel W., Commented Apr 11, 2014 at 11:26
There is no difference between a normal html select and a php generated html select. Whatever the problem is, it is unlikely to have anything to do with the PHP. — Quentin
– Quentin, Commented Apr 11, 2014 at 11:27

wrxsti · Accepted Answer · 2014-04-11 11:52:31Z

1

Any dynamically generated HTML will not have the events applied to them, as those events are applied on page load. So if you apply the events to the document, you will be able to pull values from dynamically generated html. Like so:

var json = {};
$(document).on('submit', 'form#myform', function(e){
   $('*', this).each(function(){    
        json[$(this).attr('name')] = $(this).val();
   });
});

Hope this helps!

edited Apr 11, 2014 at 11:52

answered Apr 11, 2014 at 11:39

wrxsti

3,4941 gold badge21 silver badges30 bronze badges

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

9 Comments

Mac Luc Over a year ago

this makes sense! but the function wont fire now?

wrxsti Over a year ago

Had a typo, forgot a comma.

Mac Luc Over a year ago

i did see that, still nothing :)

wrxsti Over a year ago

made a quick change, see if that gives you any output in the console.

Mac Luc Over a year ago

OH i does! seems like i get the value!

|

Jai · Accepted Answer · 2014-04-11 11:46:59Z

1

change this line:

$age.="<option value=" . $row[0] . ">". $row[1] ."</option>";

to this:

$age.="<option value='" . $row[0] . "'>". $row[1] ."</option>";
   //----------------^---------------^------put quotes

And i think you can make use of .serializeArray() which does the same you want but in a different way like multiple objects with multiple [{ name : value}] pairs:

$(function(){  //<-----put this block too
   $("form#myform").on('submit', function(e){
      e.preventDefault();
      var json = $(this).serializeArray();
   });    //<----checkout the closing
}); //<---doc ready closed.

edited Apr 11, 2014 at 11:46

answered Apr 11, 2014 at 11:33

Jai

74.8k12 gold badges77 silver badges104 bronze badges

6 Comments

Mac Luc Over a year ago

ill give that a shot! in debugger i do have quotes around my value i DOM.

Mac Luc Over a year ago

.serializeArray() wont get the select value aswell

Daniel W. Over a year ago

I'm not sure about, but var json = {} makes the variable local scope inside the function? Change it to json = {}.

Jai Over a year ago

@MacLuc as i see your question your jquery code is missing the closing of click event, see if that might be the issue and is it wrapped in doc ready block. Also lookout for any js errors in your browser's console.

Mac Luc Over a year ago

its wrapped in doc ready and i did close it right in production code :)

|

Collectives™ on Stack Overflow

Why wont javascript get values of php generated html?

2 Answers 2

9 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related