i want to transfer data from one page to another. I got 2pages: hostSettings.php and test.php
ok, here s my test.php it includes a submit-button and the ajax/jquery-script
<html>
<head>
<link href="CSS/style.css" type="text/css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#button').on('submit', function(e) {
e.preventDefault();
var test = "Hallo Welt!";
$.ajax({
url: "hostSettings.php",
type: "POST",
data: { test : test },
success: function (response) {
console.log("data transmitted: " + response);
},
error: function(jqXHR, textStatus, errorThrown) {
alert("Es ist ein Fehler aufgetreten!
" + textStatus + "
" + errorThrown);
console.log(textStatus, errorThrown);
}
});
});
});
</script>
</head>
<body>
<font size="4">Test-Site</font>
<hr>
<?php include ("menu.html");?><br><br>
<form method="POST" action="hostSettings.php">
<input id="button" value="TEST" type="submit">
</form>
</body>
</html>
hostSettings.php:
<html>
<head>
<link href="CSS/style.css" type="text/css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
</head>
<body>
<font size="4">Hosts speichern</font><hr>
<?php include ("menu.html");?><br><br>
<br><br><br>
<p><center>
<h3>Diese Seite befindet sich momentan im Aufbau..</h3>
<form action="index.php">
<input type="submit" value="Zurück zum Index">
</form>
</p></center>
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' ){
if(isset($_POST["test"])) {
echo $_POST["test"];
}
}
?>
</body>
</html>
why doesnt it transfer the data from test.php to hostSettings.php :(
submit event is not designed for submit buttons.
You need to fire it on forms.
Either you fire event of submit of form or on click of button.
Change this:
$('#button').on('submit', function(e) {
To:
$('#button').on('click', function(e) {
And
<input type="submit" value="Zurück zum Index">
To:
<input type="button" value="Zurück zum Index">
you are doing an on submit on a button the on submit should be on the form. put an id to the form and tyr you same code and as Fred said use the button tag instead. You can also try the on('click') if you wish to use the button, and it will look much simpler too.
example 1. asuming you marked form with an id
$(document).ready(function() {
$('#myForm').on('submit', function(e) {
e.preventDefault();
var test = "Hallo Welt!";
$.ajax({
url: "hostSettings.php",
type: "POST",
data: { test : test },
success: function (response) {
console.log("data transmitted: " + response);
},
error: function(jqXHR, textStatus, errorThrown) {
alert("Es ist ein Fehler aufgetreten!
" + textStatus + "
" + errorThrown);
console.log(textStatus, errorThrown);
}
});
});
});
Example 2 :
$(document).ready(function() {
$('#button').on('click', function(e) {
e.preventDefault();
var test = "Hallo Welt!";
$.ajax({
url: "hostSettings.php",
type: "POST",
data: { test : test },
success: function (response) {
console.log("data transmitted: " + response);
},
error: function(jqXHR, textStatus, errorThrown) {
alert("Es ist ein Fehler aufgetreten!
" + textStatus + "
" + errorThrown);
console.log(textStatus, errorThrown);
}
});
});
});