Я пытался работать с этой формой, которую я взял с другого моего веб-сайта, но она не работает на новом веб-сайте, который я создаю. Что мне здесь не хватает? Может быть, форму следует использовать по-другому, когда в модал? Я просто не хочу, чтобы меня перенаправляли при отправке формы в файл. php. Любое предложение?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Fincas Morales</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<!-- Custom fonts -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
<link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- Custom styles for -->
<link href="css/landing-page.css" rel="stylesheet">
<!-- JQUERY CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Ingrese sus Datos:</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form id="cform" action="mailer1.php" method="post">
<div class="form-row">
<div class="col">
<input type="text" class="form-control" id="name" placeholder="Nombre" name="name">
</div>
<div class="col">
<input type="text" class="form-control" id="phone" placeholder="Teléfono" name="phone">
</div>
</div>
<div class="row mt-3">
<div class="col">
<input type="email" class="form-control" id="email" placeholder="Correo" name="email" required>
</div>
</div>
<div class="row mt-3">
<div class="col">
<input type="text" class="form-control" id="dim" placeholder="Dirección de inmueble" name="dim">
</div>
</div>
<div class="row mt-3">
<div class="col">
<input type="text" class="form-control" id="diudad" placeholder="Ciudad" name="ciudad">
</div>
<div class="col">
<input type="text" class="form-control" id="poblacion" placeholder="Población" name="poblacion">
</div>
</div>
<div class="row mt-3">
<div class="col">
<input type="text" class="form-control" id="viviendas" placeholder="N° Viviendas" name="viviendas">
</div>
<div class="col">
<input type="text" class="form-control" id="garajes" placeholder="N° Garajes" name="garajes">
</div>
<div class="col">
<input type="text" class="form-control" id="trasteros" placeholder="N° Trasteros" name="trasteros">
</div>
</div>
<div class="row mt-3">
<div class="col-4">
<input type="text" class="form-control" id="locales" placeholder="Locales" name="locales">
</div>
<div class="col-4">
<input type="text" class="form-control" id="ascensores" placeholder="Ascensores" name="ascensores">
</div>
<span class="mr-1">Portería:</span>
<div class="col-1 custom-control custom-radio">
<input type="radio" class="custom-control-input" id="r1" name="por" value="Si">
<label class="custom-control-label" for="r1">Sí</label>
</div>
<div class="col-1 custom-control custom-radio">
<input type="radio" class="custom-control-input" id="r2" name="por" value="No">
<label class="custom-control-label" for="r2">No</label>
</div>
</div>
<div class="row mt-3">
<div class="col">
<input type="text" class="form-control" id="asunto" placeholder="Asunto" name="asunto">
</div>
</div>
<div class="row mt-3">
<div class="col">
<textarea class="form-control" id="ozc" placeholder="Otras zonas comunes" name="ozc" rows="3"></textarea>
</div>
<div class="col">
<textarea class="form-control" id="mensaje" placeholder="Su Mensaje:" name="mensaje" rows="3"></textarea>
</div>
</div>
<div id="form-messages" class="mt-2 p-2 text-center success error" style="display:none;"></div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="submit" class="btn btn-success">Enviar</button>
</div>
</form>
</div>
</div>
</div>
<script src="app1.js"></script>
</body>
Это файл .app1 с кодом jQuery AJAX:
$(function() {
// Get the form.
var form = $('#cform');
// Get the messages div.
var formMessages = $('#form-messages');
// Set up an event listener for the contact form.
$(form).submit(function(event) {
// Stop the browser from submitting the form.
event.preventDefault();
// Serialize the form data.
var formData = $(form).serialize();
// Submit the form using AJAX.
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response) {
// Make sure that the formMessages div has the 'success' class.
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
// Set the message text.
$(formMessages).text(response);
// Clear the form.
$('#name').val('');
$('#email').val('');
$('#message').val('');
})
.fail(function(data) {
// Make sure that the formMessages div has the 'error' class.
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
// Set the message text.
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! An error occured and
your message could not be sent.');
}
});
});
});