POST other Form objects on button click - javascript

I have multiple forms as below. The page is dynamic, I cannot say how many forms will be presented inside.
<form name="f1" action="submit.php" method=POST>
<input type="hidden" name="approve1" value="93545" />
<input type="submit" value="Submit/>
</form>
<form name="f2" action="submit.php" method=POST>
<input type="hidden" name="approve2" value="93545" />
<input type="submit" value="Submit/>
</form>
.....
<input type="button" value="Submit All"/>
When i click "Submit All" the values of all the forms - approve1, approve2, in the example - should be submitted in the page.
Any help with Jquery or Javascript is appreciated!

To submit all the inputs at once, you'll have to create a new <form>.
This can be done dynamically using jQuery:
$(function() {
$("#submitAll").click(function(ev) {
ev.preventDefault();
var newForm = $("<form action='/echo/html/' method='POST'></form>");
$("form input[type='hidden']").each(function(i, e) {
newForm.append(
$("<input type='hidden' />")
.attr("name", e.name)
.attr("value", e.value)
);
});
$(document.body).append(newForm);
newForm.submit();
});
});
Here's a jsFiddle
However, I'd recommend a different approach. Your submit buttons can carry all the information you need in a single form.
<form name="f1" action="submit.php" method="POST">
<button type="submit" name="approve" value="93545">
Approve 1
</button>
<button type="submit" name="approve" value="12345">
Approve 2
</button>
<button type="submit" name="approve" value="93545,12345">
Approve All
</button>
</form>

Related

Submit div content as textarea with hidden fields

Got a form and I need to submit the content of five divs. I read many solutions and I figured I could use hidden fields, but I don't know how. Javascript or jquery would be great
<form name="module" id="module" method="post" action="" title="postthis">
<div name="mytext" id="mytext">Here's something I want to pass</div>
<div name="mytext2" id="mytext2">Again, I want this div to act as a text area</div>
<div name="mytext3" id="mytext3">Another text</div>
<div name="mytext4" id="mytext4">Yet another</div>
<div name="mytext5" id="mytext5">Last one</div>
<input name="mytext" type="hidden" id="mytext" value="mytext" />
<input name="mytext2" type="hidden" id="mytext2" value="mytext3" />
<input name="mytext3" type="hidden" id="mytext3" value="mytext4" />
<input name="mytext4" type="hidden" id="mytext4" value="mytext5" />
<input name="mytext5" type="hidden" id="mytext5" value="mytext6" />
<input name="insert" type="submit" class="btn btn-primary" id="insert" value="Save my fields" onClick="return validate_login(module);" />
</form>
Please see below code snippet. to help you achieve your goals. This solution is broken into two parts, the HTML markup and the Javascript code. data-input is used to connect corresponding hidden fields ids. These is then submitted to the server for processing.
function augmentValues(divClass = "mytext") {
const divs = document.getElementsByClassName(divClass);
Array.from(divs).forEach(divElem => {
const inputId = divElem.getAttribute("data-input");
const hiddenInput = document.getElementById(`${inputId}`)
hiddenInput.value = divElem.textContent
})
}
function handleSubmit(event) {
event.preventDefault()
augmentValues();
const formData = new FormData(event.target);
const formValues = Object.fromEntries(formData.entries())
// Validate inputs
// Submit form
console.log(formValues)
event.target.submit()
}
<form name="module" id="module" method="post" action="" title="postthis" onsubmit="handleSubmit(event)">
<div class="mytext" data-input="mytext">Here's something I want to pass</div>
<div class="mytext" data-input="mytext2">Again, I want this div to act as a text area</div>
<input name="mytext" type="hidden" id="mytext" value="" />
<input name="mytext2" type="hidden" id="mytext2" value="" />
<button name="insert" type="submit" class="btn btn-primary">
Save my fields
</button>
</form>

Redirect a HTML form and add value from input

I have form where I need to redirect to a new url, and add the value from the input to the new URL
<form action="https://test.test.com/" method="GET">
<fieldset>
<legend>bftl</legend>
<input type="text" name="trackTrace" id="trackTrace" placeholder="Add your Track & Trace">
<label for="month">Track & Trace</label>
<input type="submit" class="submit" value="Submit">
</fieldset>
</form>
After you have enter the Track & Trace number and pressed the submit button
you shall be redirected to "https://test.test.com/#/TRACK&TRACENUMBER" in a new tab
You need js code like this:
<form action="https://test.test.com/" method="GET" onSubmit="return submitForm()">
<fieldset>
<legend>bftl</legend>
<input type="text" name="trackTrace" id="trackTrace" placeholder="Add your Track & Trace">
<label for="month">Track & Trace</label>
<input type="submit" class="submit" value="Submit">
</fieldset>
</form>
<script>
function submitForm() {
location.href="https://test.test.com/#/TRACK&"+document.getElementById("trackTrace").value;
return false;
}
</script>

