Javascript post data without using AJAX

Question

Hi all I have an Anchr tag on whcih I am submitting a form as seen below:

<form id="myForm" action="main/postdata">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<a onclick="myFunction()" value="Submit form">click</a>
</form>

<script>
function myFunction()
{
document.getElementById("myForm").submit();
}
</script>

is there anyway I can append the POST data with an additional value when the user clicks, so if I had 2 a tags I could establish which one was clicked? eg:

 <form id="myForm" action="main/postdata">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br><br>
    <a onclick="myFunction()" value="Submit form">click</a>  -- ? check which 1 was clicked?
    <a onclick="myFunction()" value="Submit form">click 2 </a>
 </form>

I know it would be easier to use buttons to do this - but I am looking for the JS/JQUERY solution if there is one please, many thanks!

Answer 1

HTML:

 <form id="myForm" action="main/postdata">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br><br>
    <input type="hidden" value="" id="check_value1" name="check_value1">
    <input type="hidden" value="" id="check_value2" name="check_value2">
    <a onclick="document.getElementById('check_value1').value= 'yes';myFunction()" value="Submit form">click1</a>
    <a onclick="document.getElementById('check_value2').value= 'yes';myFunction()" value="Submit form">click2</a>
    </form>

JS:

function myFunction()
{
  document.getElementById("myForm").submit();
}

You an check which one was clicked , when you get the POST ed data on the server-side..one of check_value1 or check_value2 will have a value of "yes"

Answer 2

You can change a function on it:

<a onclick="myFunctionOnClick()" value="Submit form">click</a>  -- ? check which 1 was clicked?
<a onclick="myFunctionOnClick2()" value="Submit form">click 2 </a>

Answer 3

The best way to approach this is to submit the form with a submit button instead of JavaScript. You can style the submit button to look however you like.

<input type="submit" name="something" value="click">
<input type="submit" name="something" value="click 2">

Then check the value of something on the server. Only the clicked submit button will be successful.

---

The (much worse) solution would be to use JavaScript to add a hidden input to the form before submitting it.

<a onclick="myFunction(1)" value="Submit form">click</a>  -- ? check which 1 was clicked?
<a onclick="myFunction(2)" value="Submit form">click 2 </a>

function myFunction(id) {
    var frm = document.getElementById("myForm");
    var input = document.createElement("input");
    input.type="hidden";
    input.name="something";
    input.value=id;
    frm.appendChild(input);
    frm.submit();
}

Answer 4

You can use hidden field, change its value on click and then submit the form. You can also pass the param to the function as a value.

So your html, could like like this:

<form id="myForm" action="myfile.php">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <a onclick="myFunction('submit1')">click</a>
    <a onclick="myFunction('submit2')">click 2</a>
    <input type="hidden" name="myclick">
 </form>

And yout jQuery code like this:

<script>
function myFunction(btnValue) {
  $("input[name='myclick']").val(btnValue);
  $("myForm").submit();
}
</script>

Also, I have changed the <form action> value as I don't understand what you were trying to achieve by setting it to action="main/postdata" . Action should point to the destination.