We Keep Coding

How to disable the submit button in form using Validation in Kendo UI

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>

Do nothing on empty input - combinate with dynamic action on 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");
}
});
});

why form is submitted while new window is open?

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;
}
})

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();
});
});

jquery find input before button

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/