為什么這個模態表單被重定向到我的 php 文件？
[英]Why this modal form is getting redirected to my php file?
問題描述
我一直在嘗試使用從我的其他網站獲取的表格，但它不適用於我正在創建的新網站。 我在這里想念什么？ 也許在進入模態時應該使用不同的形式？ 我只是不想在將表單提交到 .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>
這是帶有 jQuery 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.');
}
});
});
});
2 個解決方案
解決方案1
1 已采納 2020-04-29 19:10:16
你可以試試
$("#cform").submit(....)
對於表單數據變量，您也可以嘗試
var formdata=new FormData(this);
另一件事是查看您的控制台，看看是否出現了一些錯誤
解決方案2
0 2020-04-29 19:17:27
我沒有看到，任何按鈕或 Js function 默認打開 model。 因此，如果您通過運行 index.html 來獲取表單視圖。 這意味着您的 bootstrap.min.css 未加載。
檢查您到 bootstrap.min.css 的路徑添加行以在單擊時打開 model
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
到這里為止一切看起來都很好。 試着讓我知道。 請在提交時檢查控制台。
為什么我的 PHP 頁面通過重定向它的頁面提交表單？
[英]Why is my PHP page submitting a form through the page that redirected it?
結果我使用 twig 和 php 重定向到我的 ID 編輯表單
[英]As a result I redirected to my ID editing form using twig and php
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.