Добрый день всем. У меня довольно уникальная ситуация, на которую я не могу найти ответ. У меня есть форма, которая отправляется на электронную почту, но после отправки формы она перенаправляет в файл 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>* 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*</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.
Попробуйте это:
$("#inquiryForm").on("submit", function(e){
e.preventDefault();
$this = $(this);
$.ajax({
type: "POST",
url: $this.attr('action'),
data: $this.serialize(),
success : function(){
alert('Done');
}
});
});
У тебя немного смущения.
Используя Ajax, вам вообще не нужна форма: вы показываете поля ввода пользователю, затем нажатием кнопки вы создаете Ajax-запрос и ждете ответа. Это означает, что ваша страница не перемещается с того места, где она стоит.
Вместо этого, при отправке формы, HTML ожидает место для вывода результатов формы: в конце концов, отправляя, вы переходите к URL-адресу.
Теперь у вас есть два решения:
1) научиться использовать Ajax.
2) поставить скрытый плавающий фрейм на странице присвойте ему идентификатор, установите целевой объект формы для этого идентификатора и добавьте обработчик в загруженное событие iFrame