javascriptjqueryajaxpost

AJAX: How to send each form of the body and disable the corresponding buttons


I'm trying to send each form of the body using ajax. And depending on the return request AJAX I need to disable the corresponding button.

So the questions are:

  1. How to send each form of the body by AJAX?
  2. How to disable the corresponding button depending on returning request AJAX.
    <script>
            $(document).ready(function () {
                var formDates = $('form').serializeArray() //I want to send each form of body
                $.each(formDates, function () { //This part I don't know how must be
                    $.ajax({
                        type: "POST",
                        url: "file.php",
                        data: formDates,
                        success: function (data) {
                                $("#dates").html(data) //Return a variable called 'condition'
                                if (condition == true) {
                                    $("addFavs").prop("disabled", true); //I want disable the button which correspond to the form I send
                                }
                                if (condition == false) {
                                    $("removeFavs").prop("disabled", true); //I want disable the button which correspond to the form I send
                                }
                            } //End of success de AJAX
                    }) //End of ajax request
                }) //End of each 
    
                //})
            })
        </script>
    </head>
    
    <body>
        <form id="form1">
            <input type="text" value="date1" name="name1" />
            <input type="text" value="date2" name="name2" />
            <input type="text" value="date3" name="name3" />
            <button type="button" class="addFavs form-button">Add</button>
            <button type="button" class="removeFavs form-button">Remove</button>
        </form>
    
        <form id="form2">
            <input type="text" value="date4" name="name1" />
            <input type="text" value="date5" name="name2" />
            <input type="text" value="date6" name="name3" />
            <button type="button" class="addFavs form-button">Add</button>
            <button type="button" class="removeFavs form-button">Remove</button>
        </form>
    <span id="dates"></span>
    </body>

Solution

  • Try this, I've made following changes in your script:

    -Get all forms instead all form data.

    -Used current form reference for submitted current form elements.

    $(document).ready(function() {
      var form = $('form'); //Getting all forms 
      $.each(form, function(i, formC) { //This part I dont know how must be
          var formDates = $(formC).serializeArray();
          $.ajax({
              type: "POST",
              url: "file.php",
              data: formDates,
              success: function(data) {
                  $("#dates").html(data) //Return a variable called 'condition'
                  if (condition == true) {
                    $(formC).find("addFavs").prop("disabled", true); //I want disable the button wich correspond to the form I send
                  }
                  if (condition == false) {
                    $(formC).find("removeFavs").prop("disabled", true); //I want disable the button wich correspond to the form I send
                  }
                } //End of success de AJAX
         });//End of ajax request
    });