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".
Related
I am trying to get a form to submit. I am using HTML, JS, PHP, and AJAX here. Since it will not submit, I assume something is wrong with my insert function, however I cannot figure out what the problem is. Whenever I click "submit" nothing changes. Nothing moves. The information doesnt get added.
<!doctype html>
<html>
<head>
<script src="./js/jquery-3.6.0.min.js">.
</head>
<body>
<form onsubmit="return(insertPeople())">
First name: <input type=text id=firstname><br>
Last name: <input type=text id=lastname><br>
Phone number: <input type=text id=telephonenumber><br>
<input type=submit value=submit>
</form>
<div id=showpeople></div>
<script>
function insertPeople(){
val = $("#showpeople").val();
$.get("./week7ajax.php",{"cmd":"create", "firstname,lastname,telephonenumber" : val}, function(data){
$("#showpeople").html(data);
});
return(false);
}
function showpeople(){
$.get("./week7ajax.php",{"cmd":""}, function(data){
$("#showpeople").html(data);
});
return(false);
}
showpeople();
</script>
</body>
</html>
Give this a shot. I fixed some missing quotations, indented a few lines, and removed some unnecessary code.
<form onsubmit="insertPeople(); return false;">
First name: <input type="text" id="firstname"><br>
Last name: <input type="text" id="lastname"><br>
Phone number: <input type="text" id="telephonenumber"><br>
<input type="submit" value="submit">
</form>
<div id="showpeople"></div>
<script>
function insertPeople() {
val = $("#showpeople").val();
$.get("./week7ajax.php",{"cmd":"create", "firstname,lastname,telephonenumber" : val}, function(data){
$("#showpeople").html(data);
});
}
function showpeople() {
$.get("./week7ajax.php",{"cmd":""}, function(data){
$("#showpeople").html(data);
});
}
showpeople();
</script>
can someone please help me to understand why the popup "fill out this field" keeps appearing when pressing the Add button?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<style>
</style>
<script>
function removeInputField (selectedField) {
selectedField.closest('.input_field').remove();
}
function addInputField () {
var d1 = document.getElementById('expenses');
d1.insertAdjacentHTML('afterend', '<div class="input_field"><input type="text" required autocomplete="off" name="description[]"/><input type="text" required autocomplete="off" name="amount[]"/><button onclick="removeInputField(this);">x</button></div>');
}
///
$(document).ready(function(){
$('#submit').click(function(){
$.ajax({
async: true,
url: "sendData.php",
method: "POST",
data: $('#sendData').serialize(),
success:function(rt)
{
alert(rt);
$('#sendData')[0].reset();
}
});
});
});
///
</script>
<form id="sendData">
<button onclick="addInputField(this);">Add</button>
<div id="expenses">
<div class="input_field"><input type="text" required autocomplete="off" name="description[]"/><input type="text" required autocomplete="off" name="amount[]"/><button onclick="removeInputField(this);">x</button></div>
</div>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
</form>
</body>
</html>
Also, how can I edit the code to avoid the reset of the fields when the submit button is pressed?
When I submitted my external HIT on Mturk, the Submit button is not working. I would appreciate if someone could help me with this. The data gets stored in my server though. Here is my code:
<div id="instruction3" class="instructions" style="display:none">
survey questions here
Submit
</div>
function SaveData() {
(some code here)
d = {
"trialStruct": trialStruct,
"critStruct": critStruct
};
console.log(d)
SendToServer(curID, d);
}
<form action="https://workersandbox.mturk.com/mturk/externalSubmit" id="mturk_form" method="post" name="mturk_form">
<input id="assignmentId" name="assignmentId" type="hidden" value="" />
<p><input id="submitButton" type="submit" value="Submit" /></p>
</form>
function SendToServer(id, curData) {
$.ajax({
type : "POST",
url : "https://xxxxxxxxxxxx/turk/save.php",
data : { json : JSON.stringify(curData) },
success : function(data) {
document.forms[0].submit();
}
});
}
Edited: the flow should be participants click on the submit button and the data gets stored and sent to the externalSubmit page. These are parts of the code from Mturk that I need to implement in my code and perhaps I am not doing it right.
<!-- HTML to handle creating the HIT form -->
<form action="https://workersandbox.mturk.com/mturk/externalSubmit" id="mturk_form" method="post" name="mturk_form">
<input id="assignmentId" name="assignmentId" type="hidden" value="" />
<!-- HTML to handle submitting the HIT -->
<p><input id="submitButton" type="submit" value="Submit" /></p>
</form>
You should call the SaveData() function inside the form tag
<form action="https://workersandbox.mturk.com/mturk/externalSubmit" id="mturk_form" method="post" name="mturk_form" onSubmit="SaveData()">
So I think you should try to move the SaveData function to the onSubmit value of the form. So you would be submitting the form and the data would get saved to the server. You have extra html code above but I think that is superfluous for what you are trying to do.
function SaveData() {
(some code here)
d = {
"trialStruct": trialStruct,
"critStruct": critStruct
};
console.log(d)
SendToServer(curID, d);
}
function SendToServer(id, curData) {
$.ajax({
type : "POST",
url : "https://xxxxxxxxxxxx/turk/save.php",
data : { json : JSON.stringify(curData) },
success : function(data) {
document.forms[0].submit();
}
});
}
<form action="https://workersandbox.mturk.com/mturk/externalSubmit" id="mturk_form" method="post" name="mturk_form" onSubmit="SaveData()">
<input id="assignmentId" name="assignmentId" type="hidden" value="" />
<p><input onclick="window.location.href = https://workersandbox.mturk.com/mturk/externalSubmit';"id="submitButton" type="submit" value="Submit" /></p>
</form>
Here is the working one, I have used https://postman-echo.com/post just to make sure it works.
function SaveData() {
var d = {
"trialStruct": trialStruct,
"critStruct": critStruct
};
console.log(d);
SendToServer(curID, d);
}
function SendToServer(id, curData) {
$.ajax({
type: "POST",
url: "https://postman-echo.com/post",
data: {
json: JSON.stringify(curData)
},
success: function(data) {
$("#mturk_form").submit();
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="instruction3" class="instructions" style="display:none">
Submit
</div>
<form action="https://postman-echo.com/post" id="mturk_form" method="post" name="mturk_form">
<input id="assignmentId" name="assignmentId" type="hidden" value="" />
<p><input id="submitButton" type="submit" value="Submit" /></p>
</form>
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 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
});
)};
});