when I use this code nothing and call the ajax nothing happens and I was looking at some online forums saying I need to use json encode to pass variables over ajax but it just echos it at the top of the webpage.
AjaxTesting
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$("#test").click(function(){
$.ajax({
event.preventDefault(),
url:'ajaxUser.php',
type:'POST',
dataType: 'json',
success:function(data){
alert(data.id);
}
)};
});
</script>
</head>
<body>
<form method="post">
<input name="userName">
<input name="submit" type="button" value="Submit" id="test">
</form>
</body>
</html>
ajaxUser
<?php
echo json_encode(array('id' => 123, 'messageid' => "test"));
?>
You don't have event parameter called in click function. Don't call preventDefault() within ajax function ,also you need to code your js within document.ready() if you want to write in header element !!
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<form method="post">
<input name="userName">
<input name="submit" type="button" value="Submit" id="test">
</form>
<script>
$("#test").click(function(event){
event.preventDefault();
$.ajax({
url:'ajaxUser.php',
type:'POST',
dataType: 'json',
success:function(data){
alert(data.id);
}
});
});
</script>
</body>
</html>
Should work
The php code needs to be in a different file named AjaxTesting.php and you never call the function post() in the javascript. So we can call it inside a form submit event handler
Try adding:
$(function(){
$('form').submit(function(event){
event.preventDefault()
post();
})
});
Also note that the html page needs to be running on the same server and not from local file for ajax to work
Related
I want to post a from using jQuery ajax without page reloading, it works fine in Chrome but not works in Firefox 6.0. Below is my code
<html>
<head>
<script type="text/javascript">
function save()
{
$('#myForm').submit(function(event){
event.preventDefault();
$.ajax({
type:'POST',
url:'save.php',
data:$('#myForm').serialize(),
success:function(data)
{
alert('form submitted');
},
error:function()
{
alert('unable to submit');
}
});
});
}
</script>
</head>
<body>
<form id="myForm" action=''>
<input type="text" name="firstName">
<input type="text" name="lastName">
<input type="submit" id="submitForm" onclick="save(myForm);">
</form>
<body>
</html>
Any help would be much appreciated.
You must have a cached version of jQuery in your FF cache, because I do not see you including jQuery anywhere on the page.
Add above other scripts in the head section:
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
Include jQuery library in your header section.
I would suggest you get rid of the onclick and save() and just use the jQuery submit handler
<!-- make sure you have doctype -->
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#myForm').submit(function(event){
event.preventDefault();
$.ajax({
type:'POST',
url:'save.php',
data:$('#myForm').serialize(),
success:function(data)
{
alert('form submitted');
},
error:function()
{
alert('unable to submit');
}
});
});
});
</script>
</head>
<body>
<form id="myForm" action=''>
<input type="text" name="firstName">
<input type="text" name="lastName">
<input type="submit" id="submitForm"><!-- remove onclick -->
</form>
<body>
</html>
Be sure to include jQuery.js also
I have overridden the .submit function of a form on this web-page, because the webpage is loaded inside the #mainContent in an "index.php", and I want the Submit button to replace only this #mainContent.
I am trying to get the data from this form to a .php file in order to make queries to a database (or simply echo populated variables, to indicate that data was passed).
I am very new to AJAX. Can someone explain to me how to pass the data to the .php file, or point me to a resource that will give me some clarification?
Right now I'm simply trying to pass a string to a variable and echo it back.
Could someone clarify what the first element in the "data: {thisElement: notThisOne}," refers to? Is it the "name" of an attribute in the form? The name of the variable it will be passing to the php script in the 'url:' ?
Thanks for clarify this.
Here is my 'search.html' file (which is embedded in another 'index.php' file):
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main" data-role="content" id="main">
<div id="holder">
<h1>Search</h1>
<div class="left">
<form name="searchForm" id="searchForm" onsubmit="return false;">
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<legend><h3>Course</h3></legend>
<select name="courseSelect" id="courseSelect" name="courseSelect">
<option value="*">All</option>
<option value="COMM2216">COMM-2216</option>
</select>
</fieldset>
<p>
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<legend><h4>Type:</h4></legend>
<input type="radio" name="lecLab" value="lec" id="lec"/>
<label for="lec">Lecture</label>
<input type="radio" name="lecLab" value="lab" id="lab">
<label for="lab">Lab</label>
<input type="radio" name="lecLab" value="*" id="both" checked="checked">
<label for="both">Both</label>
<p>
</fieldset>
<input type="submit" value="Go">
</form>
</div>
</div>
</div>
<script src="./scripts/searchGo.js"></script>
</body>
</html>
The 'searchGo.js':
$(document).ready(function() {
$("#searchForm").submit(function(e)
{
//e.preventDefault();
$.ajax({
type: "POST",
url: "./scripts/php_test.php",
data: {courseSelect: "Lecture, or Lab?"},
success: function(){
alert($lecOrLab);
$("#holder").load("./scripts/php_test.php");
}
}) ;
});
});
Finally, the 'php_test.php':
<html>
<head>
</head>
<body>
<?php
$courseSelect = $_POST['courseSelect'];
echo ($courseSelect);
?>
</body>
</html>
Am I collecting the data in the php_test.php incorrectly? Or assigning it in the 'data: {},' (of searchGo.js) incorrectly?
Thanks for clarification.
First you shouldn't perform a search with POST, you are not modifying states(Deleting or updating records). Use a GET request instead.
The data in the ajax request is what you want to pass to the request. Use jQuery serialize that encodes a set of form elements as a string for submission.
$.ajax({
type: "GET",
url: "./scripts/php_test.php",
data: $("#searchForm").serialize(),
success: function(data){
$("#holder").html(data);
}
});
Now, in your php file you should be looking at the $_GET. Something like this:
$courseSelect = $_GET['courseSelect'];
//now query your db and return your results based on your form fields.
PHP try:
echo json_encode($courseSelect);
Javascript: I'm not seeing where $lecOrLab is defined? Also for the success method, you're not getting the response correctly. Try this:
success: function(response){
var resp = $.parseJSON(response);
console.log(resp);
// do stuff with resp
}
I am currently using php in my html page and there is an action in the same page which gets executed upon form submission. Currently whole form gets reloaded while I want the php action to be run in the background with out reloading. How do I do it. I would also want to clear the text box after submit button is clicked. Following is the code I am currently using
<html>
<head>
</head>
<body>
<form action="index.php" method="post" role="form">
<input type="email" placeholder="Enter email" name="email_address">
<button class="btn btn-primary custom-button red-btn">Sign Up</button>
</form>
<?php
if(isset($_POST['email_address']) !(trim($_POST['email_address']) == ''))
// do some action
}
?>
</body>
</html>
Note: Following code worked for me
<script type="text/javascript">
$('#contactForm').submit(function () {
$.post("mailer.php",$("#contactForm").serialize(), function(data){
});
return false;
});
</script>
You need to use AJAX for this, for without reloading. Or, if you want to do it without disturbing the page, you need to set target.
Using AJAX
$("form").submit(function(){
$.post($(this).attr("action"), $(this).serialize());
return false;
});
Using target
<form action="index.php" method="post" role="form" target="_blank">
Using ajax
HTML
<html>
<head>
</head>
<body>
<form id="myform"><!--changge-->
<input type="email" placeholder="Enter email" name="email_address">
<button class="btn btn-primary custom-button red-btn" id="signup">Sign Up</button>
</form>
</body>
</html>
<script>
$(document).ready(function()
{
$('#signup').click(function()
{
$.ajax({
url:'index.php',
method:'post',
data : $('#myform').serialize(),
success:function()
{
}
)};
);
});
</script>
You can try this
<html>
<head>
</head>
<body>
<form id="myform" action="index.php"><!--changge-->
<input type="email" placeholder="Enter email" name="email_address">
<button class="btn btn-primary custom-button red-btn" id="signup">
Sign Up</button>
</form>
<script>
$(document).ready(function(){
$('#signup').click(function(){
$.post($(this).attr("action"), $("#myform").serialize(),function(response){
alert(response) // you can get the success response return by php after submission success
});
)};
});
HTML CODE
<form action="send.php" method="post">
<input type="hidden" name="qty" id="quantity" value="">
<input type="submit" id="submit">
</form>
JAVASCRIPT CODE
var qty=10;
$("#submit").click(function(){
$("#quantity").val(qty);
});
PHP FILE (send.php)
<?php
$showqty=$_POST['qty'];
echo $showqty;
?>
My code above is receiving an error on the php file. It says that the index qty is undefined. How can I send an integer value of a variable from javascript to php?
You do not have any issues with you javascript or you PHP code.
when you recieve undefined error, it means that the object is not even posted to the send.php file. so the problem is with the object or the way you are sending it, not with the value in it.
with a look at you code I saw that you have two action tags and no method tag and that is what causing the error.
with no method tag, the form uses GET method instead of POST method.
so you just have to change this line:
<form action="send.php" action="post">
with this line:
<form action="send.php" method="post">
simply use
var qty = document.getElementById("qty").value
action="post"> should be method="post">
This may help you:
<!doctype html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
var qty=10;
$("#submit").click(function(e){
var qty=10;
$.ajax({
url:'send.php',
type:'POST',
data:{'qty':qty},
success: function(e){
alert(e);
//do some thing
}
});
});
});
</script>
</head>
<body>
<form id="myform" action="send.php" method="post" onSubmit="return false;">
<input type="submit" id="submit">
</form>
</body>
</html>
send.php
<?php
$showqty=$_POST['qty'];
echo $showqty;
?>
I am trying to use jQuery to post and process a form.
<form action="/postcomment/" method="post" id="commentform">
<input type="text" name="author" id="author" />
<input type="text" name="email" id="email" />
<textarea name="comment" id="comment" ></textarea>
<input name="submit" type="submit" id="submit" value="Submit" />
</form>
and the jQuery code:
$("#submit").click(function() {
$.ajax({
dataType: 'json',
beforeSend: function() {
},
timeout: 60000,
error: function(request,error) {
},
success: function(data) {
var obj = jQuery.parseJSON(data);
//blah blah...
} // End success
}); // End ajax method
return false;
});
It works as expected. However, If I add the <script type="text/javascript" src="https://www.google.com/recaptcha/api/challenge?k=xxxx" > </script> into the form, it no longer works.
The browser will ask: There is a json file, do you want to open it?
Obviously the recaptcha script invoke the "post" action. How can I Stop Recaptcha from executing "action" in a form?
Related Question: Handling json Form with jQuery on Google App Engine
This is what I mean by changing the action, hopefully I am understanding your question:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script>
function changeAction() {
$("#myForm").attr("action", "anotherAction");
return false;
}
</script>
<title></title>
</head>
<body>
<form action="myFirstAction.html" id="myForm">
<input type="text" />
<button type="submit" onclick="return changeAction()">
</button>
</form>
</body>
</html>
After clicking the button the form's action is "anotherAction".