У меня есть форма, как это:Форма загрузки внешнего скрипта после завершения заполнения
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:200" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="resources/style.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Footer Generator</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
</ul>
</div>
</nav>
<!-- Customize your footer and submit -->
<div id="container">
<form class ="formFooter" method="post" action= "script.php">
<h3>Select your trademark</h3>
<select class="form-control" name="trademark">
<option></option>
<option>©</option>
<option>™</option>
<option>®</option>
</select>
<h3>Your company name</h3>
<input class="form-control" type="text" name="companyName" placeholder="Your company name" />
<h3>Background Color</h3>
<input class="form-control" placeholder="(e.g. 00ff00)" type="text" name="backgroundColor">
<h3>Font Color</h3>
<input class="form-control" placeholder="(e.g. 00ff00)" type="text" name="fontColor">
<h3>Opacity</h3>
<input class="form-control" placeholder="(Pick a value between 0 and 1 e.g. 0.3)" type="text" name="opacity">
<br/>
<br/>
<button class="form-control" type= "submit" name= "submit">Generate footer</button>
</form>
</div>
<div id="footer_date"> © 2016 Footer Generator </div>
</body>
</html>
форма имеет действие, которое приводит к «script.php», вот сценарий:
<?php
function footerPreview()
{
echo "<h3>Preview:</h3>";
date_default_timezone_set('UTC');
$trademark = $_POST["trademark"];
$company = $_POST["companyName"];
$date = date("Y");
//style
$backgroundColor = $_POST['backgroundColor'];
$fontColor = $_POST['fontColor'];
$opacity = $_POST['opacity'];
echo "<div id='generated_footer_date' style='background-color:$backgroundColor; color:$fontColor; opacity: $opacity; ' >$trademark $date $company </div>";
}
// generate result for the head
function rawHead()
{
$head = htmlspecialchars('<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:200" rel="stylesheet">
</head>',ENT_QUOTES);
echo "<pre><h4>Put this code inside your head tags</h4>$head</pre>";
}
// generate result for the body
function rawBody()
{
$body1of5 = htmlspecialchars('<div id="footer_date">',ENT_QUOTES);
$body2of5 = $_POST["trademark"];
$body3of5 = date("Y");
$body4of5 = $_POST["companyName"];
$body5of5 = htmlspecialchars('</div>',ENT_QUOTES);
echo "<pre><h4>Put this code inside your body tags</h4>$body1of5 $body2of5 $body3of5 $body4of5 $body5of5 </pre>";
}
// generate result for the CSS
function rawCSS()
{
$opacity = $_POST['opacity'];
$backgroundColor = $_POST['backgroundColor'];
$fontColor = $_POST['fontColor'];
echo
"<pre>
<h4>Put this code in your websites stylesheet</h4>
color:$fontColor;
background-color:$backgroundColor;
opacity:$opacity;
width:100%;
text-align:center;
padding-top:15px;
height:50px;
font-family: 'Raleway', sans-serif;
right: 0;
bottom: 0;
left: 0;
position:fixed;
</pre>";
}
// Generate eveything by one click
if(isset($_POST['submit']))
{
footerPreview();
rawHead();
rawBody();
rawCSS();
}
?>
Что Я пытаюсь достичь, когда я нажимаю на отправку, сценарий должен быть загружен на одну страницу без перехода на новую страницу или обновления, но все равно быть отправлен.
Я попытался это, но это не путь:
<script>
$.ajax({
url: 'script.php',
data: {
},
type: 'post',
success: function(output) {
}
});
</script>
Редактировать
Вот мой новый код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:200" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="resources/style.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Footer Generator</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
</ul>
</div>
</nav>
<!-- Customize your footer and submit -->
<div id="container">
<form id="formFooter" action="" method="post">
<h3>Select your trademark</h3>
<select class="form-control" name="trademark">
<option></option>
<option>©</option>
<option>™</option>
<option>®</option>
</select>
<h3>Your company name</h3>
<input class="form-control" type="text" name="companyName" placeholder="Your company name" />
<h3>Background Color</h3>
<input class="form-control" placeholder="(e.g. 00ff00)" type="text" name="backgroundColor">
<h3>Font Color</h3>
<input class="form-control" placeholder="(e.g. 00ff00)" type="text" name="fontColor">
<h3>Opacity</h3>
<input class="form-control" placeholder="(Pick a value between 0 and 1 e.g. 0.3)" type="text" name="opacity">
<br/>
<br/>
<button class="form-control" id="run" type="submit" name="submit">Generate footer</button>
</form>
<script type="text/javascript">
$('#run').on("click", function (e) {
var formData = new FormData($('#myForm')[0]);
$.ajax({
url: "script.php",
type: 'POST',
data: formData,
success: function (data) {
$('#showData').html(data);
},
cache: false,
contentType: false,
processData: false
});
return false;
});
</script>
<div id="showData"> </div>
</div>
<div id="footer_date"> © 2016 Footer Generator </div>
</body>
</html>
я добавлено все это, но форма не отправляется. Я проверил консоль и теперь вижу это сообщение: Синхронный XMLHttpRequest в основном потоке устарел из-за его пагубных последствий для конечного пользователя. Для получения дополнительной справки проверьте https://xhr.spec.whatwg.org/. – Kevin
Удалите асинхронный: false, раздел из JS и проверьте – user3099298
Ошибка исчезла, но кнопка ничего не генерирует – Kevin