JS - How to submit form onclick and send submit button

I need to submit form by button which is out of scope of the form by JavaSript.
<form>
<input name="data" type="text">
<input type="submit" name="send" id="send-button" style="display: none">
</form>
<button onclick="$('#send-button').click() || .submit()"></button>
The button #send-button is visible and I need to send whole form to server. It means I receive $data and $send (both).
Now I am getting just the $data.
Any idea?
You can do with javascript form method
<button onclick="document.forms[0].submit()"></button>
if you have multiple forms in the document then set id to the form
<form id="form1">
<input name="data" type="text">
<input type="submit" name="send" id="send-button" style="display: none">
</form>
<button onclick="document.getElementById("form1").submit()"></button>
Give the form a name:
<form name="myform">
Submit
</form>
Submit form function:
<script type="text/javascript">
function submitform()
{
document.myform.submit();
}
</script>
Invoke submission:
document.forms["myform"].submit();
you should add value attribute on submit button like that
<input type="submit" name="send" value="xyz" id="send-button" style="display: none">
i think you will received both values

How to show a login form when clicked on sign-in link

i want to show a login form when a click is done on a link . i want to make default behaviour of div "hide ".. how can i do that ? may form is by default showing on page., please help me . it will b grate ful for you .
Sign In
<div class="form">
<input type="text" value="" name="myinput" id="myinput"/>
<input type="submit" name="submit" value="submit"/>
</div>
javascript:
$(document).ready (function() {
$('.signin').click(function() {
$('.form').show();
return false;
});
});
Add style to the "form" to hide it.
<div style="display:none;" class="form">
<input type="text" value="" name="myinput" id="myinput"/>
<input type="submit" name="submit" value="submit"/>
</div>
Set display property of form class to none as shown belo in using css.
Sign In
<div class="form">
<input type="text" value="" name="myinput" id="myinput"/>
<input type="submit" name="submit" value="submit"/>
</div>
css:
.form{
display:none;
}
javascript:
$(document).ready (function()
{
$('.signin').click(function()
{
$('.form').show();
$('.signin').hide();
});
});

HTML/Javascript radio button forms that redirects to different links

I need to create a radio button form where the selection would redirect you to a different index.html link when a Continue button is pressed. I cant seem to find an easy way to do this. Help!!
Basically as follows:
<form>
<input type="RADIO" name="button" value="^button1^" checked>this button goes to index1.html (Default)<BR></BR>
<input type="RADIO" name="button" value="^button2^">this button goes to index2.html<BR> </BR>
<input type="RADIO" name="button" value="^button3^">this button goes to index3.html<BR> </BR>
<input type="submit" value="Continue">
</form>
In html add a data-href attribute for each button and ID to submit button
<form>
<input type="RADIO" name="button" value="^button1^" data-href="index1.html" checked>this button goes to index1.html (Default)<BR></BR>
<input type="RADIO" name="button" value="^button2^" data-href="index2.html">this button goes to index2.html<BR> </BR>
<input type="RADIO" name="button" value="^button3^" data-href="index3.html">this button goes to index3.html<BR> </BR>
<input type="submit" value="Continue" id="btnFormSubmit">
</form>
Javascript:
var submit = document.getElementById('btnFormSubmit');
submit.addEventListener('click', submitForm);
function submitForm(event){
event.preventDefault();
event.stopPropagation();
var href = '',
inputs = this.parentNode.getElementsByTagName('input')
for(var i=0;i<inputs.length;i++){
if(inputs[i].getAttribute('name') == 'button' && inputs[i].checked){
href = inputs[i].getAttribute('data-href');
window.location = href;
}
}
}
Using jQuery will be like that, add the url to the value field of the radio.
<form method="post">
<input type="RADIO" name="button" value="index1.html" checked>this button goes to index1.html (Default)<BR>
<input type="RADIO" name="button" value="index2.html">this button goes to index2.html<BR>
<input type="RADIO" name="button" value="index3.html">this button goes to index3.html<BR>
<input type="submit" value="Continue">
</form>
jQuery code:
$(function(){
$("form").submit(function(e) {
e.preventDefault();
window.location = $(this).find('input[type="radio"]:checked').val();
});
});
Live example:
http://jsfiddle.net/nnEny/
This might be too obvious but
<form>
<input type="RADIO" name="button" value="^button1^" checked>this button goes to index1.html (Default)<BR></BR>
</form>
<form>
<input type="RADIO" name="button" value="^button2^">this button goes to index2.html<BR> </BR>
</form>
<form>
<input type="RADIO" name="button" value="^button3^">this button goes to index3.html<BR> </BR>
<input type="submit" value="Continue">
</form>

Categories