I need the submit button to be active only if all the fields and filled/selected.
I saw a couple of examples but don’t know how to do it!!
$(document).ready(function()
{
$('.envia').prop('disabled',true);
$('#matricula').on('change', function ()
{
$('#envia').prop('disabled', !$(this).val());
}).trigger('change');
});
$(document).ready(function()
{
$('.envia').prop('disabled',true);
$('#peca').on('change', function ()
{
$('#envia').prop('disabled', !$(this).val());
}).trigger('change');
});
$(document).ready(function()
{
$('.envia').prop('disabled',true);
$('#quilometros').keyup(function()
{
$('#envia').prop('disabled', !$(this).val());
}).trigger('change');
});
$(document).ready(function()
{
$('.envia').prop('disabled',true);
$('#data').keyup(function()
{
$('#envia').prop('disabled', !$(this).val());
}).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form action="#">
<select id="matricula">
<option></option>
<option value="1">Matricula 1</option>
<option value="2">Matricula 2</option>
</select>
<select id="peca">
<option></option>
<option value="1">Peca 1</option>
<option value="2">Peca 2</option>
</select>
<input type="text" id="quilometros">
<input type="text" id="data">
<input type="submit" id = "envia" value="ok"></input>
</form>
This help you :
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
window.onload = fun;
function fun(){
var matr = $("#matricula").val();
var peca = $("#peca").val();
var txt1 = $("#data").val();
var txt2 = $("#quilometros").val();
if(matr.length==0 || peca.length==0||txt1.length==0||txt2.length==0)
$("#envia").prop("disabled",true);
else
$("#envia").prop("disabled",false);
}
</script>
<form action="#">
<select id="matricula" onchange="fun()">
<option></option>
<option value="1">Matricula 1</option>
<option value="2">Matricula 2</option>
</select>
<select id="peca" onchange="fun()">
<option></option>
<option value="1">Peca 1</option>
<option value="2">Peca 2</option>
</select>
<input type="text" id="quilometros" oninput="fun()">
<input type="text" id="data" oninput="fun()">
<input type="submit" id = "envia" value="ok">
</form>
</body>
</html>
The problem you have is you are setting disabled based on individual fields without checking the state of all the others.
you can use one event handler for all but you also need to check all controls each time
$(function(){
// pseudo selector `:input` will match all form controls
var $inputs = $('#form-id :input').on('change input',validate);
function validate(){
var inValid = $inputs.filter(function(){
return !this.value;
}).length;
$('#envia').prop('disabled', inValid );
}
// also call function on page load
validate();
});
Here I'm using filter() to check length of element collection where value is not set
Related
My jquery code is having two dropdown boxes,one containing country and the other one holds currency.so here i want that whenever a country is selected in the box it will trigger a change function that will perform some comparison using if-else and will select the currency in the other dropdown and leaving it as 'disabled' to true.Below is my code for the same:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".select").change(function () {
debugger;
var c = $('#country :selected').text();
if (c == 'india') {
$('select[name="currency"]').find('option[value="1"]').attr("selected", true);
document.getElementById('disable').disabled = true;
}
else
{
$('select[name="currency"]').find('option[value="2"]').attr("selected", true);
document.getElementById('disable').disabled = true;
}
});
});
//$(function () {
// var select = $('select.select');
// select.change(function () {
// select.not(this).val(this.value);
// document.getElementById("disable").disabled = true;
// });
//});
</script>
</head>
<body>
<form>
<select name="country" id="country" class="select">
<option value="">Select</option>
<option value="1">india</option>
<option value="2">America</option>
</select>
<select name="currency" id="disable" class="select">
<option value="">Select</option>
<option value="1">INR</option>
<option value="2">DOLLAR</option>
</select>
<br><br>
</form>
</body>
</html>
but now the problem is when i select india it shows IR which is ok and then when i select America,it shows Doller and finally the problem comes now,when i again change the country back to india the change function is not called at all and dollar gets remain selected and disabled.Fix this it would be a great help!
Use .prop instead of .attr
With .attr, both the options have selected attribute set hence browser fail to make out which option to be set as selected.
From docs, To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method. (.attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior.)
$(document).ready(function() {
$(".select").change(function() {
var c = $('#country :selected').text();
if (c == 'india') {
$('select[name="currency"]').find('option[value="1"]').prop("selected", true);
} else {
$('select[name="currency"]').find('option[value="2"]').prop("selected", true);
}
document.getElementById('disable').disabled = true;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
<select name="country" id="country" class="select">
<option value="">Select</option>
<option value="1">india</option>
<option value="2">America</option>
</select>
<select name="currency" id="disable" class="select">
<option value="">Select</option>
<option value="1">INR</option>
<option value="2">DOLLAR</option>
</select>
<br>
<br>
</form>
Since the values on both select are the same. You can easily set the value of the second select based on the first.
$(function() {
$('.select').on('change',function() {
var val = $(this).find(':selected').val();
$('[name=currency]').val( val ).attr('disabled',true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select name="country" id="country" class="select">
<option value="">Select</option>
<option value="1">india</option>
<option value="2">America</option>
</select>
<select name="currency">
<option value=""> </option>
<option value="1">INR</option>
<option value="2">DOLLAR</option>
</select>
</form>
To complete the above answer you can use the "$" jquery selector instead of document.getElementById
Plus note you can use .prop('disabled', false);
too, like this :
$(document).ready(function() {
$(".select").change(function() {
var c = $('#country :selected').text();
if (c == 'india') {
$('select[name="currency"]').find('option[value="1"]').prop("selected", true);
} else {
$('select[name="currency"]').find('option[value="2"]').prop("selected", true);
}
$(#'disable').prop('disabled', true);
});
});
I tried to find a solution with the stackoverflow search but I did not understand what I found.
Basically I want to have a List from which I can choose a value, which changes a link from the button. I think I need Javascript for it, so I want to ask you, how the code would look like?
EDIT:
So basically i want choose one option of the select, and every option has an own link to another html page. If i click on a button the html page of the chosen option opens. How do I do it with Java Script?
<form action="select.html">
<select name="Bundesländer" size="16">
<option selected>Baden-Würtemberg</option>
<option>Bayern</option>
<option>Berlin</option>
<option>Brandenburg</option>
<option>Bremen</option>
<option>Hamburg</option>
<option>Hessen</option>
<option>Mecklenburg Vorpoomern</option>
<option>Niedersachsen</option>
<option>NRW</option>
<option>Rheinland</option>
<option>Saarland</option>
<option>Sachsen</option>
<option>Sachsen-Anhalt</option>
<option>Schleswig-Holstein</option>
<option>Thüringen</option>
</select>
</form>
Just check it. Hope this is what you want.
function selectFunction() {
var x = document.getElementById("selectopt").value;
document.getElementById("mylink").innerHTML = x;
document.getElementById("mylink").href = "http://www." + x + ".com";
}
<form action="select.html">
<select id="selectopt" onchange="selectFunction(this);" name="Bundesländer" size="16">
<option selected>Baden-Würtemberg</option>
<option>Bayern</option>
<option>Berlin</option>
<option>Brandenburg</option>
<option>Bremen</option>
<option>Hamburg</option>
<option>Hessen</option>
<option>Mecklenburg Vorpoomern</option>
<option>Niedersachsen</option>
<option>NRW</option>
<option>Rheinland</option>
<option>Saarland</option>
<option>Sachsen</option>
<option>Sachsen-Anhalt</option>
<option>Schleswig-Holstein</option>
<option>Thüringen</option>
</select>
</form>
<a id="mylink" style="position:absolute;top:0;right:0;" href="http://google.com">Link</a>
You can use this code:
<script type="text/javascript">
function redirect(select) {
window.location = select.options[select.selectedIndex].getAttribute('data-link');
}
</script>
<form action="select.html">
<select name="Bundesländer" size="16" onChange="redirect(this)">
<option data-link="http://www.google.fr/" selected>Baden-Würtemberg</option>
<option data-link="http://www.google.com/">Bayern</option>
<option data-link="http://www.google.de/">Berlin</option>
<option data-link="http://www.google.it/">Brandenburg</option>
<option data-link="http://www.google.be/">Bremen</option>
<option data-link="http://www.google.be/">Hamburg</option>
<option data-link="http://www.google.be/">Hessen</option>
<option data-link="http://www.google.be/">Mecklenburg Vorpoomern</option>
<option data-link="http://www.google.be/">Niedersachsen</option>
<option data-link="http://www.google.be/">NRW</option>
<option data-link="http://www.google.be/">Rheinland</option>
<option data-link="http://www.google.be/">Saarland</option>
<option data-link="http://www.google.be/">Sachsen</option>
<option data-link="http://www.google.be/">Sachsen-Anhalt</option>
<option data-link="http://www.google.be/">Schleswig-Holstein</option>
<option data-link="http://www.google.be/">Thüringen</option>
</select>
</form>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('select').change(function () {
$('#btn').attr('url_value', $(this).val());
});
$('#btn').click(function () {
window.open($(this).attr('url_value'));
// alert($(this).attr('url_value'))
});
});
</script>
<body>
<form >
<input type="button" value="Open Selected" id="btn" url_value=""/>
<select name="Bundes" >
<option selected>Baden-</option>
<option>http://www.w3schools.com</option>
<option>http://www.gmail.com</option>
<option>Brandenburg</option>
<option>Bremen</option>
<option>Hamburg</option>
<option>Hessen</option>
<option>Mecklenburg </option>
<option>Niedersachsen</option>
<option>NRW</option>
<option>test</option>
<option>Saarland</option>
<option>Sachsen</option>
<option>Sachsen-</option>
<option>Schleswig-Holstein</option>
<option>Thüringen</option>
</select>
</form>
</body>
</html>
I think you want to change the action in the form based on selected option.
Use the code bellow:
<!DOCTYPE html>
<html>
<body>
<form action="Bayern.html" id="form" name="form" accept-charset="UTF-8">
<input type="submit">
</form>
<select id="dropwdown" name="dropwdown" onchange="chgAction();">
<option selected>Bayern</option>
<option>Berlin</option>
<option>Brandenburg</option>
<option>Bremen</option>
<option>Hamburg</option>
<option>Hessen</option>
<option>Mecklenburg Vorpoomern</option>
<option>Niedersachsen</option>
<option>NRW</option>
<option>Rheinland</option>
<option>Saarland</option>
<option>Sachsen</option>
<option>Sachsen-Anhalt</option>
<option>Schleswig-Holstein</option>
<option>Thüringen</option>
</select>
<script>
function chgAction()
{
var selectedOption = document.getElementById("dropwdown").value;
if(selectedOption == "Hessen" ) {
document.getElementById('form').action = "Hessen.html";
}
else if(selectedOption == "NRW" ) {
document.getElementById('form').action = "NRW.html";
}
//Apply the same logic for each option ...
}
</script>
</body>
</html>
The name of my select option property is populated dynamically.
On submit my form I need to know if all my forams selects filled ...
How can I do this?
I would also like to take the mouse cursor to the select that was not filled.
<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#teste").click(function () {
a = $("select[name='sel[]'] option:selected").length;
alert(a);
});
});
</script>
<title>
</title>
</head>
<form>
<select name="sel[0]">
<option value="teste"></option>
<option value="teste">1234</option>
<option value="teste">1234</option>
<option value="teste">1234</option>
</select>
<br />
<br />
<br />
<select name="sel[1]">
<option value="teste"></option>
<option value="teste">1234</option>
<option value="teste">1234</option>
<option value="teste">1234</option>
</select>
... Many others
<input type="button" id="teste" value="TESTAR">
</form>
</html>
Give your default option a value of -1 and provide a common class name for these options(Which is efficient that attribute starts with selector).
Try:
HTML:
<form>
<select name="sel[0]" class="sel">
<option value="-1"></option>
<option value="teste">1234</option>
<option value="teste">1234</option>
<option value="teste">1234</option>
</select>
<br />
<br />
<br />
<select name="sel[1]" class="sel">
<option value="-1"></option>
<option value="teste">1234</option>
<option value="teste">1234</option>
<option value="teste">1234</option>
</select>
<input type="button" id="teste" value="TESTAR">
JS:
$(document).ready(function () {
$("#teste").click(function () {
$(".sel").each(function () {
if (this.value == -1) { //If you are not providing value check for this.selectedIndex == 0
$(this).focus(); //set the focus
return false; //and break out of the loop
}
});
});
});
Fiddle
You have to set the variable like this var a;.
There is no element with select[name='sel[]'], you have a number inside of it, you could use name*= or name^= to say name contains or name starts with sel respectively
JSFIDDLE DEMO
$("#teste").click(function () {
var a = $("select[name^='sel'] option:selected");
var count = 0;
$.each(a, function () {
if ($(this).text().length) {
count++;
}
});
alert(count);
});
Select acts like the usual input when submitting form. So you can find selects with empty value:
$("select[value=]").first().focus()
Or iterate over all form elements, checking its value and type.
http://jsbin.com/UduNaGOh/1/edit?html,output
$(document).ready(function () {
$("#teste").click(function () {
var test = true;
$("#myform select").each(function(){
var select = $(this);
if(select.val() == 'none') {
select.addClass('fail');
select.focus();
test = false;
} else {
select.removeClass('fail');
}
});
if(test){
alert('well done');
$("#myform select").removeClass('fail');
// do your send stuff ...
}
});
});
I'm changing the class to style the empty selects.
So here is the css:
#myform > select.fail { background: red }
If you just need the number of empty selects you can use:
$('select:has(option[value="none"]:selected)').length
i have a form on my site to generate url and it works well but the user should wait until the whole page is loaded to be able to use it properly , i think that happens because i use window.onload and i should use $(document).ready instead of it , but i couldnt replace it i need someone to help me with it
<script type='text/javascript'>
window.onload = function() {
document.forms['filterform'].onsubmit = filterLoad;
};
function filterLoad() {
var url,
colourSel = this.elements['department'],
shapeSel = this.elements['country'];
url = ( colourSel.options[colourSel.selectedIndex].value ) + ( shapeSel.options[shapeSel.selectedIndex].value );
window.location.href = url;
return false;
}
</script>
<form id="searchform" name="filterform">
<select class="chosen" name="department" id="searchfield" >
<option value="http://www.mysite.com/">choise 1</option>
<option value="http://www.mysite.com/">choise 1</option>
</select>
<select class="chosen" name="country" id="choose">
<option value="?qatar=show&action=Filter">qatar</option>
<option value="?ksa=show&action=Filter">ksa</option>
</select>
<label for="search"><button class="submit" onclick="filterLoad()" /></button></label>
</form>
I'd get rid of all the extra javascript to assign the function and just use:
<form id="searchform" name="filterform" onsubmit="filterLoad">
You have the right idea, I would just call that function though when the form is submitted, and remove the on click event from the submit button.
Try this :
<script type='text/javascript'>
function filterLoad() {
var url,
colourSel = this.elements['department'],
shapeSel = this.elements['country'];
url = (colourSel.options[colourSel.selectedIndex].value) + (shapeSel.options[shapeSel.selectedIndex].value);
window.location.href = url;
return false;
}
</script>
<form id="searchform" name="filterform" onSubmit="return filterLoad();" >
<select class="chosen" name="department" id="searchfield" >
<option value="http://www.mysite.com/">choise 1</option>
<option value="http://www.mysite.com/">choise 1</option>
</select>
<select class="chosen" name="country" id="choose">
<option value="?qatar=show&action=Filter">qatar</option>
<option value="?ksa=show&action=Filter">ksa</option>
</select>
<label for="search"><button class="submit" /></button></label>
</form>
I am having problems trying to add a parameter to a URL using jQuery based off of the value of a Select element. Here is my code so far:
<script type="text/javascript">
$(document).ready(function () {
$("#sel-1").change(function() {
$(this).closest("form").submit();
});
var input = $("<input>").attr("type", "hidden").attr("name", "state").val($("#sel-1").val());
$('.start-form').append($(input));
});
</script>
<form action="process.php" class="start-form">
<fieldset>
<div class="row">
<label for="sel-1">Select <strong>State</strong></label>
<select id="sel-1">
<option value="Select">Select</option>
<option value="AK">AK</option>
<option value="CA">CA</option>
<option value="TX">TX</option>
</select>
</div>
<input type="submit" class="hidden"/>
</fieldset>
</form>
For some reason no matter which option I select, the URL will become process.php?state=Select. What I need it to do is become process.php?state=TX or whatever option the user selects.
Any help is greatly appreciated!
You need to update the value of the hidden input:
$(document).ready(function () {
$("#sel-1").change(function() {
$('[name=state]').val($('#sel-1').val());
$(this).closest("form").submit();
});
example here: http://jsfiddle.net/wKvLm/1/show/
Also... with your current code there is no need to create that input via JS. you could defined it within your HTML like this:
<script type="text/javascript">
$(document).ready(function () {
$("#sel-1").change(function() {
$('[name=state]').val($('#sel-1').val());
$(this).closest("form").submit();
});
});
</script>
<form action="process.php" class="start-form">
<fieldset>
<div class="row">
<label for="sel-1">Select <strong>State</strong></label>
<select id="sel-1">
<option value="Select">Select</option>
<option value="AK">AK</option>
<option value="CA">CA</option>
<option value="TX">TX</option>
</select>
</div>
<input type="hidden" name="state" value="Select"/>
<input type="submit" class="hidden"/>
</fieldset>
</form>
working example here: http://jsfiddle.net/wKvLm/2/show/
This is occurring because it gets the value on page load.
Try:
<script type="text/javascript">
$(document).ready(function () {
$("#sel-1").change(function() {
if ($("#sel-1").val() != "Select") {
var input = $("<input>").attr("type", "hidden").attr("name", "state").val($("#sel-1").val());
$('.start-form').append($(input));
$(this).closest("form").submit();
}
});
});
</script>
try this.
<script type="text/javascript">
$(document).ready(function () {
$("#sel-1").change(function() {
var input = $("<input>").attr("type", "hidden").attr("name", "state").val($("#sel-1").val());
$('.start-form').append($(input));
$(this).closest("form").submit();
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#sel-1").change(function() {
var input = $("<input>").attr("type", "hidden").attr("name", "state").val($("#sel-1").val());
$('.start-form').append($(input));
$(this).closest("form").submit();
});
});
</script>
You should set variable data in the on change event.
What we are doing here is adding the a new input hidden field with the drop the value when the drop-down is changed. Then appending the input field and submit the form.
A simple way will be to use jQuery's serialize method:
<form action="process.php" class="start-form">
<fieldset>
<div class="row">
<label for="sel-1">Select <strong>State</strong></label>
<select id="sel-1">
<option value="Select">Select</option>
<option value="AK">AK</option>
<option value="CA">CA</option>
<option value="TX">TX</option>
</select>
</div>
<input type="submit" onlick="alert($(this).closest('form').serialize()); return false;" class="hidden"/>
</fieldset>
</form>