Passing Values while handling/calling jQuery event

Question

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>

can you tell me where you want to pass data?

Jinesh
– Jinesh

2017-11-01 07:01:55 +00:00
Commented Nov 1, 2017 at 7:01 — Jinesh
– Jinesh, Commented Nov 1, 2017 at 7:01

Nisarg Shah · Accepted Answer · 2017-11-01 07:02:31Z

2

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>

answered Nov 1, 2017 at 7:02

Nisarg Shah

14.6k6 gold badges38 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chris Phillips · Accepted Answer · 2017-11-01 07:07:40Z

1

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');
   });
});

answered Nov 1, 2017 at 7:07

Chris Phillips

6735 silver badges10 bronze badges

Comments

Jinesh · Accepted Answer · 2017-11-01 07:19:59Z

0

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>

edited Nov 1, 2017 at 7:19

answered Nov 1, 2017 at 7:07

Jinesh

1,58010 silver badges15 bronze badges

1 Comment

Jinesh Over a year ago

my code also submit data with ajax you can check it

Collectives™ on Stack Overflow

Passing Values while handling/calling jQuery event

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related