Hello i have a form like this:
<tr><td>First Name:</td><td><input data-check="f_n" type="text" name="first_name" /></td>
<td data-msg="f_n"></td></tr>
<tr><td>Last Name:</td><td><input data-check="l_n" type="text" name="last_name" /></td>
<td data-msg="l_n"></td></tr>
now i did a jquery $.post to connect to php to desplay a error in case is needed, so far i have this:
<script type="text/javascript">
$(document).ready(function(){
$('[data-check]').click(function(){
var a = $(this).data('check');
$.post('website/register/checks.php',, function(data){
$('[data-msg='+ a +']').html(data);
});
});
});
</script>
I'm really confuse, on how to send the correct data according to the users input.. and show it in the correct <td></td>
You need to set the post data as the second parameter of $.post
$(document).ready(function(){
$('[data-check]').click(function(){
var a = $(this).data('check'), post_data = {};
post_data[a] = $(this).val();
$.post('website/register/checks.php', post_data, function(data){
$('[data-msg='+ a +']').html(data);
});
});
});
I think this should be like this:
$(document).ready(function(){
$('[data-check]').click(function(){
var a = $(this).data('check');
$.post('website/register/checks.php',{data:a}, function(data){ //<--typo here ', ,'
$('[data-msg="'+ a +'"]').html(data);
});
});
});
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>
My form
<div class="replymsg">
<form class="mainform" action="reply.php" method="POST">
<textarea class="replytext" ></textarea>
<button data-value="<?php echo $id; ?>"
class="replybutton">Submit</button>
</form>
</div>
$id comes from a MYSQL database. The following "test" code gives me the id of the reply form using Jquery:
<script>
$(".replybutton").click(function(){
alert($(this).data("value"));
});
</script>
Value of commentid :id is not passed when I use "actual" code for the website as follows (reply:replytext ... sends message is working):
<script>
$(document).ready(function(){
$(".replybutton").click(function(){
var id = $(this).data("value");
var replytext = $(".replytext").val();
$.post("reply.php",{ commentid: id, reply: replytext },function(data){
$("#result").html(data);
});
});
});
</script>
Any ideas,any help is appreciated?
Most probably you should stop the form to submit if you are using ajax because a buttons default behavior is to submit the form:
<script>
$(document).ready(function(){
$(".replybutton").click(function(e){
e.preventDefault(); //<---------------stops the form submission here
var id = $(this).data("value");
var replytext = $(".replytext").val();
$.post("reply.php",{ commentid: id, reply: replytext },function(data){
$("#result").html(data);
});
});
});
</script>
or add a type to the button:
<button type='button' data-value="<?php echo $id; ?>" class="replybutton">Submit</button>
//------^^^^^^^^^^^^
another way is to use .submit() event:
<script>
$(document).ready(function(){
$(".mainform").submit(function(e){ //<-----pass the event here
e.preventDefault(); //<---------------still you need this
var id = $(this).find('.replybutton').data("value"); // find the elements
var replytext = $(this).find(".replytext").val(); // and here.
$.post("reply.php",{ commentid: id, reply: replytext },function(data){
$("#result").html(data);
});
});
});
</script>
and in this case you don't need to have a type to your button, but it's good to have it.
Submitting form with AJAX
In form
<div class="replymsg">
<form class="mainform" action="" method=" ">
<textarea class="replytext" ></textarea>
<input type="text" value="<?php echo $id; ?>" name="comment_id" id="comment_id" style="display: none"> <!-- this contain the ID-->
<input type="submit" class="replybutton" id="replybutton" value="Submit">
</form>
</div>
use AJAX
<script>
$(function(){
$( "#replybutton" ).click(function(event)
{
event.preventDefault();
var comment_id = $("#comment_id").val();
var replytext = $(".replytext").val();
$.ajax(
{
type:"post",
url: "./reply.php",
data:{ id:comment_id, reply:replytext,},
success:function($data)
{
$("#result").html(data);
}
});
});
});
</script>
$(document).ready(function(){
$(".replybutton").click(function(e){
e.preventDefault();
var id = $(this).data("value");
var replytext = $(this).prev().val();
$.post("reply.php",{ commentid: id, reply: replytext
},function(data){
$("#result").html(data);
});
});
});
Thanks for the help,I figured it out,my problem was sending Id and replytext in a comment/reply system when clicking replybutton. Working code above.
i am taking the input from user and than showing the data and a button for confirmation after clicking the confirm button the data will be post to a php file but the data is in array i am handling that data with for each loop but it is giving me an error that invalid arguments supplied to for each loop i don't know why it is giving me an error.
here is html and ajax code.
<html>
<head><title>my jquery</title>
<script src="jquery-2.1.0.min.js"></script>
</head>
<body>
<button id="button">clickme</button>
Id:<input type="text" id="id" >
Name:<input type="text" id="name">
Message:<input type="text" id="message" >
Destination:<input type="text" id="destination" >
<button id="confirm" name="confirm">Confirm</button>
<div id="d">
<table id="t">
<tr>
<td>ID</td>
<td>Name</td>
<td>Message</td>
<td>Destination</td>
</tr>
</table>
</div>
<script type="text/javascript">
var arr = new Array();
$("#button").click(function(){
var id=$("#id").val();
var name=$("#name").val();
var message=$("#message").val();
var destination=$("#destination").val();
arr.push({id:id, name:name, msg:message, dest:destination});
for (var i=0; i<arr.length; i++){
//alert(arr.length);
var row="<tr><td>"+ arr[i].id +"</td><td>"+ arr[i].name +"</td><td>"+ arr[i].msg +"</td><td>"+ arr[i].dest +"</td></tr>";
}
$("#t").append(row);
});
$("#confirm").click(function(){
$.ajax({
type:"POST",
url:"ajax.php",
data:"data="+JSON.stringify(arr),
success: function(data){
alert(data);
}
});
});
</script>
</body>
And the php code is here.
please someone tell me why the for each loop is not working.
<?php
if(isset($_POST['data'])){
$yourdata = $_POST['data'];
foreach($yourdata as $data){
echo $data['id'];
}
var_dump($yourdata);
$yourdatas = json_decode($yourdata);
print_r($yourdata);
}
?>
Try this
data:{'data':JSON.stringify(arr)}
and in your php
$data=json_decode(filter_input(INPUT_POST, "data"));
I hope this helps you.
Try this,
data: {'yourdata':JSON.stringify(arr)},
instead of
data:"data="+arr,
in your php page,
<?php
$yourdata = $_POST['yourdata'];
$yourdatas = json_decode($yourdata);
var_dump($yourdatas);
?>
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 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.