Well im new to jquery and ajax and the code below doesnt work after 2nd attemp of submit form... heres the javascript code:
$(document).ready(function() {
var options = {
target: '#output2', // target element(s) to be updated with server response
beforeSubmit: showRequest, // pre-submit callback
success: showResponse // post-submit callback
};
$('#myForm2').submit(function() {
$(this).ajaxSubmit(options);
return false;
});
$('#me').submit(function() {
$("#div2").load("main.php");
return false;
});
});
function showRequest(formData, jqForm, options) {
return true;
}
function showResponse(responseText, statusText, xhr, $form) {}
by the way im using jquery form plugin.....
and for the index.php
<form id="me" action="" method="post">
Message: <input type="text" name="mess">
<input type="submit" value="submit">
lastly for the main.php
<form id="myForm2" action="index.php" method="post"><div>
Name:</td><td><input name="Name" type="text" />
<input type="reset" name="resetButton " value="Reset" />
<input type="submit" name="submitButton" value="Submit1" />
</div></form>
<h1>Output Div (#output2):</h1>
<div id="output2">AJAX response will replace this content.</div>
</div>
You downloading your form after page load ( *$("#div2").load("main.php")) and your events are already binded. So when your second form loaded, it's Submit button click event doesn't triger nothing. You have to read about .live() in jQuery here
Here is my solution (that is just simpl example):
$('#myForm2').live("click",function() {
$(this).ajaxSubmit(options);
return false;
});
Maybe this will work for you.
UPD
Also you can try this:
1) replace
$('#myForm2').live("click",function() {
$(this).ajaxSubmit(options);
return false;
});
with
function MyFormSubmit(form) {
$(form).ajaxSubmit(options);
return false;
})
2) Add JS code to you myForm2 Submit button onClick event
<form id="myForm2" action="index.php" method="post"><div>
Name:</td><td><input name="Name" type="text" />
<input type="reset" name="resetButton " value="Reset" />
<input type="submit" name="submitButton" value="Submit1"
onClick="javascript:MyFormSubmit(this);return false;"/>
</div></form>
<h1>Output Div (#output2):</h1>
<div id="output2">AJAX response will replace this content.</div>
</div>
You have to remove action="index.php" method="post" from your form. Then should it work.
because now it is still making the php post to index.php
Related
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>
Been beating my mind at this but its now time for me to ask for help (ask i got work tomorrow and dont want to be on this all night)
My form is inside a modal and this is my script
$(function() {
$("#applyForm").on('submit' , function(e) {
$.ajax({
type: 'POST',
url: $("#applyForm").attr("action"),
data: $('#applyForm').serialize(),
success: function(data){
alert('successfully submitted')},
error: function(data){
alert('something went wrong')
}
});
});
});
It all works, It fires up the script and submits to the backend with a success message but as soon as you close the popup sucess message it redirects to the action "apply-now" page.
How can i prevent this without it breaking the submit, As i've tried return false and preventDefault.
Heres the form
<form action="/apply-now/" enctype="multipart/form-data" id="applyForm" method="post" name="applyForm" class="form">
<input name="is_data_submitted" type="hidden" value="1">
<input name="listing_id" type="hidden" value="{$listing_id}">
MY FORM DATA
<button type="submit" id="submit" class="btn btn-warning">Apply now</button>
Any help would really be appreciated !
Thanks
J
The form is being submitted twice. Once with the form action and the other time with the ajax call. If you prefer to have only the ajax call sent, returning false outside the ajax function should do the trick. When to use PreventDefault( ) vs Return false?
$(function () {
$("#applyForm").on('submit', function (e) {
//e.preventDefault();
$.ajax({
type: 'POST',
url: $("#applyForm").attr("action"),
data: $('#applyForm').serialize(),
success: function (data) {
alert('successfully submitted')
},
error: function (data) {
alert('something went wrong')
}
});
return false;
});
});
Try this if you want the page not to reload:
$(function() {
$("#applyForm").on('submit' , function(e) {
e.preventDefault();
//... the rest of your code
//or add return false;
return false;
});
});
As you catch the actual submiting the "normal" process will happen, you don't wan't that. So you have to stop it by e.preventDefault(). You can read the documentation about it here.
Or look right here for an example where it stays on the same page.
$("#form").submit(function(e){
e.preventDefault();
$(this).append("The page is staying here");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="form">
<input type="text" name="first" id="first">
<input type="submit" value="enter">
</form>
Hopefully this helps you.
I Hope this work.
1) <button type="submit" id="submit" class="btn btn-warning">
Apply now</button> with preventDefault method
2) button type="button" id="submit" class="btn btn-warning">Apply now</button>
change the type="submit" to type="button"
Example
<form action="/apply-now/" enctype="multipart/form-data" id="applyForm" method="post" name="applyForm" class="form">
<input name="is_data_submitted" type="text" value="1">
<input name="listing_id" type="text" value="999">
MY FORM DATA
<button type="button" id="submit" class="btn btn-warning">Apply now</button>
</form>
$(document).ready(function(){
$("#applyForm").on('click','#submit' , function() {
alert("Click check")
console.log($('#applyForm').serialize())
});
});
You're not preventing the default form submission behavior. To fix up, add the following immediately before your Ajax call:
e.preventDefault();
Extra tip: to ensure the form only gets submitted once per "submit" click, stop the propagation of the click event from bubbling up through the DOM.
Immediately following the preventDefault, put this:
e.stopPropagation();
I'm adding some content through form to the database and then reload this part of page to update the content. And then I want to add the next content and again reload but the .submit method I use, sends undefined instead of the written content. Here's the HTML code:
<form id="addForm" method="post" action="/addContent">
<input type="text" id="content" name="name" value="" placeholder="New content" required/><br/><br/>
<input name="submitted" id="submitted" value="Add content" class="submit" type="submit" />
</form>
And here's JS:
<script>
$('#addForm').submit(function() {
$.post('/addContent', {
data: $('#addForm').serializeArray(),
}, function(response) {
$('#contentPart').html(response);
});
return false;
});
</script>
Can anyone help me? I'll be gratefull.
You need to assign your event on any addForm form that may appear in DOM in the future:
$(document).on('submit', '#addForm', function() {
...
});
I have a form with POST method and an action of another page.
Within the form i have another form that I need to make submit with a different action but its submitting with the main form action.
this is my second form:
<script>
function formSubmit()
{
document.getElementById("invoices_form").submit();
}
</script>
<form action="resend_multiple_invoices.php" name="invoices_form" method="post">
<input type="button" onclick="formSubmit()" value="Send Invoices" />
</form>
how can i get it to submit the second form and not the main one?
You cannot (universally) submit a nested form separately from its parent form. Nested forms are invalid HTML as outlined in the W3C prohibitions.
To solve your problem, I suggest you use two separate forms as follows:
<script>
function invoicesFormSubmit()
{
document.getElementById("invoices_form").submit();
}
function otherFormSubmit()
{
document.getElementById("other_form").submit();
}
</script>
<form action="resend_multiple_invoices.php" name="invoices_form" method="post">
//
// Input fields go here
//
<input type="button" onclick="invoicesFormSubmit()" value="Send Invoices" />
</form>
<form action="other_method.php" name="other_form" method="post">
//
// Input fields go here
//
<input type="button" onclick="otherFormSubmit()" value="Other Method" />
</form>
You can use the 'form'-attribute in your input-fields and then mix all your inputs.
By submitting they refer to the correct form.
<form action="" method="post" id="form1"></form>
<form action="" method="post" id="form2"></form>
<input name="firstname" form="form1">
<input name="firstname" form="form2">
<button type="submit" name="submit" form="form1">Save form 1</button>
<button type="submit" name="submit" form="form2">Save form 2</button>
See also https://www.w3schools.com/tags/att_input_form.asp
JQuery.ajax and html for validating an "inner form" through ajax, then submitting the entire form. I use ajax in both cases to show the purpose of a controller.php file and a submission id. You could also have an inner form which consists of several segregated sections by using classes instead of ids as Jquery selectors.
<form>
<input />
<textarea />
<select /> <!-- etc. -->
<section id="verify">
<input />
<textarea />
<select /> <!-- etc -->
<button type="button">submit</button>
<!-- eg. sub-submission verifies data in section -->
</section>
<select />
<input />
<input type="submit" value="submit" />
</form>
<script>
$(document).ready(function() {
$("#verify button").on ('click', verify);
$('form').submit (formSend);
function verify (){
// get input data within section only (ie. within inner form)
var postData = $('#verify').filter(':input' ).serializeArray();
postData.push ({name:"submitId", value:'verify'});
var request = $.ajax ({
type: "POST",
url: "controller.php",
data: postData,
error: function (xhr, status, message){
alert (status);
}
});
}
function formSend (){
// get input data within entire form
var postData = $(this).serializeArray();
postData.push ({name:"submitId", value:'send'});
var request = $.ajax ({
type: "POST",
url: "controller.php",
data: postData,
error: function (xhr, status, message){
alert (status);
}
});
}
});
</script>
So right now I am submitting a form, onSubmit I am disappearing the form (display none) and showing a link. What I want to do is return true to the form (so it can submit) when a user clicks on the link, so I want to return from the event listener. But the eventlistener is always true since it will always attach. Anybody have suggestions on the best way to do this?
<form name="request" action="http://testurl.com" method="POST" onSubmit="return test()">
<input type="text" name="Name" size="10" />
<input type="submit" name="submit" value="Submit" />
</form>
<div id="link">
Download
</div>
-JS-
function test(){
document.request.style.display = "none";
document.getElementById('link').style.display = "block";
return false;
}
Use JQuery... Here is some changings..
<form name="request">
<input type="text" name="Name" size="10" />
<input type="button" id="submit" value="Submit" />
</form>
<div id="link">
Download
</div>
Here is your Javascript code...
function test(){
document.request.style.display = "none";
document.getElementById('link').style.display = "block";
return true;
}
$("#submit").on('click', function (){
$.ajax({
url: 'http://www.youractionsite.com',
type: 'POST',
data: 'name='+$("input[name='Name']").val(),
success: function(){
test();
}
});
});
It is tested... code is working...
In the onClick of your link, you can do $("#formId").submit(); Is that what you're after?