Disabling form inputs/selects/etc on.submit, data is not sent to an iframe
Question
How can i disable inputs/selects/file inputs etc on submit event if the target of the form is an iframe?
Here's the link of a "working" example of the issue i'm having.
Here you can see the code.
<?php
if (isset($_REQUEST['iframe'])) {
if (isset($_POST['name_1'])) {
echo 'POST PIENO<br />';
} else {
echo 'POST VUOTO<br />';
}
echo '<pre>'.print_r($_POST, true).'</pre>';
die();
}
?>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" language="javascript"></script>
<script>
function disableOnSubmit() {
$(this).attr('disabled', true);
$('#button2').attr('disabled', false);
$('#form').submit(function(e){
$(this).find('input').attr('disabled', true);
});
}
function enableOnSubmit() {
$(this).attr('disabled', true);
$('#button1').attr('disabled', false);
$('#form').find('input').attr('disabled', false);
$('#form').unbind();
}
$(document).ready(function(){
$('#button1').click(disableOnSubmit);
$('#button2').click(enableOnSubmit);
});
</script>
</head>
<body>
<input type="button" id="button1" value="Disabled on Submit" />
<input type="button" id="button2" disabled value="Enabled on Submit" />
<form action="<?=$_SERVER['PHP_SELF']?>?iframe" method="post" id="form" target="iframe">
<input type="text" name="name_1" value="value_1" />
<input type="text" name="name_2" value="value_2" />
<input type="text" name="name_3" value="value_3" />
<input type="hidden" name="iframe" value="true" />
<input type="submit" value="submit" />
</form>
<iframe src="<?=$_SERVER['PHP_SELF']?>?iframe" name="iframe" />
</body>
</html>
1 answers
solution1
0 2014-05-22 20:41:16
If inputs are disabled as per the HTTP specification the data will not form part of the POST/GET request. Instead you are probably looking for the readonly attribute -- this will disable the inputs and still post the data.
17.12 Disabled and read-only controls: http://www.w3.org/TR/html401/interact/forms.html#h-17.12
In this example, the INPUT element is disabled. Therefore, it cannot receive user input nor will its value be submitted with the form.
<INPUT disabled name="fred" value="stone">
Edit
Your submit event is firing BEFORE the form is submitted, inside that function your disabling the inputs which means once it's exited that function, and when it goes to submit, those inputs are disabled therefore the data is not sent.
There is not a simple way to detect when a form is submitted (aside from using ajax and a complete event handler) -- however you could simulate this by listening to the load event on the iframe, and then disable the parents input elements.
$('iframe').on('load', function() {
$(this.ownerDocument.body).find('input').attr('disabled', true);
});
However if your trying to stop multiple submissions, this won't help as your form submit request would have already been handled by the time the load event fires.
If the above is your goal, I would suggest to just disable the submit button once the form is submitted (and maybe add a loading icon to show to the user something is happening etc).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.