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
Related
I'm very new to jQuery. I've been trying to use the .serialize method in jQuery, but I can not seem to garner a response. I've checked console on Microsoft Edge, Internet Explorer, and Chrome but there's no indication of anything happening past connecting to the latest library (3.4.1). My HTML and JavaScript code are below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script language="JavaScript" type="text/javascirpt" src="https://code.jquery.com/jquery-3.4.1.js">
</script>
</head>
<body>
<form name="ourform" id="ourform" action=''>
<select name="salute">
<option>Mr.</option>
<option>Mrs.</option>
</select>
<br>
First Name: <input type="text" name="firstname"/>
Last Name: <input type="text" name="lastname"/>
<br>
<select name="region" multiple="multiple">
<option>North</option>
<option>South</option>
<option>East</option>
<option>West</option>
</select>
<br>
<textarea rows="6" cols="20" name="comment">
</textarea>
<input type="submit" name="g" value="submit" id="g"/>
</form>
<div class="results">Your Results</div>
<script language="JavaScript" type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js">
$(document).ready(function(){
$('#ourform').submit(function(event){
event.preventDefault();
var myform = $('#ourform').serialize();
alert(myform);
return false;
});
});
</script>
</body>
</html>
Any help you could provide would be greatly appreciated.
Edit: Since it seems you want to disable the default submit behavior for the button, adding the type="button" attribute removes the need to cancel the default behavior.
When you are including your own javascript within <script> tags you don't need the src attribute (this was causing the 404)
updated jsfiddle
...
<button id="g" name="g" value="submit">Submit</button>
</form>
<div class="results">Your Results</div>
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
$('#g').click(function(event) {
//event.preventDefault();
var myform = $('#ourform').serialize();
alert(myform);
return false;
});
});
</script>
</body>
</html>
The $ is undefined is caused by jquery failing to load, which is caused by misspelling 'javascript' in
<script language="JavaScript" type="text/javascirpt" src="https://code.jquery.com/jquery-3.4.1.js">
</script>
You can't include an src attribute and have data in the tag - if you have src, your script tag must be empty.
Simply use two separate ones:
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#ourform').submit(function(event){
event.preventDefault();
var myform = $('#ourform').serialize();
alert(myform);
return false;
});
});
</script>
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
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
When should I use jQuery's document.ready function?
(8 answers)
Closed 9 years ago.
I am new to JavaScript and jquery and want to check fields in a form before submitting. But even a simple example taken from How to do something before on submit? does not work. I do not ge an alert in Firefox and do not see any errors in the webdeveloper's console. See the code:
<html>
<head>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$('#myForm').submit(function() {
alert('Handler for .submit() called.');
return false;
});
</script>
</head>
<body>
<form id="myForm" action="foo.php" method="get">
<input type="text" value="" />
<input type="submit" value="submit form" />
</form>
</body>
</html>
And of course there is "jquery.min.js" in the same folder.
You need to add the script in a dom ready handler
jQuery(function () {
$('#myForm').submit(function () {
alert('Handler for .submit() called.');
return false;
});
})
When the js code is executed, the html element has to already exists. To delay the code strat, use document.ready as above:
<script type="text/javascript">
$(document).ready(function(){
$('#myForm').submit(function() {
alert('Handler for .submit() called.');
return false;
});
});
</script>
Note: the syntax $('#myForm').submit(function() { is deprecated and should probably be replaced by $(document).on("submit", "#myForm", function() { or something similar :)
EDIT: also for what you ask, see javascript documentation about e.preventDefault(), this could also be useful for what you want :)
This will work too, setting script after element already added to the DOM:
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<form id="myForm" action="foo.php" method="get">
<input type="text" value="" />
<input type="submit" value="submit form" />
</form>
<script type="text/javascript">
$('#myForm').submit(function() {
alert('Handler for .submit() called.');
return false;
});
</script>
</body>
you should try e.preventDefault(); instead of return false; E.g
$(function() { $('#myForm').submit(function(e) { e.preventDefault(); alert('Handler for .submit called.'); }); });
because some times return false; may not be effective on some codes on jquery
<html>
<head>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myForm').submit(function() {
alert('Handler for .submit() called.');
return false;
});
});
</script>
</head>
<body>
<form id="myForm" action="foo.php" method="get">
<input type="text" value="" />
<input type="submit" value="submit form" onsubmit="submit" />
</form>
</body>
</html>
demo: http://jsfiddle.net/kapil_dev/6Tf7Y/
<!DOCTYPE html>
<html>
<head>
<title>
jquery validation
</title>
</head>
<body>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#frmName').validate({
rules:{
field1:{
required:true,
lettersonly:true
},
field2:{
required:true,
email:true
}
},
submitHandler: function (form) { // for demo
alert('valid form submitted'); // for demo
return false;}
});
});
</script>
<form name="frmName" id="frmName" action="" method="post">
Enter name:<input type="text" name="field1"></br>
Enter E-Mail:<input type="text" name="field2"><br/>
<input type="submit" name="submit" value="submit"/>
</form>
</body>
</html>
I have a little problem with jQuery Validation plugin.
Why is this validation is not working? Is this because of the wrong library I linked to? I don't really understand whats wrong, so I decided to paste the whole validate script. Please take a look at my code.
Your code working fine here
It seems.you forget to add Jquery library
Add bellow line top of the others libraries
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
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".