JS - How to submit form onclick and send submit button - javascript

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

Related

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>

jQuery form Validation does not include value of submit button

I'm using jquery form validation from http://www.runningcoder.org/jqueryvalidation/
demo.html
<form id="form-signup_v1" name="form-signup_v1" method="get" class="validation-form-container">
<div class="field">
<label for="signup_v1-username">First Name</label>
<div class="ui left labeled input">
<input id="first_name" name="first_name" type="text">
<div class="ui corner label">
<i class="asterisk icon">*</i>
</div>
</div>
</div>
<input name="ok" id="ok" type="submit" class="ui blue submit button" value="Ok">
<input name="cancel" id="cancel" type="submit" class="ui blue submit button" value="Cancel">
</form>
<script>
$('#form-signup_v1').validate({
submit: {
settings: {
inputContainer: '.field'
}
}
});
</script>
I'm use form validation in the url not include the value of submit button
demo.html?first_name=John
I try to remove jquery form validation in the url include the value of submit button
demo.html?first_name=John&ok=OK
I want to check submit button when click from query string but when i use validation the url alway not include query string of button like the figure 1
If you want that the query doesn't include the button name just remove the name attribute from <input type = "button" name="ok">. Also assign a value to the button. By default the submit action forms the query string from the name value pairs in the form.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="get">
<input name="first_name" type="text" />
<input type="submit" value="button">
</form>

Can't simulate click on submit button via javascript

I'm having problems simulating a click via javascript on a mailchimp pop-up subscribe form and i need your help.
<!-- Title & Description - Holds HTML from CK editor -->
<div class="content__titleDescription" data-dojo-attach-point="descriptionContainer"><strong>Unlock the content </strong>by subscribing to our page.</div>
<!-- Form Fields -->
<form action="//mc.us7.list-manage.com/subscribe/form-post?u=bcd9828fa83ea7a231ffbee26&id=1928481ac4" accept-charset="UTF-8" method="post" enctype="multipart/form-data" data-dojo-attach-point="formNode" novalidate="">
<div class="content__formFields" data-dojo-attach-point="formFieldsContainer">
<div class="field-wrapper" id="uniqName_3_0" widgetid="uniqName_3_0">
<label for="mc-EMAIL">Email Address</label>
<input type="text" name="EMAIL" value="" id="mc-EMAIL" class="invalid">
<div class="invalid-error" style="display: block;">This field is required.</div>
</div>
<div class="field-wrapper" id="uniqName_3_1" widgetid="uniqName_3_1">
<label for="mc-FNAME">First Name</label>
<input type="text" name="FNAME" value="" id="mc-FNAME" class="valid">
<div class="invalid-error" style="display: none;"></div>
</div>
<div style="position:absolute;left:-5000px;">
<input type="text" name="b_bcd9828fa83ea7a231ffbee26_1928481ac4" tabindex="-1" value="">
</div>
</div>
<div class="content__button">
<input class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
</div>
</form>
<!-- Footer - Holds HTML from CK editor -->
<div class="content__footer" data-dojo-attach-point="footerContainer"></div>
</div>
<div class="modalContent__image" data-dojo-attach-point="formImageContainer"></div>
The code that i'm trying to target is:
<input class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
It's the submit button "Subscribe" that you can also see in
http://www.aspeagro.com/EN_Program_Abricot.html
Thank you!
How about this? I think is should do what you're after?
HTML
<input id="submit-button" class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
JS
$('#submit-button').on('click', function(e){
e.preventDefault();
// Do what you want to do
});
set id="btn" attribute to your submitting button and using jQuery you can trigger click with $("#btn").click(); call
If your aim is to submit the form, then don't bother sending a click event, but use the form's submit method:
var form = document.getElementById('uniqName_3_0').parentNode.parentNode;
form.submit();
The code is of course easier if you give the form an id attribute:
<form id="myform" ...
and then:
document.getElementById('myform').submit();
That button is inside an iframe. To access it from the parent page you would trigger it like this:
$('iframe').contents().find('input:submit').click()

POST other Form objects on button click

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>

Populate fields when user submit forms without page refresh using jQuery

On my form there are a few input fields, once the users entered the values into the input field and hit submit, I want the values to populate a few corresponding elements.
How can I do it using jQuery without refreshing the page?
<form method="get">
<label for="yourName">Your name</label>
<input name="yourName" id="yourName" type="text">
<button type="submit">Submit</button>
</form>
<div id="result">
<span class="rName"></span>
</div>
Some failed JS.
$('#hCardForm').submit(function() {
var rName = $('#yourName').val();
$('.rName').text(rName);
});
There are 2 things wrong with your code.
1. you don't have an id on your form
2. you are not stopping the submit of the form.
You could change the button type equal to button instead of submit and submit the form via jquery.
jsfiddle
<form method="get">
<label for="yourName">Your name</label>
<input name="yourName" id="yourName" type="text">
<button type="submit" id="submit">Submit</button>
</form>
<div id="result">
<span class="rName"></span>
</div>
$('#submit').click(function(event){
event.preventDefault();
$('#result .rName').text($('#yourName').val());
});​
http://jsfiddle.net/MswhY/

Categories