Использование AJax для предотвращения перенаправления страниц после отправки формы

Добрый день всем. У меня довольно уникальная ситуация, на которую я не могу найти ответ. У меня есть форма, которая отправляется на электронную почту, но после отправки формы она перенаправляет в файл php, который обрабатывает информацию и отправляет электронную почту. Я искал везде и видел, что то, что я пытаюсь сделать, может быть сделано с помощью AJax, но я не могу заставить его работать. У меня есть для загрузки в div, который содержится в моем index.html с использованием JQuery. Проблема в том, что когда я отправляю его, он перенаправляет его в php-файл, но я хочу, чтобы он оставался внутри index.html, содержащего его. Я разместил свои коды ниже. Заранее спасибо.

<form name="inquiryForm" id="inquiryForm" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"method="POST">
<fieldset>
<legend>&#42; Required</legend>

<br>

First Name<input type="text" name="fname" value="<?php echo $fname;?>">
<span class="error">* <?php echo $fnameErr;?></span><br><br>

Last Name<input type="text" name="lname" value="<?php echo $lname;?>">
<span class="error">* <?php echo $lnameErr;?></span><br><br>

Phone Number<input type="text" name="phone" value="<?php echo $phone;?>"><br><br>

Email Address<input type="text" name="email" value="<?php echo $email;?>">
<span class="error"><?php echo $emailErr;?></span><br><br>

<label>How did you find us?</label>
<select name="how">
<option value=""> -- Please select -- </option>

<option>Google</option>

<option>Yahoo</option>

<option>Link from a website</option>

<option>Word of mouth</option>

<option>Other</option>
</select><br><br>

<label>Inquiry&#42;</label><br>

<textarea name="inquiry" value="<?php echo $inquiry;?>" rows="5" cols="40"></textarea>
<span class="error">* <?php echo $inquiryErr;?></span><br><br><br>

<input type="submit" name="submit" id="submit" value="Submit">

<input type="reset" name="reset" value="Reset">
</fieldset>
</form>

Ниже мой php файл

<?php
/* Set e-mail recipient */
$myemail  = "my email address";
$subject = "Ism Clothing Contact Form Submission";

// define variables and set to empty values
$fnameErr = $lnameErr = $emailErr = $inquiryErr = "";
$fname = $lname = $email = $inquiry = "";
$phone = $_POST['phone'];
$how = $_POST['how'];

if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["fname"])) {
$fnameErr = "First Name is required";
} else if (empty($_POST["lname"])) {
$lnameErr = "Last Name is required";
} else {
$fname = test_input($_POST["fname"]);
$lname = test_input($_POST["lname"]);

if (!preg_match("/^[a-zA-Z ]*$/",$fname)) {
$fnameErr = "Only letters and white space allowed";
} else if (!preg_match("/^[a-zA-Z ]*$/",$lname)) {
$lnameErr = "Only letters and white space allowed";
}
}

if (empty($_POST["email"])) {
$emailErr = "Email is required";
} else {
$email = test_input($_POST["email"]);

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Invalid email format";
}
}

if (empty($_POST["inquiry"])) {
$inquiryErr = "Please enter questions comments, or concerns";
} else {
$comment = test_input($_POST["inquiry"]);
}
}

function test_input($data)
{
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}

/* Format form data for email */
$message = "Hello!

Ism Clothing contact form has been submitted by:

Name: $fname $lname
E-mail: $email
Phone #: $phone

How did he/she find it? $how

Comments:
$inquiry

End of message
";

/* Send the message using mail() function */
mail($myemail, $subject, $message);

?>

и ниже код Jquery, который загружает мой contact.php (форма) на мою главную страницу (index.html)

$("#contact").on("click", function(){
$("#content").load("contact.php");
});

Я использую этот код выше в моем index.js, чтобы загрузить contact.php в div в моем index.html.

-1

Решение

Попробуйте это:

 $("#inquiryForm").on("submit", function(e){
e.preventDefault();
$this = $(this);
$.ajax({
type: "POST",
url: $this.attr('action'),
data: $this.serialize(),
success : function(){
alert('Done');
}
});
});
2

Другие решения

У тебя немного смущения.

Используя Ajax, вам вообще не нужна форма: вы показываете поля ввода пользователю, затем нажатием кнопки вы создаете Ajax-запрос и ждете ответа. Это означает, что ваша страница не перемещается с того места, где она стоит.

Вместо этого, при отправке формы, HTML ожидает место для вывода результатов формы: в конце концов, отправляя, вы переходите к URL-адресу.

Теперь у вас есть два решения:
1) научиться использовать Ajax.
2) поставить скрытый плавающий фрейм на странице присвойте ему идентификатор, установите целевой объект формы для этого идентификатора и добавьте обработчик в загруженное событие iFrame

-1

По вопросам рекламы [email protected]