id like to be able to disable the submit button when the form is submitted, also id like to add a message like ("this may take a while") when the form is submitted.
<form id="myform" method="post" action="default.asp" onsubmit="return Validate(this);">
<p>Select credit card:
<select tabindex="11" id="CardType">
<option value="AmEx">American Express</option>
<option value="CarteBlanche">Carte Blanche</option>
</select>
</p>
<p>Enter number:
<input type="text" id="CardNumber" maxlength="24" size="24" value="1234" />
<input type="submit" id="submitbutton" />
</p>
</form>
Modify your Validate() function to include disabling the submit button and showing the message:
function Validate(f) {
var isValid = true;
// do validation stuff
if (isValid) {
f.submitbutton.disabled = true;
document.getElementById("submitMessage").style.display = "block";
}
return isValid;
}
http://jsfiddle.net/gilly3/EjkSV/
Add a simple span or something to your HTML:
<span id="waitMessage" style="display: none;">This may take a while....</span>
Then on the click event, show that span and disable the button:
In pure javascript:
document.getElementById('submitbutton').addEventListener("click", function()
{
document.getElementById('submitbutton').disabled = true;
document.getElementById('waitMessage').style.display = 'visible';
}, false);
In jQuery:
$('#submitButton').click(function()
{
this.disabled = true;
$('#waitMessage').show();
});
First, if you're doing a traditional postback adding a message isn't much use - the browser's going to post and reload the page anyways. (unless of course the postback is so long the browser just spins forever...) but anyways... If you don't mind using jquery,
<input type="submit" id="submitbutton"/>
<span style="display:none">This may take a while...</span>
$("#submitbutton").click(function () {
$(this).next().show();
$(this).attr("disabled","disabled");
});
It is not advisable to disable a submit button onclick since that could stop the submission.
I suggest instead something like this
function Validate(theForm) {
if (.....) {
.
.
.
return false; // stop submission
}
// here we are happy
document.getElementById("submitbutton").style.display="none";
document.getElementById("pleaseWait").style.display="";
return true;
}
<form id="myform" method="post" action="default.asp" onsubmit="return Validate(this)">
<p>Select credit card:
<select tabindex="11" id="CardType">
<option value="AmEx">American Express</option>
<option value="CarteBlanche">Carte Blanche</option>
</select>
</p>
<p>Enter number:
<input type="text" id="CardNumber" maxlength="24" size="24" value="1234" />
<input type="submit" id="submitbutton" />
<span id="pleaseWait" style="display:none">Please wait...</span>
</p>
</form>
Related
I have a form of 2 input fields with dropdown options. How can I disable the submit button until and unless both the fields are filled correctly
<form method="POST" id="formcheck">
<label>first</label>
<select class="" id="first" name="first"></select>
<label>second</label>
<select class="" id="second" name="second"></select>
<input type="submit" id="submitForm" value="Submit">
</form>
In my js file I have written this, is this correct?
$("#first").kendoValidator();
$("#second").kendoValidator();
Check out the Client-side form validation documentation to understand the basics of form validation.
Then look at Telerik's Validator Overview documentation and the Validator demo.
You can use the required attribute to make an input mandatory.
<form method="POST" id="formcheck">
<label>first</label>
<select class="" id="first" name="first" required></select>
<label>second</label>
<select class="" id="second" name="second" required></select>
<input type="submit" id="submitForm" value="Submit">
</form>
Then use the validator on the form.
<script>
$(document).ready(function() {
var validator = $("#formcheck").kendoValidator().data("kendoValidator");
$("form").submit(function(event) {
event.preventDefault();
if (validator.validate()) {
console.log('form is valid');
} else {
console.log('form is NOT valid');
}
});
});
</script
Try this (in vanilla js):
let checkSelectFields = () =>
{
let submitOk = true,
selectFields = document.querySelectorAll('select'),
i = 0;
for (i; i < selectFields.length; i++) {
if (!selectFields[i].value) {
submitOk = false;
break;
}
}
document.querySelector('#submitForm').disabled = !submitOk;
};
document.querySelectorAll('select').forEach(select => select.addEventListener('change', checkSelectFields));
checkSelectFields();
<form method="POST" id="formcheck">
<label>first</label>
<select class="" id="first" name="first"><option></option><option>Opt 1</option></select>
<label>second</label>
<select class="" id="second" name="second"><option></option><option>Opt 1</option></select>
<input type="submit" id="submitForm" value="Submit">
</form>
What i want is when you type something in input, depending what button you click, he will change path of action in form. I am at half way to achieve this (i think)....check out what i make till now
function OnSubmitForm() {
if(document.pressed == 'Log As')
{
document.myform.action ="log-as.html";
}
else
if(document.pressed == 'Log As Int')
{
document.myform.action ="log-as-int.html";
}
return true;
};
<form name="account" onsubmit="return onsubmitform();">
<input type="text" name="user" id="user">
<input type="submit" name="account" onclick="document.pressed=this.value" value="Log As" />
<input type="submit" name="account" onclick="document.pressed=this.value" value="Log As Int" />
</form>
And maybe i found solution for this, but i don't know how to combinate those two...
$('#search-form').submit(function(e) {
if (!$('#user').val()) {
e.preventDefault();
}
});
This can be easily done using JQuery like so:
$("input[type='submit']").click(function(){
var name = $(this).val();
if(name=="Log As"){
$("#myform").attr('action', 'log-as.html');
}
if(name=="Log As Int"){
$("#myform").attr('action', 'log-as-int.html');
}
});
JSFiddle demo here
I would also like to point out that you are submitting to a HTML page and not a PHP page. So do keep that in mind when trying to retrieve the values later.
You can do the same thing by using this code:
First of all name attribute of your form and input type submit are
same. They must be unique.
<form name="account" id="account" action="">
<input type="text" name="user" id="user">
<input type="submit" name="account_submit1" onclick="document.pressed=this.value" value="Log As" />
<input type="submit" name="account_submit2" onclick="document.pressed=this.value" value="Log As Int" />
</form>
and
$(document).ready(function () {
$("#account").submit(function(e){
alert($.trim($("#account [type='submit']:focus").val()))
if($.trim($("#account [type='submit']:focus").val()) == "Log As"){
$("#account").attr('action',"log-as.html");
}else{
$("#account").attr('action',"log-as-int.html");
}
});
});
Updated code according to the discussion:
$(document).ready(function () {
$("#account").submit(function(e){
if (!$('#user').val()) {
e.preventDefault();
}
if($.trim($("#account [type='submit']:focus").val()) == "Log As"){
$("#account").attr('action',"log-as.html");
}else{
$("#account").attr('action',"log-as-int.html");
}
});
});
Hi I have the javascript function to open a new window and based on the value selected its populated the parent window field .But the problem is while open the new window the form is submitted .I just didn't attach the validation part. Can any body tell what might be the problem.
$(function() {
//Popup window for Nationlity
function nationalityPopUp() {
var nationalUrl="%bind(:9)";
new_Window = window.open(nationalUrl,"","width=220, height=500, left=250, top=50, scrollbars, resizable");
}
//Disable Parent Window
function parent_disable() {
if(new_Window && !new_Window.closed){
new_Window.focus();
}
}
<body onclick="parent_disable();">
<form name="Basicinfo" id="Basicinfo" method="post" action="%bind(:8)" onsubmit="return validateForm();">
<input type="text" name="Nationality" id="Nationality" value ="" />
<input type="image" src="%bind(:14)" name="Ntlylkp" onclick="nationalityPopUp();" />
</br></br>*Country Of Residency:
<input type="text" name="Residency_country" id="Residency_country" value ="" onblur="validateResCountry(value)"/>
<input type="image" src="%bind(:14)" name="Cntrylkp" onclick="countryPopUp();"/>
</br></br>*National Id:
<input id="Emirates_Id" name="Emirates_Id" type="text" value="" style="margin-left:10px;">
</br></br>*Marital Status:
<select name="marital_status" id="marital_status">
:%bind(:3);
</select>
</br> </br> *Regional Preference:
<select name="religious" id="religious">
:%bind(:4);
</select>
<input type="Submit" value="Submit And Next" style="float:right" >
</form>
</body>
return false while the for is submitted with jquery -
$('#Basicinfo').on('submit', function() {
if (some check needed) { // if want to add any check to submit the form or not
return false;
}
})
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();
});
});
I have a single form on the page and I have some jQuery to make sure that the inputs have been completed before the submit.
But now I need to have multiple similar forms repeated on the page and I need to change the jQuery to only check the two inputs in the form that the button was clicked and not check any other form on the page.
<div class="offerDate">
<form class="form-inline hidden-phone" action="http://www.treacyswestcounty.com/bookings/" method="get">
<fieldset>
<input type="text" name="from_date" placeholder="dd/mm/yy" id="from_date" class="input-small hasDatepicker">
<input type="text" name="to_date" placeholder="dd/mm/yy" id="to_date" class="input-small hasDatepicker">
<button id="submitDates" class="btn btn-main" type="submit">CHECK NOW</button>
</fieldset>
</form>
</div>
<div class="offerDate">
<form class="form-inline hidden-phone" action="http://www.treacyswestcounty.com/bookings/" method="get">
<fieldset>
<input type="text" name="from_date" placeholder="dd/mm/yy" id="from_date" class="input-small hasDatepicker">
<input type="text" name="to_date" placeholder="dd/mm/yy" id="to_date" class="input-small hasDatepicker">
<button id="submitDates" class="btn btn-main" type="submit">CHECK NOW</button>
</fieldset>
</form>
</div>
The jQuery that I have used previously to check on form using ID
// validate signup form on keyup and submit
jQuery('#submitDates').click(function () {
var found = false;
jQuery("#to_date, #from_date").each(function(i,name){
// Check if field is empty or not
if (!found && jQuery(name).val()=='') {
alert ('Please choose your arrival and departure dates!')
found = true;
} ;
});
return !found;
});
.prev( [selector ] )
Returns: jQuery
Description: Get the immediately preceding sibling of each element in
the set of matched elements, optionally filtered by a selector.
This is quite short and will target any input displayed just before a button :
$("button").prev("input")
jsFiddled here
you can try like this:
CODE
jQuery('.submitDates').click(function () {
var found = false;
jQuery(this).siblings("input").each(function (i, name) {
// Check if field is empty or not
if (!found && jQuery(name).val() == '') {
alert('Please choose your arrival and departure dates!')
found = true;
};
});
return !found;
});
assuming your inputs are siblings for the button. Note I also changed button's id into class.
FIDDLE http://jsfiddle.net/FY9P9/
Closest and Find do it as well, wherever the input are for the button :
HTML:
<form class="form">
<input type="text" class="toDate" />
<input type="text" class="fromDate" />
<div class="button">Click</div>
</form>
<form class="form">
<input type="text" class="toDate" />
<input type="text" class="fromDate" />
<div class="button">Click</div>
</form>
JS:
$(".button").each(function () {
$(this).click(function () {
if (($(this).closest(".form").find(".toDate").val() == "") || ($(this).closest(".form").find(".fromDate").val() == "")) {
alert("Please fill in arrival and departure Date");
}
})
})
http://jsfiddle.net/GuqJF/1/