Pass a string parameter in an onclick function

 

Pass a string parameter in an onclick function

A couple of concerns for me with respect to using string escape in onClick and as the number of arguments grow, it will become cumbersome to maintain.

The following approach will have a one hop - On click - take the control to a handler method and handler method, based on the event object, can deduct the click event and corresponding object.

It also provides a cleaner way to add more arguments and have more flexibility.

In JavaScript, you can pass a string parameter in an onClick function by enclosing the function call in an anonymous function. In this article, we will see how to Pass string parameters in the onClick function.

Example 1: This example simply puts the argument which is a string in the onClick attribute of the button which calls a function with a string as an argument using the onClick() method.

The below is an example for php mysql database based 

Example of below code is here https://www.jyotishgher.in/Trending/prashna/garbini-prashnavli-prashna.php

<button type="button" class="btn btn-info btn-lg"  onclick="myFunction('<?php echo $row["id"]; ?>')" ><?php echo $row["id"]; ?></button>

<script>

function myFunction(obj) {

    

    

   var form_data ='id='+obj

                  $.ajax(

                                 {

                                  type: "POST",

                                  url: "https://www.jyotishgher.in/id.php",

                                  data: form_data,

                                  dataType: "json",

                                  success: function(result)

                                  {

                                   

                                          const arr =result;

                           

                                     alertify.alert('<pre>'+result.slok+'</pre>').setHeader('<em>Prashna,You Pressed </em> '+obj);

                                    //  document.getElementById('heading1').innerHTML = obj.NAME +"@Rs." +"</br>"+obj.PRICE+"/-" ;

                                      //    $("#myModal").modal();

                                                        

      },

                                error: function(jqXHR, textStatus, errorThrown){

                                    alert('Error: ' + textStatus + ' - ' + errorThrown);

                                }

                              }); 

}

</script>

To use alertify Declare under

 <header>

       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">

         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>

         <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

         <script src="//cdn.jsdelivr.net/npm/alertifyjs@1.12.0/build/alertify.min.js"></script>

         <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.12.0/build/css/alertify.min.css"/>

         <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.12.0/build/css/themes/default.min.css"/>

</header>