Send button value by post request via jquery

Question

My code

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

<form>
<button id="test" value="123" name="test" >ok</button>
</form>

<script>


 $(document).ready(function () {
          $("#test").click(function() {
                   var combinedData = $("#test").serialize();
                 $.post(
                        "element_submit.php",
                        combinedData
                 ).done(function(data) {
                        //alert("Successfully submitted!");
                        $("#result").html(data);
                 }).fail(function () {
                          //alert("Error submitting forms!");
                 })
          });
        });

</script>



<div id="result" ></div>

The element_submit.php file

<?php 

//just to test it should output in the #result div 
echo $_POST['test'];

?>

What I am trying to do is submit the with the value="attribute" so the data is serialized and send the post request, it's not like a submit when user insert a value and submit,What I need is to get the value attribute and submit to the php, this code is only for To simplify and illustrate what I am trying to do, because in this page I have the following buttons with ids #follow #unfollow so I need a way to get the button value to make the user follow and unfollow.

Please refer to this post http://stackoverflow.com/questions/4007942/jquery-serializearray-doesnt-include-the-submit-button-that-was-clicked — Vbudo, May 05 '17 at 00:31

gavgrif · Accepted Answer · 2017-05-05T00:22:45.317

1

you need to serialize the form - not the elements within it .You can also have the triggering button outside the form which will prevent hte form from submitting on the button click.

<form id="testForm">
   <input type="hidden" name="testInput" value="123"/>
</form>

 <button name="test" id="testButton">submit</button>
...

<script>
 $(document).ready(function () {
          $("#testButton").click(function() {
                   var combinedData = $("#testForm").serialize();...

 $(document).ready(function () {
    $("#testButton").click(function() {
        var combinedData = $("#testForm").serialize();
         console.log(combinedData);
      })
   })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="testForm">
   <input type="hidden" value="123" name="testinput"/>
</form>
<button  id="testButton">Click</button>

edited May 05 '17 at 00:22

answered May 05 '17 at 00:10

gavgrif

15,194
2
25
27

what do you get if you console.log(combinedData ); before you try the post? – gavgrif May 05 '17 at 00:15
Output all blank – Otávio Barreto May 05 '17 at 00:17
I need the button inside the form because on click the user will follow or unfollow so the element clicked is what will be send via post – Otávio Barreto May 05 '17 at 00:20
answer updated to have an input in the form -you can have that as a hidden value - so the triggering button does not need to be in the form - and if you don't want to see it have the type = hidden - this then allwosthe ajax form submission and I have put a console ,log in ther to show the outcome - it works – gavgrif May 05 '17 at 00:24
output the form it's works but the problem is that I need the button inside the form because my php checks in data base if user is following other if so it outputs to the button with id=#following , etc I will see what I can implement if the form don't break the css , thanks for the alternative solution – Otávio Barreto May 05 '17 at 00:31

Vbudo · Answer 2 · 2017-05-05T00:48:42.910

Straight JS might help you out. Include a function that sends the id and get the value of that id. Then just send a regular post of the value without serialize... easier.

<script>
function fetchButtonValue(theId){
var p = document.getElementById(theId).value;
alert (p);
}
</script>

<button id="myFormBtn" value ="woo" 
onclick="fetchButtonValue(this.id)">My Button</button>

this works...

You could also put a class on the button let's say class="followBTN" then on a click you could just snag the value by $(this).val() I'd use this method if I had more than one button per page.

Send button value by post request via jquery

2 Answers2