I need that when I clicked on the button One\two\three\etc... ajax request came to the server with the content $_POST['name']=value; I just can't figure out how to generate data for an ajax request.

HTML form

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <form class="form-inline d-inline" id="someId" method="post"> <button class="dropdown-item btn" name="name" value="1">one</button> <button class="dropdown-item btn" name="name" value="2">two</button> <button class="dropdown-item btn" name="name" value="3">three</button> <button class="dropdown-item btn" name="name" value="4">four</button> <div class="dropdown-divider"></div> <div class="input-group mx-2"> <input type="text" class="form-control" name="name" placeholder="Количество"> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button"><i class="fas fa-arrow-alt-circle-right"></i></button> </div> </div> </form> = "https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity = "sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin = "anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <form class="form-inline d-inline" id="someId" method="post"> <button class="dropdown-item btn" name="name" value="1">one</button> <button class="dropdown-item btn" name="name" value="2">two</button> <button class="dropdown-item btn" name="name" value="3">three</button> <button class="dropdown-item btn" name="name" value="4">four</button> <div class="dropdown-divider"></div> <div class="input-group mx-2"> <input type="text" class="form-control" name="name" placeholder="Количество"> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button"><i class="fas fa-arrow-alt-circle-right"></i></button> </div> </div> </form>

    3 answers 3

     $(document).ready(function() { $('button').click(function(e) { // Stop form from sending request to server e.preventDefault(); var btn = $(this); $.ajax({ method: "POST", url: "https://jsonplaceholder.typicode.com/posts", dataType: "json", data: { "name": btn.val(), 'input': $('input').val() }, success: function(data) { console.log(data); }, error: function(er) { console.log(er); } }); }) }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <form class="form-inline d-inline" id="someId" method="post"> <button class="dropdown-item btn" name="name" value="1">one</button> <button class="dropdown-item btn" name="name" value="2">two</button> <button class="dropdown-item btn" name="name" value="3">three</button> <button class="dropdown-item btn" name="name" value="4">four</button> <div class="dropdown-divider"></div> <div class="input-group mx-2"> <input type="text" class="form-control" name="name" placeholder="Количество"> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button"><i class="fas fa-arrow-alt-circle-right"></i></button> </div> </div> </form> = "https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity = "sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin = "anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <form class="form-inline d-inline" id="someId" method="post"> <button class="dropdown-item btn" name="name" value="1">one</button> <button class="dropdown-item btn" name="name" value="2">two</button> <button class="dropdown-item btn" name="name" value="3">three</button> <button class="dropdown-item btn" name="name" value="4">four</button> <div class="dropdown-divider"></div> <div class="input-group mx-2"> <input type="text" class="form-control" name="name" placeholder="Количество"> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button"><i class="fas fa-arrow-alt-circle-right"></i></button> </div> </div> </form> 

        ... <input name="name" class="inputForName" type="hidden" /> </form> $('#someId .dropdown-item').click(function(e){ e.preventDefault(); var $form = $(this).closest("form"); $form.find(".inputForName").val($(this).attr("value")); $.ajax({ ... data: $form.serialize(); ... }); $form.find(".inputForName").val(""); });

        You have one form, you need to make your own for each request.

        Or, otherwise, try writing onclick="send_request(type)" for each button onclick="send_request(type)"

        And then through the tags <script></script> drive the following code:

          $("#selector").load("/file.php", {param:value,param2:value2},function() { //actions after response });

        Remember to read the value in $("selector").val();

        • I track the $('#someID .dropdown-item').click event $('#someID .dropdown-item').click on this event I can send an ajax request, I need a name=value come to the server, I just can’t figure out how to form the data field data d ajax- request - Roman Andreev
        • I understand. You need to read the value by id, not name. - Nikita Vasin 7:09 pm