I'm still very new to ajax and jquery, so sorry for the title, I didn't know how to phrase my question.
I'm having a problem with my URL string send: I have a Form set up which allows users to enter currency details as seen below, once the submit button has be pressed i want the data to be sent to a PHP file while having the page not redirect and putting what was sent in the text area below as XML.
I have the JQuery sending the string(to much data i dont want the operation or the textarea to be sent), but the PHP file is not doing anything with the data
Here's my code and my screenshots:
The Form:
<form name="myform" id="myform" method="get">
<input type="radio" name="operation" value="1" id="Post"
onclick="displayFunctionPost()"> Post
<input type="radio" name="operation" value="2" id="Put"
onclick="displayFunctionPut()"> Put
<input type="radio" name="operation" value="3" id="Delete"
onclick="displayFunctionDelete()"> Delete
<br>
Currency Code:
<br>
<input type="text" name="currencycode" id="currencycode"
placeholder="Code" disabled>
<!--currency form-->
<br>
Currency Name
<br>
<input type="text" name= "currencyname" id="currencyname"
placeholder="name" disabled>
<br>
<!---rates form--->
Rate(£=1):
<br>
<input type="number" name="rate" id="rate" placeholder="rate" disabled>
<!---countries form-->
<br>
Countries (comma separated if 1+)
<br>
<input type="text" name= "countries" id="countries" placeholder="countries" disabled>
<br>
<!---xml response--->
<br>
Response Message:
<br>
<div id="textarea"><textarea id="textarea" cols="70" rows="5"></textarea>
</div>
<input type="Submit" name="Submit" id="Submit" value="Submit" >
</form>
And here is the JQuery I have so far:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#Submit").click(function(e){
e.preventDefault()
var data = "¤cyname="+currencyname+"¤cycode="+currencycode+"&rate="+rate+"&countries=";
var data = $('#myform').serialize();
$.ajax({
type: 'get',
cache: false,
url: 'currPut.php',
data: data,
processData: false,
contentType: false,
success: function( data ) {
alert('test ');
}
});
});
});
</script>
And here's the PHP file:
<?php
#date_default_timezone_set("GMT");
$xml=new DomDocument("1.0","UTF-8");
$xml->formatOutput=true;
$xml->preserveWhiteSpace=false;
$xml->load('rates.xml');
if(!$xml)
{
$currencies=$xml->createElement("currencies");
$xml->appendChild($currencies);
}
else
{
$currencies=$xml->firstChild;
}
if (isset($_GET['Submit']))
{
$curcode = $_GET['currency-code'];
$newrate = $_GET['rate'];
$cname = $_GET['currency-name'];
$countries = $_GET['countries'];
$today = date("F j,g:i a");
$curr=$xml->createElement("currency");
$currencies->appendChild($curr);
$currate=$xml->createElement("code",$curcode);
$curr->appendChild($currate);
$currate->setAttribute("rate",$newrate);
$name=$xml->createElement("cname",$cname);
$curr->appendChild($name);
$places=$xml->createElement("cntry",$countries);
$curr->appendChild($places);
$xml->save('rates.xml');
}
?>
This is the form.
And this is the console.
I have create a form where I have define ckeditor which is work perfectly. Here I want to submit form value through jQuery but when I click on submit button it does't get ckeditor value on single click where other text field took its value on same click why ckeditor does't ? So, How can I fix this problem? Please help me.
code:
<script>
$(document).ready(function(){
$("#submit").click(function(){
category = $("#category").val();
temp_name = $("#temp_name").val();
template_text = $("#template_text").val();
$.ajax({
type:"POST",
data:{"admin_id":admin_id, "category":category, "temp_name":temp_name, "template_text":template_text},
url:"<?php echo base_url('index.php/'); ?>setting/add_template",
success: function(data){
$("#pro").html(data);
}
});
});
});
</script>
<form method="post">
<label for="name">Category<span class="required">*</span></label>
<input type="text" name="category" id="category" required="required" />
<label for="email">Template Name<span class="required">*</span></label>
<input type="text" name="temp_name" id="temp_name" required="required" />
<label for="email">Template Text<span class="required">*</span></label>
<textarea class="ckeditor" name="template_text" id="template_text"></textarea>
<input type="submit" name="submit" id="submit" class="btn btn-success" value="submit">
</form>
Help, I am really not familiar with ajax and I wanted to submit a form without reloading the page. Using the codes below, it didn't reload but it certainly didn't post or didn't even call the ajax function.
<script type="text/javascript">
$(function() {
//this submits a form
$("#post_form").on("submit", function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "post.php",
data: $("#post_form").serialize(),
beforeSend: function() {
$('#input_process').html('Loading');
},
success: function(data) {
$('#input_process').html(data);
},
failure: function(){
$('#input_process').html('Failed');
}
})
})
})
</script>
And here is the html form codes
<div id="input_process"></div>
<div id="story_post_input">
<form name="post_form" id="post_form" action="" method="POST">
<input type="hidden" name="post_type" value="story" />
<input type="text" name="post_title"/>
<textarea name="userpost"></textarea>
<input type="submit" name="post_submit" value="post" id="post_submit_button"/>
</form>
</div>
<div id="shout_post_input">
<form name="post_form" id="post_form" action="" method="POST">
<input type="hidden" name="post_type" value="shoutout" />
<input type="text" name="userpost"/>
<input type="submit" name="post_submit" value="shout" id="post_submit_button"/>
</form>
</div>
<div id="image_post_input">
<form name="post_form" id="post_form" action="" method="post" enctype="multipart/form-data">
<input type="file" name="post_image">
<input type="hidden" name="post_type" value="image" />
<input type="text" name="userpost"/>
<input type="submit" name="post_submit" value="upload" id="post_submit_button"/>
</form>
</div>
And here is the post.php code
<?php
if(isset($_POST['userpost'])){
$post_type = $_POST['post_type'];
if($_POST['post_type']=="shoutout"){
$post = $_POST['userpost'];
$query = 'INSERT INTO tblpost (post_content, post_date, post_userID, poster, post_type) VALUES ("'.$post.'", now(), "'.$_SESSION["user_ID"].'", "'.$_SESSION["username"].'", "'.$post_type.'" )';
$result = mysql_query($query) or mysql_error();
$tmp_post_ID = mysql_insert_id();
$type = "post";
notify($type, $tmp_post_ID);
}
if($_POST['post_type']=="story"){
$post_title = $_POST['post_title'];
$post = $_POST['userpost'];
$query = 'INSERT INTO tblpost (post_content, post_date, post_userID, poster, post_type, post_title) VALUES ("'.$post.'", now(), "'.$_SESSION["user_ID"].'", "'.$_SESSION["username"].'", "'.$post_type.'", "'.$post_title.'" )';
$result = mysql_query($query) or mysql_error();
$tmp_post_ID = mysql_insert_id();
$type = "post";
notify($type, $tmp_post_ID);
}
if($_POST['post_type']=="image"){
$tmp_name = $_FILES['post_image']['tmp_name'];
$user_ID = $_SESSION['user_ID'];
$post = $_POST['userpost'];
$img_ID = upload_image($tmp_name,$user_ID);
$query = 'INSERT INTO tblpost (post_content, post_date, post_userID, poster, post_type, img_ID) VALUES ("'.$post.'", now(), "'.$_SESSION["user_ID"].'", "'.$_SESSION["username"].'", "'.$post_type.'", "'.$img_ID.'" )';
$result = mysql_query($query) or mysql_error();
$tmp_post_ID = mysql_insert_id();
$type = "image";
notify($type, $tmp_post_ID);
}
//header('location:'.curPageURL());
}
?>
when you pass data from ajax to php
data: {variable : variable}, //var variable = $("#post_form").serialize(); and check your variable before pass it
and get it in php
echo ($_POST['variable']);
Your code works perfectly. (Example)
Change your form (as KyleK suggested) to this:
<form name="post_form" id="post_form" action="" method="POST">
.....
So this narrows down your problem to only one viable option. You either aren't including the jQuery library (possibly a deprecated version), or the way you're testing it is wrong.
Go simple and try this:
$.ajax( {
type: "POST",
url: "post.php",
data: $("#post_form").serialize(),
success: function(data) {
console . log(data);
}
});
and in your PHP script, just simple do something like this:
echo 'uwotm8';
To ensure your ajax is running correctly.
Change to this...
$(document).on("submit","#post_form", function (e) {...
Or..
$("#post_submit_button").click(function(e){
e.preventDefault();
//rest of code
});
And remove this from your form
onsubmit="return false;"
EDIT **
Based on your updated post
The reason its not working is because you are using multiple forms with one #ID. Which is illegal
<form name="post_form" id="post_form" action="" method="POST">
<input type="hidden" name="post_type" value="story" />
<input type="text" name="post_title"/>
<textarea name="userpost"></textarea>
<input type="submit" name="post_submit" value="post" id="post_submit_button"/>
</form>
<form name="post_form" id="post_form" action="" method="POST">
<input type="hidden" name="post_type" value="shoutout" />
<input type="text" name="userpost"/>
<input type="submit" name="post_submit" value="shout" id="post_submit_button"/>
</form>
<form name="post_form" id="post_form" action="" method="post" enctype="multipart/form-data">
<input type="file" name="post_image">
<input type="hidden" name="post_type" value="image" />
<input type="text" name="userpost"/>
<input type="submit" name="post_submit" value="upload" id="post_submit_button"/>
</form>
Just put all the inputs into ONE form and it will work
So based on this info. Heres how I would do it.
Give all your submit buttons a class...
<input class='form_submit_button' type="submit" value="upload" />
Then in your Jquery
$('.form_submit_button').click(function(e){
e.preventDefault();
var form = $(this).parent().serialize();
$.ajax({
type: "POST",
url: "post.php",
data: form,
success:function(data){
//success stuff
});
});
It seems you need to change your form codes, there are missing double quotes after POST, and no need to add the onsubmit attribute because you already handle that on jQuery.
<form name="post_form" id="post_form" action="" method="POST">
<input type="hidden" name="post_type" value="post" />
<input type="text" name="userpost"/>
<input type="submit" name="post_submit" value="post" id="post_submit_button"/>
</form>
let me know how you go
I am learning javascript but I still do not get to the book's chapter that could answers my question, so I will be very grateful if somebody can put me in the right track.
Here is the situation:
I am using jquery to submit a form. However I need to put two forms (of the same kind but referring to different object) and I want to use the same jquery function to submit the one I choose.
This is the jquery function:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".submit").click(function(){
var name = $("#student").val();
var mark = $("#mark").val();
var dataString = 'student='+ student + '&mark=' + mark;
$.ajax
({
type: "POST",
url: "records.php",
data: dataString,
success: function()
{
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
return false;
});
});
</script>
These are the forms I would like to pass to the above function depending on the one I click.
<form method="post" name="form">
<input type="hidden" id="student" name="student" value="Mandy" >
Mark: <input size="2" id="mark" name="mark" value="1" type="text">
<input type="submit" value="Submit" class="submit"/>
</form>
<form method="post" name="form">
<input type="hidden" id="student" name="student" value="Fred" >
Mark: <input size="2" id="mark" name="mark" value="1" type="text">
<input type="submit" value="Submit" class="submit"/>
</form>
Thanks
Well, first thing's first - you're going to get nowhere with the same id's on the page. Change the id's on student and mark to classes (which do not have to be unique):
<form method="post" name="form">
<input type="hidden" class="student" name="student" value="Mandy" >
Mark: <input size="2" class="mark" name="mark" value="1" type="text">
<input type="submit" value="Submit" class="submit"/>
</form>
<form method="post" name="form">
<input type="hidden" class="student" name="student" value="Fred" >
Mark: <input size="2" class="mark" name="mark" value="1" type="text">
<input type="submit" value="Submit" class="submit"/>
</form>
Then the jQuery is pretty simple - find the nearest form and seek out the student and mark by class (scoped to the form):
$(".submit").click(function(){
var $form = $(this).closest('form');
var student = $(".student", $form).val();
var mark = $(".mark", $form).val();
var dataString = 'student='+ student + '&mark=' + mark;
$.ajax
({
type: "POST",
url: "records.php",
data: dataString,
success: function()
{
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
return false;
});
Live example: http://jsfiddle.net/6Lc8R/
I have the following code:
$.ajax({
type: 'GET',
url: 'index.php?route=checkout/onepagecheckout/getpaypaldata',
dataType: 'json',
success: function(json) {
$('#pp_info').html(json['output']);
$('#payment').submit();
}
});
The ajax requests receives a json object containing a html form like :
<form id="payment" method="post" action="https://www.paypal.com/cgi-bin/webscr">
<input type="hidden" value="_cart" name="cmd">
<input type="hidden" value="1" name="upload">
<input type="hidden" value="test#yahoo.ca" name="business">
<input type="hidden" value="Sample Item Name" name="item_name_1">
<input type="hidden" value="TESTI-1" name="item_number_1">
<input type="hidden" value="104.98" name="amount_1">
<input type="hidden" value="1" name="quantity_1">
<input type="hidden" value="0" name="weight_1">
<input type="hidden" value="Type" name="on0_1">
<input type="hidden" value="As Shown" name="os0_1">
<input type="hidden" value="Delivery Date" name="on1_1">
<input type="hidden" value="Jun 23,2012" name="os1_1">
<input type="hidden" value="Comments" name="on3_1">
<input type="hidden" value="test message" name="os3_1">
</form>
which contains the information that PayPal requires in order to process the order. Everything works fine except I believe sometimes the form gets submitted before the jQuery .html function is done with loading the html content.
Is there any callback function for .html ? or any other method that I can use to solve the issue ? the PayPal data comes as a HTML form and I can't change that part, so I only have one option which is somehow load the html content and submit the form !
You may try this
success: function(json) {
$('#pp_info').html(json['output']).promise().done(function(){
$('#payment').submit();
});
}