CODEWITHSUNDEEP
javascriptphpjqueryfunctiondrupal
Minh Thach
Minh Thach

Reputation: 1

JQuery will not submit form because it has multiple form buttons

I am fairly new to development and was wondering if I can get some expertise from the community.

Basically what happened is that my form contains multiple input buttons, each with their own functionality and they all work as designed. These were created in PHP. I found a jQuery plugin called jQuery-confirm to add a confirmation dialog box for users who click on these buttons.

I'm trying to target a particular button input so that when the user clicks, a confirmation box appears. If they click Okay to it, the button should continue to execute normally.

I've tried using 

$( '#close-section-btn' ).click();

and even

$( '#close-section-btn' ).submit();

but neither works. When I do select the form level: $( 'form' ).submit();, it will just refresh the page, but what I want is to target the button. I've also looked at return false and preventDefault, but no luck. Most guides tell me to use .submit() but I can only target the form level which will not perform the button specific functionality.

Here's my following jQuery code:

$( '#close-section-btn' ).confirm({
    icon: 'fa fa-exclamation-triangle',
    title: 'Attention',
    confirm: function() {
       $( '#close-section-btn' ).click();
    },
    confirmButtonClass: 'btn-info',
    cancelButtonClass: 'btn-danger',
    autoClose: 'cancel|10000',
    backgroundDismiss: true
});

My HTML:

<form action="/admin-training/session-details/1911" method="post" id="web-section-admin-form" accept-charset="UTF-8" novalidate="novalidate">
<input class="btn btn-primary form-submit" type="submit" id="close-section-btn" name="op" value="Close Session">
<input class="btn btn-danger form-submit" type="submit" id="cancel-section-btn" name="op" value="Cancel Session">
</form>

Any suggestions would be appreciated!

Upvotes: 0

Views: 84

Answers (3)

Sandman
Sandman

Reputation: 2307

One thing you could check is that the submit button control has been assigned an ID of submitButton as opposed to a class name.

JQuery selectors will work for both but you need to specify whether you are selecting a class or an ID based on the # and . sybmols.

Example:

<button id=submitButton></button>

Would be selected via JQuery as follows:

$("#submitButton").on('click',function(e){

});

But..

<button class=submitButton></button>

Would be selected as follows:

$(".submitButton").on('click',function(e){

});

Upvotes: 1

Aruna Warnasooriya
Aruna Warnasooriya

Reputation: 339

HTML : 

<form name="myform" id="myform" action="#" method="post">
   <label>User Name : </label>
   <input type="text" id="username" />
   <label>Age : </label>
   <input type="text" id="age" />
   <input type="submit" id="submitButton" value="Save" />
</form>

JavaScript : 

<script>
$(document).ready(function(){
   $("#myform").on('submit',function(e){
      e.preventDefault();
      //this will stop default form submit.
   });

   $("#submitButton").on('click',function(e){
      e.preventDefault();
      //your code goes here.
   });
});
</script>

Upvotes: 0

Zesty Citrus
Zesty Citrus

Reputation: 68

.submit() submits the form. use .on('submit')

Upvotes: 0

Related Questions