Dynamic Hidden Form Field Data Absent From POST

Question

I have a form that, when submitted, does not post the dynamically added hidden field.

html:

<div>
<form action="thankyou.php" onsubmit="return validate()" id="orderform" method="post">
<input type="text" name="name" /><br>
<input type="text" name="email" required /><br>
<input type="text" name="charterco" required /><br>
<input type="text" name="bname" /><br>
<input type="text" name="dtime" required /><br>
<input type="submit" />
</form>
</div>

jquery:

$('#orderform').submit(function(eventObj){
$('<input />').attr('type','hidden')
    .attr('id','list')
    .attr('name','shopList')
    .attr('value',sliststr>)
    .appendTo('#orderform');
return true;
});

POST data from Chrome DevTools:

name:b
email:b@b.com
charterco:b
bname:b
dtime:12:00
message:Comment

I can't work out what's gone wrong. My sliststr variable turns up filled and correct in my little debugging test on jsfiddle here . For whatever reason, it isn't POSTing.

EDIT: As @JayBlanchard pointed out below, I am adding to the form after the POST has been written.

Answer 1

Try to append the dynamic element, set the value of it and then submit the form. Otherwise it's submitting the form and then appending the html in callback.

Try the following.

function validate(){
        var shoplist = [1,2,3];
        $('#orderform').append("<input type='text' name='shop' id='list'>")
        $('[name="shop"]').val(shoplist)
        $('#orderform').submit(function(eventObj){

        return true;
        });
}