Currently i have this code to test, because ajax calls for some reason i can't make it work, can anyone check what can be wrong?
test.php
<html>
<body>
<form id="myform">
<input type="text" id="fname">
<input type="text" id="lname">
<input type="submit" id="data-send-button" value="Send Data">
</form>
<div id="responce-box"> </div>
<script>
$(document).ready(function() {
$("#myform").submit(function(e) {
e.preventDefault();
$.ajax({
type : "POST",
url : "submit.php",
data : $("#myform").serialize(),
beforeSend : function() {
alert("indo");
}
});
e.preventDefault();
});
});
</script>
</body>
</html>
submit.php
<?php
echo "test";
That is just for testing.
Thanks guys!
As per your example I think you don't have include jquery
try this:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<form id="myform">
<input type="text" id="fname">
<input type="text" id="lname">
<input type="submit" id="data-send-button" value="Send Data">
</form>
<div id="responce-box"> </div>
<script>
$(document).ready(function() {
$("#myform").submit(function(e) {
e.preventDefault();
$.ajax({
type : "POST",
url : "submit.php",
data : $("#myform").serialize(),
beforeSend : function() {
alert("indo");
}
});
});
});
</script>
</body>
</html>
your code is working fine but you need to include jquery library if you use jquery tag. so add this library and check your code it will be working
and tested
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<form id="myform">
<input type="text" id="fname">
<input type="text" id="lname">
<input type="submit" id="data-send-button" value="Send Data">
</form>
<div id="responce-box"></div>
<script>
$(document).ready(function () {
$("#myform").submit(function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "submit.php",
data: $("#myform").serialize(),
beforeSend: function () {
alert("indo");
}
});
e.preventDefault();
});
});
</script>
</body>
</html>
submit.php
<?php
echo "test";
?>
for more example
https://jquery.com/
Related
When I submit my HTML form, I want PHP to get the value of the input but whenever I submit my HTML form, it reloads the page. How to prevent this??
Thanks In Advance.
My Code -
<!DOCTYPE html>
<html>
<body>
<form method="post">
<input type="number" type="button" min="0" id="Q1" name="Q1"><br>
<input type="number" type="button" min="0" id="Q2" name="Q2"><br>
<input type="number" type="button" min="0" id="Q3" name="Q3">
<input type="submit" type="button" id="submit2" name="submit2">
</form>
<?php
if(isset($_POST['submit2'])){
$input1 = $_POST['Q1'];
$input2 = $_POST['Q2'];
$input3 = $_POST['Q3'];
echo $input1;
}
?>
</body>
</html>
You need ajax
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
$('form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'post.php',
data: $('form').serialize(),
success: function () {
alert('form was submitted');
}
});
});
});
</script>
</head>
<body>
<form>
<input name="time" value="00:00:00.00"><br>
<input name="date" value="0000-00-00"><br>
<input name="submit" type="submit" value="Submit">
</form>
</body>
</html>
post.php
<?php
print_r($_POST);
if ($_POST['date']) {
$date = $_POST['date'];
$time = $_POST['time'];
echo '<h1>' . $date . '---' . $time . '</h1>';
}
else {
}
?>
You should try using AJAX. With Ajax, web applications can send and retrieve data from a server asynchronously without interfering with the display and behavior of the existing page.
The exact code for your page would be something like this:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
$('form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'post.php',
data: $('form').serialize(),
success: function () {
alert('form was submitted');
}
});
});
});
</script>
</head>
<body>
<form method="post">
<input type="number" type="button" min="0" id="Q1" name="Q1"><br>
<input type="number" type="button" min="0" id="Q2" name="Q2"><br>
<input type="number" type="button" min="0" id="Q3" name="Q3">
<input type="submit" type="button" id="submit2" name="submit2">
</form>
PHP: post.php
<?php
if(isset($_POST['submit2'])){
$input1 = $_POST['Q1'];
$input2 = $_POST['Q2'];
$input3 = $_POST['Q3'];
echo $input1;
}
?>
</body>
</html>
In javascript, you could do e.preventDefault() by e is the event
Hope this helps
Live site now
I want to create a form where the user gets to add a new question that the next user will have to answer.
I want to use the function ALTER TABLE but I'm not sure how to call that in $_Post and how to dynamically $_Get more and more columns. Any advice? I stuck and would love to have someone point me into the right direction.
Also, I'm using bootstrap if that even makes a difference.
<body>
<div class="container">
<br />
<br />
<h2 align="center">Dynamically Add or Remove input fields in PHP with JQuery</h2>
<div class="form-group">
<form name="add_name" id="add_name">
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td>
<input type="text" name="question[]" placeholder="Ask a question" class="form-control" />
</td>
<td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</table>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
</div>
</div>
</body>
<script>
$(document).ready(function(){
var i=1;
$('#submit').click(function(){
$.ajax({
url:"name.php",
method:"POST",
data:$('#add_name').serialize(),
success:function(data)
{
alert(data);
$('#add_name')[0].reset();
}
});
});
});
</script>
1st: you need to use e.preventDefault(); to prevent the page reload.
2nd: good to use $('#add_name').on('submit') instead of
$('#submit').click.
3rd: your code should looks like:
<script>
$(document).ready(function(){
var i=1;
$('#add_name').on('submit' , function(e){ // <<<<<<<<<<<<<<<<<<< 2
e.preventDefault(); //<<<<<<<<<<<<<<<<<<<< 1
$.ajax({
url:"name.php",
method:"POST",
data:$(this).serialize(),
success:function(data)
{
alert(data);
$('#add_name')[0].reset();
}
});
});
});
</script>
in name.php
<?php
print_r($_POST);
// reset of php code here
?>
you also can take a look at
Retrieving serialize data in a php file called using ajax
and
jQuery AJAX form data serialize using PHP
Your js file order should be like
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="scripts/main.js"></script>
I'm trying to post data to the same page.
I can see that the post from the ajax is working correctly but the $_POST in my index.php isn't finding the post after form submission.
<form method="post" id="classic_login" action="">
<input type="text" name="user" placeholder="Username" class="classic_field" id="user_field" />
<input type="text" name="pass" placeholder="Password" class="classic_field" id="pass_field" />
<input type="submit" name="login" value="Login" class="classic_button" id="login_button" />
<input type="submit" name="register" value="Register" class="classic_button" id="register_button" />
</form>
and I've tried both print_r($_POST) and isset both don't change after submission
print_r($_POST);
if(isset($_POST['user']) && isset($_POST['pass']))
echo "works";
printing formdata after a test submission i get: user=testuser&pass=testpass
$("#classic_login").submit(function(event) {
var formdata = $(this).serialize();
event.preventDefault();
$.ajax
({
url: "",
type: 'POST',
data: formdata,
//success: function(response) { alert(response); },
error: function() { alert("fail"); }
});
});
Alternatively, you could use document.URL to make a request on the same page. Then in PHP, include an exit; after the request:
<?php
if($_SERVER['REQUEST_METHOD'] == 'POST') {
echo '<pre>';
print_r($_POST);
exit; // this is important!
}
?>
<form method="post" id="classic_login" action="">
<input type="text" name="user" placeholder="Username" class="classic_field" id="user_field" />
<input type="text" name="pass" placeholder="Password" class="classic_field" id="pass_field" />
<input type="submit" name="login" value="Login" class="classic_button" id="login_button" />
<input type="submit" name="register" value="Register" class="classic_button" id="register_button" />
</form>
<!-- this is no brainer, of course you need to load the library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$("#classic_login").submit(function(event) {
var formdata = $(this).serialize();
event.preventDefault();
$.ajax({
url: document.URL, // you can use this
type: 'POST',
data: formdata,
success: function(response) {
alert(response);
}
});
});
</script>
Sample Output
I'm quite new to jquery but can't get the following to work properly. I can submit my form only once, after that i can't submit it a second time.
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#register').submit(function() {
$.ajax({
data: $(this).serialize(),
type: $(this).attr('method'),
url: $(this).attr('action'),
success: function(response) {
$('#regrespons').html(response);
$("#regrespons").css("visibility", "visible");
$("#regrespons").fadeOut(1000);
}
});
return false;
});
});
</script>
<form id="register" action="includes/register.php" method="post" autocomplete="off">
<input class="inp" name="gebr`enter code here`" type="text" />
<input class="inp" name="ww1" type="password" />
<input class="inp" name="ww2" type="password" />
<input class="inp" name="mail" type="text" />
<input class="but" type="submit" value="Registreren" />
</form>
Any help is apriciated!
Change $("#register").submit(function () { to $(document).on('submit', '#register', function () {
I am trying to post some form data to self with no success.My code is as follows
<html>
<title>Post to self</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$('.x-button').live("click", function () {
$.ajax({
type: "POST",
url: "self.php",
data: $(".aj").serialize(),
success: function (data) {
alert("Data Loaded:");
}
});
});
});
</script>
</head>
<body>
<?php
if(isset($_POST['submit']))
{
echo $_POST['firstname'];
}
?>
<form name="input" action="" class="aj" method="post">
<article>
<label>Firstname</label>
<input type="text" name="firstname" value="Ed" class="x-input"
/>
</article>
<article>
<label>Lastname</label>
<input type="text" name="lastname" value="Doe" class="x-input"
/>
</article>
<article>
<label>City</label>
<input type="text" name="city" value="London" class="x-input"
/>
</article>
<input type="submit" value="Update Options" class="x-button" />
</form>
</body>
</html>
When using <form name="test" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post"> in plain php and html it works but i can't get it to work with jquery.
you are mixing two approch altogether.
<form id="myform" action="" >
.....
</form>
To send ajax request to the same page you can keep url parameter empty/removed
TRY
<script type="text/javascript">
$(document).ready(function () {
$('.x-button').live("click", function () {
$.post({
data: $('form#myform').serialize(),
success: function (data) {
alert("Data Loaded:");
}
});
});
});
</script>
Of course you do not want to include the whole page to the response text so you need a statement if ajax is requested
<?php
/* AJAX check */
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
if(isset($_POST))
{
print_r($_POST);
}
}else{
?>
<html>
<title>Post to self</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$('.x-button').live("click", function () {
$.ajax({
type: "POST",
url: "self.php",
data: $(".aj").serialize(),
success: function (data) {
alert("Data Loaded:");
}
});
});
});
</script>
</head>
<body>
<form name="input" action="" class="aj" method="post">
<article>
<label>Firstname</label>
<input type="text" name="firstname" value="Ed" class="x-input"
/>
</article>
<article>
<label>Lastname</label>
<input type="text" name="lastname" value="Doe" class="x-input"
/>
</article>
<article>
<label>City</label>
<input type="text" name="city" value="London" class="x-input"
/>
</article>
<input type="submit" value="Update Options" class="x-button" />
</form>
</body>
</html>
<?php }?>
add return false; at the end of the inline javascript function to avoid the form gets submitted the "normal" way