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
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
I have many forms on a page. I want to submit each form without reloading page. I tried many methods but could not do. I have a form similar to this. I tried using ajax as well but could't do. Please help me. Now, I'm unable to insert in database also.
<form id="a" onsubmit="return func();">
<input type="text" name="fname">
<input type="text" name="lname">
<input type="text" name="email">
<input type="submit">
</form>
Jquery
function func(){
$.ajax({
url:'registration_detail.php?id=' +reg_id,// in this you got serialize form data via post request
type : 'POST',
data : $('#a').serialize(),
success: function(response){
console.log(response);
}
});
return false;
}
Don't use " action " attribute not even with " # "
And if using AJAX, use " Return False "
$.ajax({
url : "example.php",
type : 'POST',
data : $(this).serialize();
success: function(result){
}
});
return false;
Make sure you are having a unique id for all the forms
remove action="#" and onsubmit="" from the form as you are handling the submit event in jquery
function func(id){
alert($('#'+id).serialize())
$.ajax({
url:'registration_detail.php',// in this you got serialize form data via post request
type : 'POST',
data : $('#'+id).serialize(),
success: function(response){
console.log(response);
}
});
return false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="a" onsubmit="return func('a');">
<input type="text" name="fname">
<input type="text" name="lname">
<input type="text" name="email">
<input type="submit">
</form>
<form id="b" onsubmit="return func('b');">
<input type="text" name="fname">
<input type="text" name="lname">
<input type="text" name="email">
<input type="submit">
</form>
<form id="c" onsubmit="return func('c');">
<input type="text" name="fname">
<input type="text" name="lname">
<input type="text" name="email">
<input type="submit">
</form>
id="a" should be unique for all the forms
in your code new variable reg_id will give undefined variable error, that might be the cause to reload the page.
Use below code :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<form onsubmit="return func();">
<input type="text" name="fname">
<input type="text" name="lname">
<input type="text" name="email">
<input type="submit">
</form>
</body>
<script>
function func(){
$.ajax({
url : "example.php", // in this you got serialize form data via post request
type : 'POST',
data : $('form').serialize(),
success: function(response){
console.log(response);
}
});
return false;
}
</script>
</html>
I'm pretty sure that you want that GET url to be POST as well. Obviously the code below won't work on this site here, but it shows concept of proper AJAX post.
//<![CDATA[
/* js/external.js */
$(function(){
var regId = 'someId';
$('#form').submit(function(e){
$.post('registration_detail.php', 'id='+encodeURIComponent(regId)+'&'+$(this).serialize(), function(jsonObjResp){
console.log(jsonObjResp);
}, 'json');
e.preventDefault();
});
}); // load end
//]]>
/* css/external.css */
*{
box-sizing:border-box; padding:0; margin:0;
}
html,body{
width:100%; height:100%;
}
body{
background:#ccc;
}
#content{
padding:7px;
}
label{
display:inline-block; width:80px; padding-right:4px; text-align:right;
}
input[type=text]{
width:calc(100% - 80px);
}
input{
padding:5px 7px;
}
input[type=submit]{
display:block; margin:0 auto;
}
#form>*{
margin-bottom:5px;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
<title>Test Template</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script type='text/javascript' src='js/external.js'></script>
</head>
<body>
<div id='content'>
<form id='form'>
<label for='fname'>First Name</label><input type='text' id='fname' value='' />
<label for='lname'>Last Name</label><input type='text' id='lname' value='' />
<label for='email'>Email</label><input type='text' id='email' value='' />
<input type='submit' id='submit' value='submit' />
</form>
</div>
</body>
</html>
$(document).ready(function(){
$("form").on("submit", function(){
var form_id = $(this).attr("id");
$.ajax({
url : "example.php",
type : 'POST',
data : $("#"+form_id).serialize(),
success: function(result){
}
});
return false;
})
})
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/
I am unable to load external file while using AJAX jQuery. I want to use jQuery AJAX to pop up form then validate, enter data in MySQL. but starting from a simple AJAX function. Kindly let me know where I am going wrong
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="test_style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("#ajax-contact-form").submit(function(){
var str = $(this).serialize();
$.ajax({
type: "POST",
url:"contact.php",
data: str,
success:function(result) {
$("#div1").html(result);
}
});
});
});
</script>
</head>
<body>
<div id="contact_form">
<form id="ajax-contact-form" name="contact" action="">
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input"/>
<label class="error" for="name" id="name_error">This field is required.</label>
<input class="button" type="submit" name="submit" value="Send Message">
</fieldset>
</form>
</div>
</body>
</html>
and contact.php file is
<?php
echo "Hello";
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="test_style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$(".button").click(function() {
$.ajax({url:"contact.php",success:function(result){
$("#div1").html(result);
}});
return false;
});
});
</script>
</head>
<body>
<div id="contact_form">
<form name="contact" action="">
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
<label class="error" for="name" id="name_error">This field is required.</label>
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</fieldset>
</form>
</div>
<div id="div1">
</div>
</body>
</html>
Try that:
What needed to be fixed:
1) You'd duplicated the onReady function,
2) you can use a submit form button, but since it's default action is to submit the form, the result wouldn't have been visible.
3) There was no #div1 for the result to be displayed in.
Hopefully, this has been helpful... Happy Coding!
Try with type button type
<input type="button" name="submit" class="button" id="submit_btn" value="Send" />
And also your both scripts are same use either DOM ready or $(function) like
<script>
$(document).ready(function(){
$(".button").click(function(){
$.ajax({url:"contact.php",success:function(result){
$("#div1").html(result);
}});
});
});
</script>
button is your class name so that it will represented like .button And create an div with id div1 at your html page
$("#div1").html(result);
Use one div which id is div1 inside your page which you want to show the result.
<div id="div1"></div>
So I doing simple edit/delete/new for mysql DB update.I am using ajax as I need it to in a single page.
So when I check New button, a new form shows up(from ajax call to php file). I get html form. I am trying to validate this.
But I am not able. Code seems right. My code here
trail.php
<?php include( 'connect.php'); ?>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>
<script>
$(document).ready(function() {
$("#form1").validate({
debug: false,
rules: {
plid: "required",
},
messages: {
plid: "Please select a pack list id..",
},
submitHandler: function(form) {
$.ajax({
type: "POST",
url: "aa.php",
data: $('#form1').serialize(),
cache: false,
success: function(response) {
$('#result1').html(response);
}
});
}
});
});
</script>
</head>
<body>
<div id="result1"></div>Packing List</br>
<form id="form1" name="form1" action="" method="post">
<?php echo '<select name="plid" id="plid">'; echo '<option value="" selected="selected">--Select the Pack List Id--</option>'; $tempholder=a rray(); $sql="SELECT `pl_id`
FROM (
SELECT `pl_id`
FROM packlist
ORDER BY `pl_id` DESC
LIMIT 30
) AS t" ; $query=m ysql_query($sql) or die(mysql_error()); $nr=m ysql_num_rows($query); for ($i=0; $i<$nr; $i++){ $r=m ysql_fetch_array($query); if (!in_array($r[ 'pl_id'], $tempholder)){ $tempholder[$i]=$ r[ 'pl_id']; echo "<option>".$r[ "pl_id"]. "</option>"; } } echo '</select>'; ?>
<br/>
<input type="submit" name="new" id="new" value="New" />
<br/>
<input type="submit" name="delete" value="Delete" />
<br/>
<input type="submit" name="edit" id="edit" value="Edit" />
<br/>
</form>
</body>
And my ajax called php file
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>
<script>
$(document).ready(function() {
$("#form2").validate({
debug: false,
rules: {
plidnew: "required",
},
messages: {
plidnew: "Please select a pack list id..",
}
});
});
</script>
</head>
<body>
<?php $a=isset($_POST[ 'plid']) && $_POST[ 'plid']; $b=isset($_POST[ 'new']) && $_POST[ 'new']; if($a&&$b) { ?>
<form name="form2" id="form2" method="post" action="">
<P>
<LABEL for="plidnew">PackList No
<INPUT type="text" id="plidnew">
</LABEL>
<BR>
<BR>
<LABEL for="itemidnew">Item Id
<INPUT type="text" id="itemidnew">
</LABEL>
<BR>
<BR>
<LABEL for="quannew">Quantity
<INPUT type="text" id="quannew">
</LABEL>
<BR>
<BR>
<LABEL for="potnew">Potency
<INPUT type="text" id="potnew">
</LABEL>
<BR>
<BR>
<LABEL for="sizenew">Size
<INPUT type="text" id="sizenew">
</LABEL>
<BR>
<BR>
<INPUT type="submit" id="newsubmit" name="newsubmit" value="Submit">
<INPUT type="reset">
</P>
</form>
<?php }
$c=isset($_POST[ 'plid']) && $_POST[ 'plid'];
$d=isset($_POST[ 'delete']) && $_POST[ 'delete'];
if($c&&$d) {
echo "delete!!";
}
$e=isset($_POST[ 'plid']) && $_POST[ 'plid'];
$f=isset($_POST[ 'edit']) && $_POST[ 'edit'];
if($e&&$f) {
?>
<form name="form3" id="form3" method="post" action="aa.php">
<P>
<LABEL for="plidedit">PackList No
<INPUT type="text" id="plidedit">
</LABEL>
<BR>
<BR>
<LABEL for="itemidedit">Item Id
<INPUT type="text" id="itemidedit">
</LABEL>
<BR>
<BR>
<LABEL for="quanedit">Quantity
<INPUT type="text" id="quanedit">
</LABEL>
<BR>
<BR>
<LABEL for="potedit">Potency
<INPUT type="text" id="potedit">
</LABEL>
<BR>
<BR>
<LABEL for="sizeedit">Size
<INPUT type="text" id="sizeedit">
</LABEL>
<BR>
<BR>
<INPUT type="submit" id="editsubmit" name="editsubmit" value="Submit">
<INPUT type="reset">
</P>
</form>
<?php } ?>
</body>
I had doubts about validating the form. I tried the validation codes in both page.
But no ajax effect as shown in firebug. Any help appreciated..Thanks a lot..
while using ajax with type "post", you should be careful in passing data
data and data1 are the parameter of the webmethod or service. Try this
var d1="asd";
$.ajax({
type: "POST",
url: "aa.php",
data: "{data:'"+d1+"',data1:'"+d2+"'}",
cache: false,
success: function(response) {
$('#result1').html(response);
}
});