时间戳

首页 > 解决方案 > 为什么这个模态表单被重定向到我的 php 文件？

php - 为什么这个模态表单被重定向到我的 php 文件？

问题描述

我一直在尝试使用从我的其他网站获取的表格，但它不适用于我正在创建的新网站。我在这里想念什么？也许在进入模态时应该使用不同的形式？我只是不想在将表单提交到 .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">&times;</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>

这是带有 jQ​​uery AJAX 代码的 .app1 文件：

$(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.');
    }
    });
    });
});

标签： phpjqueryajaxforms

解决方案

you can try

$("#cform").submit(....)

and for form data variable you can try also 

var formdata=new FormData(this);

another thing is to look your console to see if some bug appear

推荐阅读