CODEWITHSUNDEEP
javascriptjquery
RAP
RAP

Reputation: 137

Passing Values while handling/calling jQuery event

Right now I am using java script to submit two forms with a common function, I want to do it with jQuery. How can I pass data in jQuery as simple as JavaScript. I cannot able to send/retrieve data while event call.

Present Code:

function SaveSample(flag,mode){
  //Based on flag and mode i am performing some validations
  //save sample
}
<form id="ff1" name="ff1" method="post">
    <input type="text" id="dummy2" name="dummy">
    <input type="button" value="Save" onclick="SaveSample('A','S')">
</form>
<form id="ff2" name="ff2" method="post">
    <input type="text" id="dummy2" name="dummy">
    <input type="button" value="Save" onclick="SaveSample('A','D')">
</form>

Required Code:

$(document).ready(function(){
  $(".sampleSave").on("click",function(e){
    e.preventDefault();
    //perform validations
    //save sample
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="ff1" name="ff1" method="post">
  <input type="text" id="dummy1" name="dummy">
  <input type="button" value="Save" class="sampleSave">
</form>
    
<form id="ff2" name="ff2" method="post">
  <input type="text" id="dummy2" name="dummy">
  <input type="button" value="Save" class="sampleSave">
</form>

Upvotes: 2

Views: 48

Answers (3)

Jinesh
Jinesh

Reputation: 1580

You can use this code

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">

    $(document).ready(function(){
    $(".sampleSave").on("click",function(e){

     var formData = $(this);


    $.ajax( {
          type: "POST",
          url: formData.attr( 'action' ),
          data: formData.serialize(),
          success: function( response ) {
            console.log( response );
          }
        } );
    e.preventDefault();
    //perform validations
    //save sample
    });
    });
</head>
<body>
<form id="ff1" name="ff1" method="post" action="yourfile.php">
    <input type="text" id="dummy1" name="dummy">
    <input type="button" value="Save" class="sampleSave">
    </form>

    <form id="ff2" name="ff2" method="post" action="yourfile1.php">
    <input type="text" id="dummy2" name="dummy">
    <input type="button" value="Save" class="sampleSave">
    </form>
 </body>
</html>

Upvotes: 0

Chris Phillips
Chris Phillips

Reputation: 673

Another option is not to put the parameters on the form element, but instead have different callbacks for each form.

$(document).ready(function(){
  $("#ff1 .sampleSave").on("click",function(e){
     e.preventDefault();
     SaveSample('A','S');
   });
   $("#ff2 .sampleSave").on("click",function(e){
     e.preventDefault();
     SaveSample('A','D');
   });
});

Upvotes: 1

Nisarg Shah
Nisarg Shah

Reputation: 14541

You can set the data-* attributes on the button and them access them in the click handler using $(this).attr("<attribute name>").

$(document).ready(function() {
  $(".sampleSave").on("click", function(e) {
    console.log($(this).attr("data-flag"), $(this).attr("data-mode"));
    e.preventDefault();
    //perform validations
    //save sample
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="ff1" name="ff1" method="post">
  <input type="text" id="dummy1" name="dummy">
  <input type="button" value="Save" data-flag="A" data-mode="B" class="sampleSave">
</form>

<form id="ff2" name="ff2" method="post">
  <input type="text" id="dummy2" name="dummy">
  <input type="button" value="Save" data-flag="C" data-mode="D" class="sampleSave">
</form>

Upvotes: 2

Related Questions