Passing a value from onclick to jQuery

[jackam1]

I am very new to javascript/jquery.

I have problem writing code to pass a value from a php/html file to jQuery, which in turn passes it to a php file of name serv_reply7.php.

The variable is $row['mpn'].

Your help will be greatly appreciated.

 

html code:

<a>

<button  onclick="sendIt('<?PHP echo $row["mpn"];?>')"> List 

 

</button>

</a>

<p><span id="result to go here"></span></p>

 

 

same html file: <script>

function sendIt(mpn) {

 

var mpn='<?PHP echo $row["mpn"];?>',

 

 $.ajax({

 method: "POST",

 url:"serv_reply7.php",

 data: {:mpn:mpn},

 

 dataType: "text",

 async: false,

 

 });

 

</script>

 

 

 

serv_reply7.php file:

simply displays the variable

 

echo " value obtained is :".$_POST['mpn'];

 

 

 

[Jacques1]

You need to stop injecting PHP values into JavaScript context. This is a recipe for disaster.

 

Write a real, actual form with a proper target and a hidden field for that "mpm" thingy (this must be HTML-escaped when you insert it). Then, in a separate JavaScript file, override the default submit action with your Ajax HTTP request. This is not only much more clear. It also allows users who don't have JavaScript enable to still submit the form.

 

The first step is always to write proper HTML markup. JavaScript comes after that.

 

By the way, a synchronous Ajax request doesn't make a lot of sense. The whole point of Ajax is to be asynchronous (and that's what the "A" stands for).

[jackam1]

Thanks for your comments. I have made some modifications but get undefined message for the end result.

Some pointers will be appreciated.

  <script>

function pnFunction() {

 

var  x = document.getElementById("p_n").value;

 

document.getElementById("list").innerHTML =

this.resonseText;

xmlttp.open("GET", "serv_reply7.php" , true);

xmlttp.send();

 

}

 

 

</script>

 

--------------------

 

<input type="hidden" id="p_n" value ="<?PHP echo $row["mpn"];?>" />

<button onclick="pnFunction()"> List </button>

 

<p id="list"></p>

 

 

--------------------------------------

$st = $_REQUEST["x"];

echo "q is ".$st;

[Jacques1]

This makes no sense.

 

Once again: Start with a proper form. A real, actual, functional form with an action attribute and a submit button. Forget that JavaScript exists and concentrate on the HTML markup. Chances are you'll end up with something like this:

<form id="a_meaningful_form_id" action="serv_reply7.php" method="post">
    <input type="hidden" name="a_meaningful_field_name" value="<?= htmlspecialchars($row['mpn'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>">
    <input type="submit">
</form>

Several things:

• You've switched from POST to GET, so I don't know what you want. GET is purely for fetching data, POST is for changing data. Choose the right one.
• You have way too many cryptic names like "mpn", "p_n" and "pn". Use meaningful names.
• Despite my warning, you didn't HTML-escape the input. You must escape every PHP value. This is absolutely crucial.

Once you've fixed this, you should have a working form. Test it.

 

When that's done, then we can talk about JavaScript. This part will be very simple, because making an Ajax request based on a form is pretty much a standard jQuery feature.

$(function () {
    $('#a_meaningful_form_id').submit(function (event) {
        event.preventDefault();

        $.ajax({
            type: $(this).attr('method') || 'get',
            url: $(this).attr('action') || location,
            data: $(this).serialize(),
            success: function (data) {
                alert("submitted");
            },
	    error: function (data) {
		console.log("error");
	    }
        });
    });
});