CODEWITHSUNDEEP
javascriptjqueryonclick
Ranjith Raina
Ranjith Raina

Reputation: 15

How to pass multiple parameter in jquery onclick

$(document).ready(function () {
var from='2022-02-21';
var to='2022-02-25';
var category ='rt';
var btndiv = '<div class="col-12 text-right">\
               <input type="button" value="Generate Invoice" id="btngenerateinvoice" onclick="generateinvoice('+ from + ',' + to + ',' + category + ')" class="btn btn-blue btn-sm" /></div>';
    $(".btndiv").append(btndiv);
});


function generateinvoice(ff, tt, cc) {
    alert("helo");
    var f = ff;
    var t = tt;
    var c = cc
    
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row btndiv">
                                
</div>

I pass three-parameter on onclick generateinvoice function dynamically but generateinvoice these function not called

Upvotes: 0

Views: 413

Answers (1)

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

The problem is that the values inside onclick="generateinvoice when they are rendered, the code thinks it's variables and those have not been defined. You can add \' in front and after each variable.

so you can do onclick="generateinvoice(\''+ from + '\',\'' + to + '\',\'' + category + '\')"

Without the \' the rendered code could look like generateinvoice(from,to,category), but when you add those the code will render the variables as string,s so it looks like generateinvoice('from','to','category')

Demo

$(document).ready(function() {
  var from = "f",
    to = "t",
    category = "cc";

  var btndiv = '<div class="col-12 text-right">\
               <input type="button" value="Generate Invoice" id="btngenerateinvoice" onclick="generateinvoice(\''+ from + '\',\'' + to + '\',\'' + category + '\')" class="btn btn-blue btn-sm" /></div>';
  $(".btndiv").append(btndiv);
});


function generateinvoice(ff, tt, cc) {
  alert("helo");
  var f = ff;
  var t = tt;
  var c = cc

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row btndiv">

</div>

Upvotes: 1

Related Questions