A button has a name/value pair. When I click it, after a two-second delay, I want the form to submit with the button’s name/value pair as part of the form data.
Without any Javascript, the form would submit without delay with the button’s name/value pair as part of the form data.
Please see my MWE below.
<!doctype html>
<html lang="en">
<head>
<script src="import/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function(){
var waittime=2;
var blocksubmit=true;
$('form').submit(function (evt) {
if (blocksubmit) evt.preventDefault();
});
$('button').click(function(me){
theval = this.value;
$('#msg').html('Submitting "'+theval+'" in '+waittime+' seconds.');
setTimeout(
function () {
blocksubmit=false;
$('form').first().trigger('submit');
$('#msg').html('The URL should now display ?'+theval+' at its end.');
},
1000*waittime
);
});
});
</script>
</head>
<body>
<form action="?" method="get">
<p id="msg">Choose one:</p>
<button name="choice" value="True">True</button>
<button name="choice" value="False">False</button>
</form>
<p>Expected behavior: Two seconds after clicking a button, the browser loads `?choice=True` or `?choice=False`.</p>
<p>Actual behavior: Two seconds after clicking a button, the browser loads `?`. The input value is not included.</p>
</body>
</html>
Why is it ignoring the form data set when I click a button? choice is not set when the form submits.
Thanks!
