submit a form inside another form - javascript

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>

Related

How can I fix my Mturk submit button? It is not working

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>

Two forms one submit button

I have two forms, I want to use both forms at the same time.I know it is possible using ajax.
Form1
<form action="upload.php" method="post">
<label for="url">Enter URL:</label>
<input type="text" name="url" size="35" /><br/>
<label for="filemam">File Name:</label><br/>
<input type="text" name="filenam" size="35" />
<br/> <input type="submit" name="sut" value="Submit" />
</form>
Form2
<form method="post" action="forum2_add_:user-prvar-7890:.xhtml:admin-hash-amp:"> <div id="bb"><br/> <img src="http://scodec.xtgem.com/400px-Warning_icon.svg_.png" width="20" height="20"/> <b><font color="#696969">Avoid All Capital Letter on your thread title, special character like (') is not allowed.**</font></b><br/> <b>Thread Title:</b> <input type="text" name="tema_nazov" value="" maxlength="200"/></div> <div id="bb"><br/><b><font color="#696969"> <img src="http://scodec.xtgem.com/400px-Warning_icon.svg_.png" width="20" height="20"/> Article content should be easy to read, easy to understand,presentation clear in order to attract readers.</font></b><br/><b>Content:</b> <br/> <textarea name="text" rows="5"></textarea>
<input type="hidden" name="d_token" value="" /><input type="submit" name="submit" value="Submit" onclick="conti()" style="margin:2px"/></div></form>
</div></div>
Note:
I want to run form1 as Javascript
I want to run form2 submit button as onclick.
Anyone?
Give form 2 an id and create a js submit event handler for this form that will serialize the form data and send it to the form action, the function will be called on form 2 submit button, what we are doing is preventing the default submit action, and submitting our form through AJAX :
Add id to form 2 :
<form method="post" id="formTwo" ....
Create a submit function event handler for form two, call AJAX function without the need for onclick event on submit button in form 2 :
$("#formTwo").submit(function (e) {
e.preventDefault(); //
form = $(this);
$.ajax( {
type: "POST",
url: form.attr( 'action' ),
data: form.serialize(),
success: function( response ) {
console.log( response );
}
} );
});
Form 1 will submit in its default behavior through its own submit button.
Try this:
function conti(){
$("form").first().submit();
}

javascript function call for single form

I have multiple forms in my php file for different buttons. So, if I click on Back button, ramesh.php script should be called and so on. This is the code.
<form action="ramesh.php">
<input type="submit" value="Back" />
</form>
<form action="process.php" method="post">
<input name="rep_skyline" type="text" />
<input type="submit" />
</form>
<form action="update.php" method="post" >
<button type="submit">Update</button>
</form>
However, I need to pass some data to server from my client side on form submit just for the update button. I have a javascript function to send the data to server side as below.
<script type="text/javascript">
$(document).ready(function() {
$('form').submit(function(e) {
var mydata = 3;
if ($(this).is(':not([data-submit="true"])'))
{
$('form').append('<input type="hidden" name="foo" value="'+mydata+'">');
$('form').data('submit', 'true').submit();
e.preventDefault();
return false;
}
})
})
</script>
If I click on the update button, the javascript function is working fine. However, if I click on Back or Submit button, I should not be calling the javascript function. Is there someway to do this?
Give your form an id:
<form action="update.php" method="post" id="update-form">
Then use a more specific selector:
$("#update-form").submit(function() {
// Code
});
I'm not quite sure why you need JavaScript to dynamically add data to your form, however. You should just use an <input type="hidden" /> directly.
type=submit will always load the form's action. Try to specify wich form to submit.
<form name="backForm" id="backForm" action="ramesh.php">
<input type="submit" value="Back" />
</form>
<form name="form2" id="form2" action="process.php" method="post">
<input name="rep_skyline" type="text" />
<input type="submit" />
</form>
Now you can access the form via document.backForm or document.getElementById("backForm") and than use submit(); like document.getElementById("backForm").submit();

javascript Submit multiple forms with one button

In my html I have multiple forms (text inputs, radio buttons, check boxes and select) and one button. I would like to fill all these forms and send values to my php file. For now I am trying to submit values from text input and select but I am stuck at this point.
I have a js submit file:
submitForms = function(){
document.getElementById("form1").submit();
document.getElementById("form2").submit();
}
And my forms are like this:
SELECT:
<form id ="form1" name="dists" action="solve.php" method="post">
<select id="demo" name="sadzba" onchange="selectElement1(this.value)>
<option value="">-- vyberte oblasť --</option>
</select>
</form>
Text input form + button:
<form id="form2" action="solve.php" method="post">
<input type="text" name="spotVT" ><label>kWh za rok VT</label>
<div id="nt" style='display:none'><input type="text" name="spotNT" ><label>kWh za rok NT</label></div>
</form>
<input id="sub" type="button" value="Ok" style="margin-left:15px;" onclick="submitForms()"/>
But this is not working. Can you help me please? Thank you
Once you are submitting one form your page reloads or terminates the javascript after that submission of form so better use Ajax for submitting multiple forms at the same time
with jquery
$("#sub").click(function(){
$("form").each(function(){
var fd = new FormData($(this)[0]);
$.ajax({
type: "POST",
url: "solve.php",
data: fd,
processData: false,
contentType: false,
success: function(data,status) {
//this will execute when form is submited without errors
},
error: function(data, status) {
//this will execute when get any error
},
});
});
});
Above code will submit every form when you click a button with id sub
It will be easier to only submit one form. You can give your select and input tag the same form name by assigning form="your-form-id".
Here's an simple example of a native Javascript implementation.
<!DOCTYPE html>
<html>
<head>
<title>Multiform - JAVASCRIPT</title>
</head>
<body>
<fieldset>
<legend>Form 1</legend>
<form name="f1" id="f1" onsubmit="return validate(this)">
<input type="text" name="username" placeholder="Username" />
</form>
</fieldset>
<fieldset>
<legend>Form 2</legend>
<form name="f2" id="f2" onsubmit="return validate(this)">
<input type="text" name="email" placeholder="Email" />
</form>
</fieldset>
<fieldset>
<legend>Form 3</legend>
<form name="f3" id="f3" onsubmit="return validate(this)">
<input type="text" name="password" placeholder="Password" />
</form>
</fieldset>
<button onclick="submitAll();">SUBMIT ALL</button>
<script>
'use strict';
function validate(form){
//forms processsing goes here...
console.log(form, form.name)
return false;
}
function submitAll(){
for(var i=0, n=document.forms.length; i<n; i++){
document.forms[i].onsubmit();
}
}
</script>
</body>
</html>
You could try this. If submitting all forms is fine for your page
$('form').submit();
Function that's in actual use:
function trySubmitAllForms() {
if ($('.saveSpinner').is(':visible')) {
return;
}
if ($('form').valid()) {
$('.saveSpinner').show();
$('form').submit();
} else {
showValidationErrorMessages();
}
}
Bismillah, try our method below, insyaAllah we hope can provide a solution for you.
document.getElementById("submit").addEventListener("click", function () {
$(function () {
$("#formid01").delay(300).submit();
$("#formid02").delay(300).submit();
});
});

HELP here using ajax + jquery nested form submission

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

Categories