how to disable form submit button and upload the form data

Question

Hello I have managed to disable the submit input when clicked but the problem i am having when the PHP ifisset runs it does not store the parameters in the database after disabling the input submit, however after my research and test it does not upload the data inputted to the form but disables the button but when i remove the Jquery code no action is taken and the picture uploads it this is my code

 //input submit works if not disabled but does not run if disabled after onclick which i feel when the button is disabled the form submit has no name valid
<script>
$(function() {
  $('#theform').submit(function() {
    $("input[type='submit']", this)
      .val("Please Wait...")
      .attr('disabled', 'disabled');
    return true;
  });
});
</script>

//My form
<form action="" method="post" role="form" id="theform" enctype="multipart/form-data">
  <input type="file" name="file">
  <input type="submit" name="sub" value="UPLOAD">
</form>

Where is the php code as there is something going wrong when writing to the database. — , Oct 29 '16 at 01:26
Your description is a bit confusing. Are you saying that (a) with no JS the form works normally and the file is saved by the PHP, but (b) with that JS the button disables and the form submits but the `file` parameter is not included in the request? Or is it the `name` parameter that isn't included in the request? Please [edit] your question to show the relevant PHP code. — nnnnnn, Oct 29 '16 at 01:27
The php code runs normally if i remove the js so what is happening based on what it i think is that the jquery is disabling the input button and so the name cannot be binded so when the page reloads there is no code processed @nnnnnn — chiefo, Oct 29 '16 at 01:31
are you checking for `isset($_POST['sub'])` in your php? Since `disabled` inputs are not posted (see http://stackoverflow.com/questions/1355728/values-of-disabled-inputs-will-not-be-submited), you would need to check a non-disabled input. — Sean, Oct 29 '16 at 01:37
yes i am check but it runs normally because of the isset but disabled fields do not run so i am looking for a way to prevent the user form submitting two times @Sean — chiefo, Oct 29 '16 at 02:02
This question makes no sense. What are you trying to do? All your javascript does is disable the submit button after you click it.But when you click the submit button, the form is submitted and the page refreshes so there's no point in disabling the button. Are you wanting to submit the form data *without refreshing the page*? If so, google `ajax` — Wesley Smith, Oct 29 '16 at 02:06
Checking for the submit button is nonsense anyway. What if the submit button value was send, but no actual file data? The uploaded file is what you want to process further - so _that_ is what you should check for. — CBroe, Oct 29 '16 at 02:08
I know ajax all i want is to not allow the user to not support values twice thats all @DelightedD0D — chiefo, Oct 29 '16 at 02:14
answer(s) given are meant to be accepted when a solution was found, btw. That's how people know the question was solved. — Funk Forty Niner, Oct 29 '16 at 02:35

score 0 · Answer 1 · answered Oct 29 '16 at 02:27

All i want is to not allow the user to not submit values twice thats all

In that case, I would divorce the button from the submit event and the form data itself by using type="button" for the "submit" button and using a hidden input for the sub value like this:

$(function() {
  $('.submit').click(function(){
         $(this).prop("disabled",true).val("Please Wait...").closest('form').submit();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" role="form" id="theform" enctype="multipart/form-data">
  <input type="file" name="file">
  <input type="hidden" name="sub" value="UPLOAD">
  <input type="button" class="submit" value="UPLOAD">
</form>

how to disable form submit button and upload the form data

1 Answers1