CODEWITHSUNDEEP
jqueryhtmlforms
weggie
weggie

Reputation: 447

Using jQuery to disable a button after submit does not pass the value of the button

I have a really strange issue that is bugging me. I have two forms that disable the submit button once it's clicked to prevent a form from sending a duplicate value.

Example One (Working)

 <script>
                  $('#addposition').submit(function(){
                      $('#SavePosition').val('Saving...');
                      $('input[type=submit]', this).attr('disabled', 'disabled');
                  });
            </script> 
             <script>
                  $('#addposition').submit(function(){
                      $('#saveandedit').val('Saving...');
                      $('input[type=submit]', this).attr('disabled', 'disabled');
                  });
            </script>

Here are the submit buttons used in this positions form. 

<input type="submit" id="SavePosition" class="btn btn-primary" value="Submit & Add Position">
<input type="submit" id="saveandedit" class="btn btn-info" name="SaveAndEdit" value="Submit & Edit New Position">

There are 2 buttons on the screen, depending on what the user clicks, will determine what code is run and what page is shown next.

When this is executed, I can determine on the existence of #saveandedit if I am sending the user to the save and edit page. The page that the form is submitted to, will process the form variables. If #saveandedit is not there, then they go to the save and add page.

Example Two (Not Working)

                <script>
              $('#addcandidate').submit(function(){
                  $('#saveandedit').val('Submitting...');
                  $('input[type=submit]', this).attr('disabled', 'disabled');
              });
            </script>
             <script>
              $('#addcandidate').submit(function(){
                  $('#saveandadd').val('Submitting...');
                  $('input[type=submit]', this).attr('disabled', 'disabled');
              });
            </script>

Here are the buttons for this candidate form

<input type="submit" class="btn btn-info" id="saveandedit" name="saveandedit" value="Submit & Edit New Candidate">
<input type="submit" class="btn btn-primary" id="saveandadd" name="saveandadd" value="Submit & Add New Candidate">

The same should be true here. If the #saveandedit exists on the processing page, then we send the user the save and edit page. However, there is no #saveandedit variable period. I can look at the whole variable scope and that value is not present.

I have looked at the URL that is posted to the processing page and for the candidates page, there is no value for save and edit.

However, on the positions page, I can clearly see the value for Save and edit and that page works properly.

Is there any reason why using this simple snip of jQuery code would kill that button ?

Upvotes: 1

Views: 1097

Answers (3)

Pascal Ockert
Pascal Ockert

Reputation: 984

Disabled form elements are not submitted, this is part of the HTML standard.

As a workaround, you could add a hidden input field and assign a value to it, depending on which button has been clicked.

Example that works for me:

<form method="post" id="addcandidate">
    <input type="submit" class="btn btn-info" id="saveandedit" name="saveandedit" value="Submit & Edit New Candidate">
    <input type="submit" class="btn btn-primary" id="saveandadd" name="saveandadd" value="Submit & Add New Candidate">
    <input type="hidden" id="action" name="action" value=""/>
</form>

JS:

$('#saveandedit').click(function(){
    $('#action').val('saveandedit');
});

$('#saveandadd').click(function(){
    $('#action').val('saveandadd');
});

$('#addcandidate').submit(function(){
    $('#addcandidate input[type=submit]').prop('disabled', true).val('Submitting...');
});

Fiddle (similar)

Upvotes: 3

Adish
Adish

Reputation: 11

A CSS for the button to appear disabled and a javascript preventDefault() should do the trick.

Upvotes: 0

Keshav jha
Keshav jha

Reputation: 1364

For second example your submit button id is different then jquery hence it will not work.

Upvotes: 2

Related Questions