There is a code that looks like this. The code works, but there is a nuance.

Why the form is not sent when not all fields are filled.

Tell me what to do. Well, criticism is welcome.

(function ($, undefined) { $(function () { var form = $("#myForm"); $("#send").text("Введите все данные......."); form.change(function () { var selectTerritory = $('#selectTerritory').val(), selectRayons = $('#selectRayons').val(), selectRayonsTowns = $('#selectRayonsTowns').val(), selectTowns = $('#selectTowns').val(), selectSMT = $('#selectSMT').val(), inputName = $('#inputName').val(), inputMail = $('#inputMail').val(), formdata = $("#myForm").serialize(); $.ajax({ type: "POST", url: "registration.php", dataType: "JSON", data: formdata, success: function (data) { $('#selectTerritory').val(selectTerritory); if (data.towns) { var optionTowns = ''; optionTowns = '<br><select id="selectTowns" class="chosen-rtl" name="Towns" title="Выберете город"> <option value="">Выберете город</option>'; for (var town in data.towns) { optionTowns += '<option value="' + data.towns[town] + '">' + data.towns[town] + '</option>'; } optionTowns += '</select><br>'; $("#detaleTowns").html(optionTowns); $('#selectTowns').val(selectTowns); } if (data.rayons_towns) { var optionRayonsTowns = ''; optionRayonsTowns = '<br><select id="selectRayonsTowns" class="chosen-rtl" name="RayonsTowns" title="Выберете район Города"> <option value="">Выберете район Города</option>'; for (var rayon in data.rayons_towns) { optionRayonsTowns += '<option value="' + data.rayons_towns[rayon] + '">' + data.rayons_towns[rayon] + '</option>'; } optionRayonsTowns += '</select><br>'; $("#detaleRayonsTowns").html(optionRayonsTowns); $('#selectRayonsTowns').val(selectRayonsTowns); } if (data.rayons) { var optionRayons = ''; optionRayons = '<br><select id="selectRayons" class="chosen-rtl" name="Rayons" title="Выберете район Области"> <option value="">Выберете район Области</option>'; for (var rayon in data.rayons) { optionRayons += '<option value="' + data.rayons[rayon] + '">' + data.rayons[rayon] + '</option>'; } optionRayons += '</select><br>'; $("#detaleRayons").html(optionRayons); $('#selectRayons').val(selectRayons); } if (data.smt) { var optionSMT = ''; optionSMT = '<br><select id="selectSMT" class="chosen-rtl" name="SMT" title="Выберете ПГТ,Село,Деревню"> <option value="">Выберете ПГТ,Село,Деревню</option>'; for (var smt in data.smt) { optionSMT += '<option value="' + data.smt[smt] + '">' + data.smt[smt] + '</option>' } optionSMT += '</select><br>'; $("#detaleSMT").html(optionSMT); $('#selectSMT').val(selectSMT); } } }) }); $("#send").click(function (e) { e.preventDefault(); $('#send').text('Зарегестрировать'); // Вот здесь сераилизуется форма но success не проходит( var mydata = $("#myForm").serialize(); $.ajax({ type: "POST", url: "add.php", dataType: "JSON", data: mydata, cache: false, success: function (data) { $("<h1>Данные успешно отправлены</h1>").appendTo("#yes"); $('input, select').val(''); if (data.newUser) { var newUser = ''; newUser += '<h1>Ура новый пользователь</h1>' newUser += '<p>'; for (var i = 0 in data.newUser) { newUser += data.newUser[i] + '<br>'; } ; newUser += '</p>'; $('#yes').html(newUser); } if (data.oldUser) { var oldUser = ''; oldUser += '<h1>Уже есть такой пользователь</h1>' oldUser += '<p>'; for (var y = 0 in data.oldUser) { oldUser += data.oldUser[y] + '<br>'; } ; oldUser += '</p>'; $('#yes').html(oldUser); } } }); }); });

}) (jQuery);

  • And what does the server return after sending the request? Maybe there is an error on the add.php side? - Dmitry B.
  • For a better understanding of the reason, add error output after sending the request. As in this example (at the bottom) jsfiddle.net/Ln580frh - Dmitry B.
  • @DmitryB. Requested JSON parse failed. - dpi
  • @DmitryB. Yes, there was a mistake on the side of add.php, I decided everything so that you can issue as an answer and I will vote. And now the key question is how after all the answers reload the page ?? - dpi
  • Add for the file add.php output all errors. In Chrome, open the Developer Tools , Network tab, XHR filter and try submitting the form. Next, look what came in the Response . - Dmitry B.

1 answer 1

For a better understanding of the reason, add error output after sending the request. As in this example (at the bottom): http://jsfiddle.net/Ln580frh/

Add for the file add.php output all errors. In Chrome, open the Developer Tools , Network tab, XHR filter and try submitting the form. Next, look what came in the Response .