Multiple Form Submits using the same Function - javascript

I have a form that is using a function like
$(document).ready(function() {
$("#form1").submit(function() {
But I have 2 other forms that I'd like to use the same function if/when they submit, how would I write that?
$(document).ready(function() {
$("#form1").submit(function(),
$("#form2").submit(function(),
$("#form3").submit(function() {
Thanks

If I understand, you want to share a function for various submit event handlers. This is fairly simple:
function submitHandler() {
// handler stuff here.
}
$(document).ready(function() {
$("#form1").submit(submitHandler);
$("#form2").submit(submitHandler);
$("#form3").submit(submitHandler);
}
and alternative, if you want to handle all forms, is to specify which forms in the jquery selector. You can do this for all forms on the page:
$(document).on('submit','form', function() { });
or, if you just add a class name to the forms you want to use it on:
$(document).on('submit','.formclass', function() { });

You should be able to just do this:
$("#form1, #form2, #form3").submit(function() {
formid = this.id;
console.log('Processing form [' +formid+ ']');
...etc...
Any of the specified IDs will trigger that submit function.
Using the formid var, you can fine-tune any form-specific mods within the function.

You can pass the id of the form to submit them separately.
This code will allow you to have as many forms as you like without having to update the JS.
function submitForm(id) {
$("#" + id).submit(function(e) {
e.preventDefault();
for (let i = 0; i < e.target.length - 1; i++) {
console.log(e.target[i].name, e.target[i].value);
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1">
<input name="name">
<button onClick="submitForm('form1')">Submit</button>
</form>
<form id="form2">
<input name="name">
<button onClick="submitForm('form2')">Submit</button>
</form>
<form id="form3">
<input name="name">
<button onClick="submitForm('form3')">Submit</button>
</form>

By JQuery you can use the below function $("form").submitNow() with any form element.
$.fn.submitNow = function() {
var form = $(this);
// handle form element
console.log(this.id, this.action);
$(this).submit();
}
//use it
$("form").submitNow();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="./action1" id="action1">
<input type="submit" value="form1" />
</form>
<form action="./action2" id="action2">
<input type="submit" value="form2" />
</form>
<form action="./action3" id="action3">
<input type="submit" value="form3" />
</form>

Related

Send button value by post request via jquery

My code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form>
<button id="test" value="123" name="test" >ok</button>
</form>
<script>
$(document).ready(function () {
$("#test").click(function() {
var combinedData = $("#test").serialize();
$.post(
"element_submit.php",
combinedData
).done(function(data) {
//alert("Successfully submitted!");
$("#result").html(data);
}).fail(function () {
//alert("Error submitting forms!");
})
});
});
</script>
<div id="result" ></div>
The element_submit.php file
<?php
//just to test it should output in the #result div
echo $_POST['test'];
?>
What I am trying to do is submit the with the value="attribute" so the data is serialized and send the post request, it's not like a submit when user insert a value and submit,What I need is to get the value attribute and submit to the php, this code is only for To simplify and illustrate what I am trying to do, because in this page I have the following buttons with ids #follow #unfollow so I need a way to get the button value to make the user follow and unfollow.
you need to serialize the form - not the elements within it .You can also have the triggering button outside the form which will prevent hte form from submitting on the button click.
<form id="testForm">
<input type="hidden" name="testInput" value="123"/>
</form>
<button name="test" id="testButton">submit</button>
...
<script>
$(document).ready(function () {
$("#testButton").click(function() {
var combinedData = $("#testForm").serialize();...
$(document).ready(function () {
$("#testButton").click(function() {
var combinedData = $("#testForm").serialize();
console.log(combinedData);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="testForm">
<input type="hidden" value="123" name="testinput"/>
</form>
<button id="testButton">Click</button>
Straight JS might help you out. Include a function that sends the id and get the value of that id. Then just send a regular post of the value without serialize... easier.
<script>
function fetchButtonValue(theId){
var p = document.getElementById(theId).value;
alert (p);
}
</script>
<button id="myFormBtn" value ="woo"
onclick="fetchButtonValue(this.id)">My Button</button>
this works...
You could also put a class on the button let's say class="followBTN" then on a click you could just snag the value by $(this).val() I'd use this method if I had more than one button per page.

how to bind bootstrap loading button success / error on form submit

I'm trying to bind a bootstrap button with loading state to a form.
I would like the button to keep the data-loading state until the form is submitted. If the form errors out the data-loading should ideally stop or display a different message.
How can I achieve this?
My code for the button:
http://www.bootply.com/128762
what would be the best approach for a form that is not ajax?
Are You looking Something Like this Below
$('#loading-example-btn').click(function () {
if($("#txt").val().length > 0)
{
var btn = $(this)
$(this).attr('value','Loading');
}
else
{
$(this).attr('value','error On Submit');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
<input type="text" name="test" id="txt">
<input type="submit" id="loading-example-btn" value="Submit" data-loading-text="Loading...">
</form>

Can't use JQuery form validation with two buttons html form

HTML:
<form id="myForm">
<fieldset>
<ol>
<li>
<label for="data">Data</label>
<input id="data" name="data" type="text" placeholder="Ex.º: 14-02-2014" required>
</li>
<li>
<label for="conta">Conta</label>
<input id="conta" type="text" name="conta" placeholder="Ex.º: " required>
</li>
</ol>
<input id="oknovo" type="submit" value="OK & Novo" />
<input id="okfechar" type="submit" value="OK & Fechar" />
</fieldset>
</form>
JS:
$(document).ready(function () {
var form = $('#myForm');
var botao;
form.validate();
if (form.valid()) {
$("#myForm input[type=submit]").click(function (event) {
botao = $(this).attr('id');
alert("clique " + botao);
});
};
});
I want to validate the form using JQuery validation plugin.
If it is valid according to the rules specified in the HTML form, then identify which of the buttons was clicked. The validation plugin is working but the form is never valid, therefore the function is never called to alert the id of the button.
You may see a live JSFiddle here.
If the form isn't valid at DOM ready (which it will never be), then your code to add the event handler to the button won't run. You should consider running your validation on a different event, say when the text in the textbox changes.
Example:
$('input[type=textbox]').change(function() {
// put your validation code here.
});
Put your validation inside the click event, and it starts working:
$(document).ready(function () {
var form = $('#myForm');
var botao;
form.validate();
$("#myForm input[type=submit]").click(function (event) {
if (form.valid()) {
botao = $(this).attr('id');
alert("clique " + botao);
}
event.preventDefault();
});
});
Working fiddle
Try adding event.preventDefault();
$("#myForm input[type=submit]").click(function (event) {
event.preventDefault();
botao = $(this).attr('id');
alert("clique " + botao);
});

Get input value into a <form> inline

Following my code:
<script>
function getText(text){
alert(text);
}
</script>
<form action="getText(/*here function for get text*/)">
<input type="text" class="text"/>
<input type="submit"/>
<div></div>
</form>
How to get textarea value with pure javascript in the <form> where indicated?
The action attribute contains the URL that the form will be submitted to, not JavaScript.
If you want to process the form data with JavaScript, then bind a submit event handler to it. This will be fired in the context of the form, so you can access the form element via this.
You can access the form controls through the elements collection. They will have value properties containing their values.
<form action="/some/handler" id="myForm">
<textarea name="myTextArea" class="text"></textarea>
<input type="submit">
<div></div>
</form>
<script>
function getText(text){
alert(text);
}
function formSubmitHandler(evt) {
var textarea = this.elements.myTextArea;
getText(textarea.value);
}
document.getElementById('myForm').addEventListener('submit', formSubmitHandler);
</script>
You may wish to call evt.preventDefault() if you are going to handle the form processing entirely with JS (when JS is available).
If you want value from input without using selector, then you can use some thing like this,
but remember, the value your are getting from input tag should be used as a first child of form element.
<form action="">
<input type="text" class="text"/>
<input type="button" onclick="getText()" value="get value">
<div></div>
</form>
<script>
function getText(text){
var textValue = document.getElementsByTagName('input')[0].value;
alert(textValue);
}
</script>
EDIT
If you want the text from input value after pressed the enter key then you could do like this.
<form action="">
<input type="text" class="text" onkeydown="getText(event)"/>
<div></div>
</form>
<script>
function getText(event){
var textValue = document.getElementsByTagName('input')[0].value;
if(event.which == 13){
alert(textValue);
}
}
</script>
Here a little function for you
function getTextAreaByClass(lookFor) {
var i; /* I always define at the top so jslint doesn't carp */
var elems = document.getElementsByTagName("textarea");
for (i in elems) {
if((' '+elems[i].className+' ').indexOf(' '+lookFor+' ') > -1) {
return elems[i].innerHTML;
}
}
return ""; /* or return false or whatever else you want to denote not found */
}
The above will search through all the textarea tags, look for a class that matches and will return the content within the textarea.

javascript submit not submitting

I have the following in my head:
<SCRIPT>
function submitFunction(i) {
if (i==1) {
alert('1');
document.sales_order_details.action="/sales/_order";
document.sales_order_details.submit()
}
if (i==2) {
alert('2');
document.sales_order_details.action="/sales/delete_order";
document.sales_order_details.submit()
}
}
</SCRIPT>
and the following in my body:
<form id="sales_order_details" action="/sales/delete_order" method="post">
<INPUT TYPE="button" VALUE="Edit Order" onClick="submitFunction(1)">
<INPUT TYPE="button" VALUE="Delete Order" onClick="submitFunction(2)">
</form>
The alert for '2' or '1' shows correctly but the form does not submit.
any advice.
Thanks
Try this in your javascript function instead:
function submitFunction(i) {
var form = document.getElementById('sales_order_details');
if (i == 1)
form.action = "/sales/_order";
else if (i == 2)
form.action = "/sales/delete_order";
form.submit();
}
You have accessed the java script object hierarchy wrongly. after document you should access form to get your code work see the following: And you should use name attribute in form tag to work this code.
<SCRIPT>
function submitFunction(i) {
if (i==1) {
alert('1');
document.form.sales_order_details.action="/sales/_order";
document.form.sales_order_details.submit()
}
if (i==2) {
alert('2');
document.form.sales_order_details.action="/sales/delete_order";
document.form.sales_order_details.submit()
}
}
</SCRIPT>
the html form:
<form name="sales_order_details" action="/sales/delete_order" method="post">
<INPUT TYPE="button" VALUE="Edit Order" onClick="submitFunction(1)">
<INPUT TYPE="button" VALUE="Delete Order" onClick="submitFunction(2)">
</form>
Or:
you could use the form index number to access the form object in javascript. like document.form[0].action
Change
document.sales_order_details.submit()
to
document.forms['sales_order_details'].submit();
and your form will submit correctly.

Categories