Неправильное поведение JavaScript

#javascript #php #html #ajax

#javascript #php #HTML #ajax

Вопрос:

Я пытаюсь отправить данные моей формы в файл .php с помощью AJAX, но JS ведет себя неправильно, на самом деле происходит то, что когда я оставляю поля ввода пустыми, все работает нормально (т. Е. Программа php выполняется и вносит изменения в мою базу данных, как ожидалось), но когда я заполняю данные формы, например, когда я заполняю имя, адрес электронной почты, пароль, моя страница на стороне клиента обновляется, и выполняется досент файла php.

Извините за любые грамматические ошибки.

Я ценю любую помощь от кого угодно!

Большое спасибо!

 var form = document.getElementById("form_signup");
var formdata = new FormData(form);

$('#form_signup').on('submit', function(ev) {
  console.log(formdata);
  ev.preventDefault();
  $.ajax({
    url: "./process_php/Signup1.php",
    data: $('form').serialize(),
    cache: false,
    processData: false,
    contentType: false,
    type: "POST",


    success: function(response) {
      console.log("done"   response);
    }

  });
  return false;

});

 <?php 
if (!isset($_REQUEST['username'])) {
	die();
}
$username = "temp_username";
$email = "temp_email";
$password = "temp_password";
$sqlconnection = new mysqli("", "", "", "");
$insertstatement = "INSERT INTO new_users (Name , Email , Password , Subscriber ) VALUES ('$username' , '$email' , '$password' , 'Normal' ) ";
if ($sqlconnection->query($insertstatement) === TRUE) { 						//if entered into db successfully
    echo "DONE";
}else {

	//run js to inform
	}

?>

 <!--I have loaded jquery and also my external js file-->

<form class="font1" id="form_signup">
  <!-- main content , signup form -->
  <h2 id="form_name" class="font1">LOGIN</h2>
  <input type="text" name="username" placeholder="Username" minlength="3" autofocus id="username"><br>
  <input type="email" name="email" placeholder="Email" minlength="10"><br>
  <input type="password" name="pass" placeholder="Password" minlength="8"><br>
  <input type="submit" value="Confirm">
</form>

1. Ну, для начала, var formdata = new FormData(form); должно быть внутри вашего обработчика отправки — в противном случае вы просто фиксируете состояние, которое было у формы при загрузке страницы, но до того, как пользователь что-либо ввел.

2. Какова цель formdata ? Вы устанавливаете его до того, как пользователь отправит форму, вы регистрируете его, но на самом деле вы не отправляете его на сервер.

3. Есть ли какие-либо ошибки в консоли JavaScript?

4. На самом деле, когда я пытаюсь получить данные в моем php-файле, я получаю сообщение об ошибке (неопределенный индекс)

5. Почему вы устанавливаете ContentType в false ?

Ответ №1:

Кажется, проблема с $('form').serialize() . Здесь form не то же самое, что var form = document.getElementById("form_signup");

 $('#form_signup').on('submit', function(ev) {
  console.log(formdata);
  ev.preventDefault();
  $.ajax({
    url: "./process_php/Signup1.php",
    data:  $('#form_signup').serialize(),
    // rest of the code

1. Хотя это лучший код, это было бы проблемой, только если бы у него было несколько форм на странице.

2. Я думал $('#form_signup') , что выберу только определенную форму.

3. $('form').serialize() сериализует первую форму на странице. Если существует только одна форма, это то же самое, что $(this) или $('#form_signup')

4. Таким образом, ваш ответ будет решением только в том случае, если у него есть несколько форм, и он пытается отправить форму, которая не является первой.