I have been trying to submit a form with jquery ajax but have been having issues.
When i check through firebug i see the value posted but it shows error from the url. I have this html
<form method="post" name="tForm" id="tForm">
<table>
<tr>
<td>Age</td>
<td><input name="age" id="age" value="" /></td>
</tr>
<tr>
<td><input type="button" id="submit" value="submit"/></td>
</tr>
</table>
</form>
</body>
My js file that submits the form has this piece of code
$(document).ready(function() {
$('#tForm').submit(function(){
var age = $('#age').val();
var msg ='';
$.ajax({
url:'testp.php',
type:'post',
data: {age:age},
beforeSend:function(){
alert(age);
},
success:function(data){
msg=data;
alert(msg);
},
complete:function(){
alert(msg);
}
})
})
});
My testp.php file just has this
<?php
echo 'ok';
?>
You need to stop the event from propogating. Your form attempts to submit in the standard method and since your form doesn't have an action you receive the error.
$(document).ready(function() {
$('#tForm').submit(function(){
var age = $('#age').val();
var msg ='';
$.ajax({
url:'testp.php',
type:'post',
data: {age:age},
beforeSend:function(){
alert(age);
},
success:function(data){
msg=data;
alert(msg);
},
complete:function(){
alert(msg);
}
})
return false;
})
});
Use $('#tForm').submit(function(e){ ... and then call e.preventDefault(); to prevent the form from being submitted in a regular (non-ajax) request.
However, I'd suggest you to have a look at the jQuery form plugin which saves you some work.
Related
the problem is that i am unable to insert data in my database without reloading
i have tested it without the note_sql.js and my note_sql.php works fine but there seems to be a problem in my js file if some body could point me in the right direction it would be wonderful
Index.php
<form id="noteform" action="note_sql.php" method="POST">
<input type="text" name="note"></input>
<input id="sub" type="submit" value="Save Note" />
</form>
<span id="result_note"><span>
<script type ="text/javascript" src="jquery/note_sql.js"></script>
note_sql.js
$("#sub").click(function(){
var data = $("#noteform: input").serializeArray();
$.post($("#noteform").attr("action"),data,function(info){$("result_note").html(info); });
clearInput();
});
$("#noteform").submit(function(){
return false;
});
function clearInput(){
$("#noteform :input").each(function(){
$(this).val('');
});
}
Use Jquery Ajax the working code is given below :
please add ID to Note Form Element :
<pre>
<script>
$(document).ready(function () {
$("#sub").click(function () {
var name = $("#note").val();
var message = $("#message").val();
$.ajax({
type: "post",
url: "note_sql.php",
data: "name=" + name,
success: function (data) {
alert(data);
}
});
});
});
</script>
</pre>
I'm trying to use ajax within my submit form in a codeigniter. I have it to where the ajax call is made, bu the validation errors are not displaying. I can't figure out why. Please help.
I do have some returns in there, but they do nothing.
if ($this->form_validation->run() == FALSE)
{
echo(json_encode("validate"=>FALSE));
}
else
{
$this->load->model('adduser_model');
$data['query']=$this->adduser_model->adduser();
}
}
view code:
<script>
//CHECKS ONE FIELD AT A TIME
$(function(){
$(".field").each(function(){
$(this).keyup(function(){
var id = $(this).attr("id"); //VALUE OF INPUT ID Ex: <input id="name">
var v = $(this).val(); //INPUT TEXT VALUE
var data = id+"="+v; //DATA TO GO TO THE AJAX FILE Ex:(name=wcet)
$.ajax({
type: "POST",
url: "prog/validate", //AJAX FILE
data: data+"&single=true",
success: function(e){ //"e" IS THE DATA FROM "validate.php"
$("span#"+id).html(e); //ECHOS DATA FROM "validate.php" NEXT TO THE INPUT IF NEEDED
}
});
});
});
});
</script>
<BODY>
<?php $this->load->helper('form');
echo form_open('prog/validate'); ?>
<tr><td align="right">Name: </td><td align="left"><input class="field" name="name" id="name"> <span id="name"></span><br></td></tr>
<tr><td align="right">email: </td><td align="left"><input class="field" name="email" id="email"> <span id="email"></span><br></td></tr>
If you have some returns that means the function was successful. Even if you didn't have the response you expected, the $this->form_validation->run() will be false ONLY if the $ajax call couldn't fire at all (404, 500 errors).
You can also trying catching the error via failure: function () {}, for example:
$.ajax({
type: "POST",
url: "prog/validate", //AJAX FILE
data: data+"&single=true",
success: function(e){ //"e" IS THE DATA FROM "validate.php"
$("span#"+id).html(e);
},
failure: function(e) {
// check against error messages
}
});
I'm trying to send an input value to a php script and have the returned value posted to a div, using ajax, but I can't seem to get this right. Any help/suggestions would be appreciated. Thanks!!
This is what I have by now, but console says: "Failed to load resource: the server responded with a status of 404 (Not Found)".
test1.php:
<script>
$.ajax({
type: 'POST',
url: 'test2.php',
data: {url: $('#id1').val()},
success: function (data)
{
$(document).ready(function(){$("#content").load("test2.php");});
}
});
</script>
<form name="input">
<input type="text" id="id1">
<input type="submit">
</form>
<div id="content"></div>
test2.php:
<?php
$string=$_POST['id1'];
require_once('connect.php');
$inf = "SELECT * FROM `comments` WHERE date='$string'";
$info = mysql_query($inf);
while($info2 = mysql_fetch_object($info)) {echo $info2->username.$info2->date;}
?>
<script>
$(document).ready(function() {
$('#submit').click(function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: 'test2.php',
data: {id1: $('#id1').val()},
success: function(data)
{
$("#content").html(data);
}
});
});
});
</script>
<form name="input">
<input type="text" id="id1">
<input type="submit" id="submit">
</form>
<div id="content"></div>
When you submit the ajax request, you're already submitting your content to test2.php, so you don't need to load it again. In the success function, you can append the result to the div from the callback.
$(document).on('click','#submit',function(e) {
e.preventDefault();
$.post('test2.php',{url: $('#id1').val()},function(data){
$("#content").html(data);
}
});
});
404 (Not Found) Error is for page not found. Please make sure that file test2.php is exist in same folder. Check url.
Also you can copy the URL from console and paste it in the browser URL to check the url correct or incorrect.
jQuery
<script>
$(document).ready(function() {
$('#submit').click(function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: 'test2.php',
data: {id1: $('#id1').val()},
success: function(data)
{
$("#content").html(data);
}
});
});
});
</script>
HTML
<form name="input">
<input type="text" id="id1">
<input type="submit" id="submit">
</form>
You could try this:
<script>
$('#submitBtn').on('click',function(){
$.ajax({
type: 'POST',
url: 'test2.php',
data: {url: $('#id1').val()},
success: function (data)
{
$("#content").html(data);
}
});
return false;
});
</script>
<form name="input">
<input type="text" id="id1">
<input id="submitBtn" type="submit">
</form>
<div id="content"></div>
I have a php file(index.php) with two fields when i post that form, in javascript i am doing form data serialize and send it to next php page(results.php) through ajax. When i try to print the data inside success it is not printing. FInd the below code.
<html>
<head>
<title></title>
<script src="../scripts/jquery-1.9.1.js"></script>
</head>
<body>
<form method="post" name="index" id="indexform">
<table border="1">
<tr>
<td>Name:</td>
<td><input type="text" name="fname"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="sendData"></td>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
$( "#indexform" ).on( "submit", function( event ) {
event.preventDefault();
console.log( $(this).serialize() );
var formdata = $(this).serialize();
// alert(formdata);
$.ajax({
type:"POST",
url:"result.php",
dataType:'json',
data:formdata,
success: function(data){
alert(data);
}
});
});
</script>
In the above i cant print the data inside the success callback.
Try this
<script type="text/javascript">
$( "#indexform" ).on( "submit", function( event ) {
event.preventDefault();
console.log( $(this).serialize() );
var formdata = $(this).serialize();
$.ajax({
type:"POST",
url:"result.php",
data:formdata,
success: function(html){
alert(html);
}
});
});
</script>
In your result.php page
$name=$_REQUEST['fname'];
$email=$_REQUEST['email'];
echo $name." ".$email;
You are setting the dataType to json so you must ensure that you only return valid json.
That means you cannot echo or print whatever you want; you should collect your data in an array or object and then only once output that like:
echo json_encode($your_data);
Echo the content inside results.php page.
Ex:
echo "two fields $first_field , $second_field successfully inserted. " ;
This content results as an ajax response and stores in the data variable .
Hello My Friends your html code is in
<script type="text/javascript">
$( "#indexform" ).on( "submit", function( event ) {
event.preventDefault();
console.log( $(this).serialize() );
var formdata = $(this).serialize();
// alert(formdata);
$.ajax({
type:"POST",
url:"result.php",
dataType:'json',
data:formdata,
success: function(data){
alert(data);
}
});
});
</script>
and you result.php file code is in
<?php
include 'db.php';
$name=$_REQUEST['fname'];
$email=$_REQUEST['email'];
echo $name." ".$email;
?>
now the result.php file is return the entered name and email address.
I have this code for send simple data using jquery , but no works , all time reload de page and no load contents i send by post
My code it´s this :
<script>
$(document).ready(function() {
$("#form_order").submit( function () {
$.ajax({
type: "POST",
data : $(this).serialize(),
cache: false,
url: "indexer_adm.php?send_order2=ok",
success: function(data){
$("#load_order").html(data);
}
});
return false;
});
</script>
<form name="forma" id="form_order" method="post" action="">
<table width="100%" border="1">
<tr>
<td height="30" align="center" valign="middle">
<select name="select_order">
<option value="articles">Articles</option>
<option value="blogs">Blogs</option>
<option value="products">Products</option>
</select>
<input type="submit" name="Submit" value="Acceder">
<input type="hidden" name="send_order2" value="ok">
<input type="hidden" name="action_load" value="<?php echo $_REQUEST['action_load'];?>">
</td>
</tr>
<tr>
<td height="30" align="center" valign="middle"> </td>
</tr>
</table>
</form>
<div id="load_order"></div>
In the div called load_order , it must load the result of this send by post from the form , but the page reload and no works , i see the code many times but i don´t understand what happen
Thank´s for All
There is a syntax error in your code, you haven't closed the submit handler.
$(document).ready(function() {
$("#form_order").submit( function () {
$.ajax({
type: "POST",
data : $(this).serialize(),
cache: false,
url: "indexer_adm.php?send_order2=ok",
success: function(data){
$("#load_order").html(data);
}
});
return false;
}); // <---
});
Try returning false inside of the submit block, rather than of the ready block.
You may have a syntax error since return false should stop the form from refreshing. I would use the post function instead:
<script>
$(function() {
$("#form_order").submit( function () {
$.post('indexer_adm.php?send_order2=ok', $(this).serialize(), function(data) {
$("#load_order").html(data);
});
return false;
});
</script>
Ok !!! , Thank´s everybody
The Right code :
<script>
$(document).ready(function() {
/*
$("#load_order").show(1000);
$("#load_order").load("<?php print "".$ruta_path_adm."".$ruta_modulos."/mod_order/indexer_adm.php?send_order2=ok";?>");
*/
$("#form_order").submit( function () {
$.ajax({
type: "POST",
data : $(this).serialize(),
cache: false,
url: "<?php print "".$ruta_path_adm."".$ruta_modulos."/mod_order/indexer_adm.php?send_order2=ok";?>",
success: function(data){
$("#load_order").html(data);
}
});
return false;
});
});
</script>
Thank´s for the help i put bad the script and no see this , thank´s