I am creating a form:
<input type="checkbox" id="chk1">1<select name="sel1" id="sel1" class="sel">
<option value="..."></option>
<option value="a">a</option>
<option value="b">b</option>
<input type="text" name="txt1" id="txt1" class="txt"/><br />
<input type="checkbox" id="chk2">2<select name="sel2" id="sel2" class="sel">
<option value="..."></option>
<option value="a">a</option>
<option value="b">b</option>
<input type="text" name="txt2" id="txt2" class="txt"/><br/>
<input type="checkbox" id="chk3">3<select name="sel3" id="sel3" class="sel">
<option value="..."></option>
<option value="a">a</option>
<option value="b">b</option>
<input type="text" name="txt3" id="txt3" class="txt"/><br />
<button type="submit" class="btn btn-default">Submit</button>
And I am trying to create a block on the submit button so that if a checkbox is checked: the textbox can't be empty, and the dropdown has to have a different value than '...' If either of those is the case, user clicks 'submit' and nothing should happen...if all is satisfied though, then they click submit, and it goes through.
Javascript/jQuery logic I'm aiming for is something like
if ($(":checkbox:checked").length != 0) {
if ($(".txt").val === ("")) {
return false;
}
else {return true}
if ($(".sel").val === "...") {
return false;
}
else {return true}
}
DEMO
First of all I would like to correct your html and do wrap each checkbox,input, select in a group element so that you can easily get its corresponding values. You select had syntax error and select is not a self closing tag like <select/> instead it is <select>..</select>. Hence below is the updated code:
<form id="frmDetails">
<div class="container"> <!--wrap them in each container-->
<input type="checkbox" id="chk1" value="1"/>
<select name="sel1" id="sel1" class="sel">
<option value="0">Select</option>
<option value="a">a</option>
<option value="b">b</option>
</select>
<input type="text" name="txt1" id="txt1" class="txt"/><br />
</div>
<div class="container">
<input type="checkbox" value="2" id="chk2"/>
<select name="sel2" id="sel2" class="sel">
<option value="0">Select</option>
<option value="a">a</option>
<option value="b">b</option>
</select>
<input type="text" name="txt2" id="txt2" class="txt"/><br/>
</div>
<div class="container">
<input type="checkbox" id="chk3" value="3"/>
<select name="sel3" id="sel3" class="sel">
<option value="0">Select</option>
<option value="a">a</option>
<option value="b">b</option>
</select>
<input type="text" name="txt3" id="txt3" class="txt"/><br />
</div>
<button type="submit" class="btn submit btn-default">Submit</button>
</form>
Then your js would be as below:
var valid; //A global variable to check the validation
function validate(){
valid=true; //set it to true at beginning
$.each($('#frmDetails input:checkbox'),function(){
//loop through each checkbox
if($(this).is(":checked")) //if it is checked
{
var selected=$(this).siblings('select').find('option:selected').val()
//get selected value of its select element
var text=$(this).siblings('input').val();
//get value entered in its corresponding textbox
if(text=="" || selected=="0") if text="" or selected value=0
{
valid=false;//set valid to false
return valid;//return it
}
}
});
return valid; //else this will be true
}
$(".submit").on('click',function(e){
e.preventDefault(); //prevent default action of submit
if(validate()) //validate returns true or false
{
$("#frmDetails").submit(); //submit the form if valid
}
else
{
alert('Form is invalid, You cannot submit it');
//do whatever your want here
}
});
event.preventDefault() will do that blocking for you. It will prevent the form to get submitted. Instead of returning false like native javascript. Collect that returning result in a cache variable then execute event.preventDefault() when it evaluated to false.
use Jquery to prevent form submitting
$("button[type='submit']").on("click", function(e){
e.preventDefault();
if ($(":checkbox:checked").length != 0) {
if ($(".txt").val === ("")) {
return false;
}
else {$("#myForm").submit();
}
if ($(".sel").val === "...") {
return false;
}
else {$("#myForm").submit();}
}
});
Related
I want to update values of two dropdowns as shown in attached image, have a look on html code for the same(using same css proprty for both select)
<div class="container-fluid" role="main" style="margin-top: 100px;">
<form id="allPhotoForm">
<fieldset>
<legend>
Total Pending photos : ${count} <input type="button"
id="allPhotoFormBtn" class="btn btn-primary btn-xs pull-right"
value="Update All">
</legend>
</fieldset>
<div class="checkbox">
<label> <input type="checkbox" class="checkbox1"
id="selecctall"> Select All
</label>
</div>
<select class="form-control" name="status" id="${imageId}">
<option value="APPROVED">Approved</option>
<option value="REJECTED">Rejected</option>
<option value="PENDING">Pending</option>
</select>
Reason : <span style="float: right;">
<select class="form-control" name="status">
<option value="Animal" id="animal">Animal</option>
<option value="Bad" id="bad">Bad</option>
<option value="Baby" id="baby">Baby</option>
<option value="Celebrity" id="celebrity">Celebrity</option>
<option value="Flower" id="flower">Flower</option>
<option value="God" id="god">God</option>
<option value="Good" id="good">Good</option>
<option value="Others" id="others">Others</option>
</select>
</span>
and
<div class="checkbox"><label> <input type="checkbox" class="checkbox1 status" value="id=${id}&objectId=${imageId}&status=&reason=">Check me out
</label>
</div>
AJAX code for the same is as follows which binds all input data and pushes to API
$('#allPhotoFormBtn').on(
"click",
function(event) {
event.preventDefault();
var allCheckBox = document.querySelectorAll('.status');
var data = [];
$(allCheckBox).each(
function(index) {
if ($(this).is(':checked')) {
var status = $(
$(this).parent().parent().prev())
.val();
data.push($(this).val().replace("status=",
"status=" + status));
}
});
$.ajax({
url : "/curation/updateAll",
data : {
'data' : data.join(',')
},
type : "POST",
success : function(response) {
if (response)
location.reload();
},
error : function(rs) {
console.log(rs);
}
})
});
I am able to fetch one drop down value successfully, but unable to fetch another one, below statement gives only one dropdown value but not both.
var status = $($(this).parent().parent().prev()).val();
You are searching all dropdowns in the DOM by the css class ".status" but, in your code, dropdowns have not css class but both a "name" attribute set to status. So either you change your dropdowns adding class="status" or you have to change the way you search for them in js.
By the way in html 4 having more elements with same name attribute is legit but not reccomended, in html 5 now is consider error.
In your case you can modify your html like this:
<select class="form-control" class="status" id="${imageId}">
<option value="APPROVED">Approved</option>
<option value="REJECTED">Rejected</option>
<option value="PENDING">Pending</option>
</select>
Reason : <span style="float: right;">
<select class="form-control" class="status">
<option value="Animal" id="animal">Animal</option>
<option value="Bad" id="bad">Bad</option>
<option value="Baby" id="baby">Baby</option>
<option value="Celebrity" id="celebrity">Celebrity</option>
<option value="Flower" id="flower">Flower</option>
<option value="God" id="god">God</option>
<option value="Good" id="good">Good</option>
<option value="Others" id="others">Others</option>
</select>
without changing your js.
I'm trying to limit the amount of checkboxes able to be checked according to what select option the user chooses i.e. option1 = 1 checkbox option 2 = 2 checkboxes and if they try to choose more then alert the user and .prop("checked", false).
but i just get weird stuff happening and i can't figure why please help!!
html:
<form>
<select onclick="systemSelected();" class="mySelectBox">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
<option value="5">option5</option>
</select>
</form>
<form onclick="limitCheckbox(userSelected);">
<input type="checkbox" name="box1">
<input type="checkbox" name="box2">
<input type="checkbox" name="box3">
<input type="checkbox" name="box4">
<input type="checkbox" name="box5">
</form>
javascript:
var userSelected = 0;
function systemSelected() {
$(".mySelectBox option").each(function(){
if ($(this.selected)) {
userSelected = parseInt($(".mySelectBox").val());
}
});
}
function limitCheckbox(userSystem) {
$("input[type=checkbox]").click(function(){
if($("input[type=checkbox]:checked".length > userSystem)) {
$(this).prop("checked", false);
alert("too many numbers");
} else if ($("input[type=checkbox]:checked".length === 0 )) {
alert("please select a game too play");
}
});
}
Don't use alerts (Why should a user feel stupid)
Use the disabled property (Make a user see & know)
var $ckb = $('[name*=box]'),
$sel = $('.mySelectBox');
function ckkk () {
var ckd = $ckb.filter(":checked").length,
max = parseInt($sel.val(), 10);
if(ckd > max) $ckb.prop({checked:false, disabled:false});
else $ckb.not(":checked").prop({disabled: ckd >= max});
}
$ckb.add($sel).on("change", ckkk);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="mySelectBox">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
<option value="5">option5</option>
</select>
<input type="checkbox" name="box1">
<input type="checkbox" name="box2">
<input type="checkbox" name="box3">
<input type="checkbox" name="box4">
<input type="checkbox" name="box5">
use $("input[type=checkbox]").on('change',function(){ selector which will fire event on every change of checkbox. And you can manage your cases with conditions in it.
Please check below snippet.
var userSelected = 0;
$("input[type=checkbox]").on('change',function(){
if($("input[type=checkbox]:checked").length > parseInt($(".mySelectBox").val())) {
$(this).prop("checked", false);
alert("too many numbers");
} else if ($("input[type=checkbox]:checked").length === 0 ) {
alert("please select a game too play");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select class="mySelectBox">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
<option value="5">option5</option>
</select>
</form>
<form>
<input type="checkbox" name="box1">
<input type="checkbox" name="box2">
<input type="checkbox" name="box3">
<input type="checkbox" name="box4">
<input type="checkbox" name="box5">
</form>
$('input:checkbox').change(function() {
var number = $('.mySelectBox option:selected').val();
if ($('input:checkbox:checked').length > number) {
alert('more than selected')
$(this).prop('checked', false);//dont check the click checkbox
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select class="mySelectBox">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
<option value="5">option5</option>
</select>
</form>
<form>
<input type="checkbox" name="box1">
<input type="checkbox" name="box2">
<input type="checkbox" name="box3">
<input type="checkbox" name="box4">
<input type="checkbox" name="box5">
</form>
I currently have the following Javascript running on my website, but I really feel like it is really redundant. So I am trying to condense it, since they are basically all the same thing, except different numbers appended. Is there a way I can wildcard the string?
$(document).ready(function() {
$('#type_1').change(function(){
if($(this).attr('value') == "dropdown"){
$('#dropdown_list_1').show();
}else {
$('#dropdown_list_1').hide();
}
});
$('#type_2').change(function(){
if($(this).attr('value') == "dropdown"){
$('#dropdown_list_2').show();
}else {
$('#dropdown_list_2').hide();
}
});
$('#type_3').change(function(){
if($(this).attr('value') == "dropdown"){
$('#dropdown_list_3').show();
}else {
$('#dropdown_list_3').hide();
}
});
$('#type_4').change(function(){
if($(this).attr('value') == "dropdown"){
$('#dropdown_list_4').show();
}else {
$('#dropdown_list_4').hide();
}
});
$('#type_5').change(function(){
if($(this).attr('value') == "dropdown"){
$('#dropdown_list_5').show();
}else {
$('#dropdown_list_5').hide();
}
});
});
This is what I have tried so far, but I couldn't get it to work. I believe it's because the for loop only runs once, and not on each event.
for(var i = 1; i <= 15; i++){
$('#type_'+i).change(function(){
if($(this).attr('value') == "dropdown"){
$('#dropdown_list_'+i).show();
}else {
$('#dropdown_list_'+i).hide();
}
});
}
EDIT:
I uploaded a JSFiddle if you want to test the code out.
HTML:
<form>
<hr class="separate" />
<!-- Question 1 -->
<h3 class="question_title">Survey Question 1</h3>
<label for="question_1">Question 1</label>
<input type="text" name="question_1" value="" class="question_field" id="question_1">
<label for="type_1">Type for Question 1</label>
<div class="option_field">
<select name="type_1" id="type_1" onchange="" size="1">
<option value="oneline">One Line Text Field</option>
<option value="freeresponse">Free Response Text Field</option>
<option value="rating10">Rating (1-10)</option>
<option value="rating4">Poor, Fair, Good, Excellent</option>
<option value="dropdown">Drop-Down Menu</option>
</select>
</div>
<div id="dropdown_list_1" class="dropdown_list">
<label for="question_1_list">Question 1 List</label><input type="text" name="question_1_list" value="" class="question_list" id="question_1_list" placeholder="Option A,Option B,Option C,Option D">
</div>
<hr class="separate" />
<!-- Question 2 -->
<h3 class="question_title">Survey Question 2</h3>
<label for="question_2">Question 2</label><input type="text" name="question_2" value="" class="question_field" id="question_2">
<label for="type_2">Type for Question 2</label>
<div class="option_field">
<select name="type_2" id="type_2" onchange="" size="1">
<option value="oneline">One Line Text Field</option>
<option value="freeresponse">Free Response Text Field</option>
<option value="rating20">Rating (1-10)</option>
<option value="rating4">Poor, Fair, Good, Excellent</option>
<option value="dropdown">Drop-Down Menu</option>
</select>
</div>
<div id="dropdown_list_2" class="dropdown_list">
<label for="question_2_list">Question 2 List</label><input type="text" name="question_2_list" value="" class="question_list" id="question_2_list" placeholder="Option A,Option B,Option C,Option D">
</div>
<hr class="separate" />
<!-- Question 3 -->
<h3 class="question_title">Survey Question 3</h3>
<label for="question_3">Question 3</label><input type="text" name="question_3" value="" class="question_field" id="question_3">
<label for="type_3">Type for Question 3</label>
<div class="option_field">
<select name="type_3" id="type_3" onchange="" size="1">
<option value="oneline">One Line Text Field</option>
<option value="freeresponse">Free Response Text Field</option>
<option value="rating30">Rating (1-10)</option>
<option value="rating4">Poor, Fair, Good, Excellent</option>
<option value="dropdown">Drop-Down Menu</option>
</select>
</div>
<div id="dropdown_list_3" class="dropdown_list">
<label for="question_3_list">Question 3 List</label><input type="text" name="question_3_list" value="" class="question_list" id="question_3_list" placeholder="Option A,Option B,Option C,Option D">
</div>
</form>
Give your <select> a class, e.g.
<select name="type_2" class="type" size="1">
Then use DOM traversal functions to find the associated dropdown DIV from the type SELECT:
$(document).ready(function () {
$(".dropdown_list").hide();
$(".type").change(function () {
$(this).closest(".option_field").next(".dropdown_list")
.toggle($(this).val() == "dropdown");
});
});
DEMO
Also, you should use .val() to get an input value, not .attr("value").
I have problem with script who filled input field when one value is less than 4. When the value is less than 4 the script filling field but the value is not selected, so when I'm going to next step I have no value in this field. When the value is greater than 4 everything is ok (the value is also filling by jquery).
This is my code:
function compute() {
if( parseInt($("#finish_day").val()) < 4 ) {
$('#return_car').children('#return_car option[value=' + $('#get_car').val() + ']').attr('selected', true).siblings().attr('disabled', true);
if ($('#return_car').val()) $('#return_car').change();
}
else {
$('#get_car > option, #return_car > option').prop('disabled', false);
$('#three_day').hide(2000, function () {
$(this).remove();
});
}
}
$('select#get_car').change(compute);
$('input#finish_day').change(compute);
HTML code:
<form>
<fieldset>
<div class="type-select">
<label for="get_car">Miasto wynajmu: *</label>
<select id="get_car" name="rent-a-car-next[get_car]" class="select">
<option value="">---</option>
<option value="Katowice">Katowice</option>
<option value="Kraków">Kraków</option>
<option value="Warszawa">Warszawa</option>
<option value="Wrocław">Wrocław</option>
<option value="Gdańsk">Gdańsk</option>
</select>
</div>
<div class="type-select">
<label for="return_car">Miasto zwrotu: </label>
<select id="return_car" name="rent-a-car-next[return_car]" class="select">
<option value="">---</option>
<option value="Katowice">Katowice</option>
<option value="Kraków">Kraków</option>
<option value="Warszawa">Warszawa</option>
<option value="Wrocław">Wrocław</option>
<option value="Gdańsk">Gdańsk</option>
</select>
</div>
<div class="type-text">
<label for="finish_day">Ilość dni wynajmu: </label>
<input type="text" size="20" id="finish_day" name="rent-a-car-next[finish_day]" value="" readonly="readonly" />
</div>
<div class="type-button">
<input type="submit" name="rent-a-car-next[step-2-next]" class="button submit" value="Kolejny krok" />
</div>
</fieldset>
</form>
Where is the problem? Thanks for any help
Problem is solved:
$('#return_car').children('option[value=' + $('#get_car').val() + ']').prop('disabled', false).attr('selected', true).siblings().prop('disabled', true);
Regards
I'm trying to calculate a form based on values provided, I've written the script but it says missing; before statement
Here's my code if anyone can see the error please help point it out.
<script type="text/javascript">
function calc(theForm) {
var myEquip1 = document.Edit.EQup1.value;
var myEquip2 = document.Edit.EQup2.value;
Var myFixedPrice = document.Edit.InitialPrice.value;
Var myEquip1Price = document.Edit.EQup1Price.value;
Var myEquip2Price = document.Edit.EQup2Price.value;
if (myEquip1 > 1)
{
var myEquip1Total = (myEquip1*myEquip1Price) - (myEquip1Price);
}
else
{
var myEquip1Total = (myEquip1*myEquip1Price)-(myEquip1Price);
}
if (myEquip2 > 1)
{
var myEquip2Total = (myEquip2*myEquip2Price)-(myEquip2Price);
}
else
{
var myEquip2Total = (myEquip2*myEquip2Price)-(myEquip2Price);
}
theForm.GrandTotal.value = (myEquip2Total+myEquip1Total+myFixedPrice)
}
</script>
The HTML is below i'm sure I've done something wrong but i can see it.
<form name="Edit" method="post" action="mypageprocess">
<p><label for="EQup1">How many Branches?</label><br />
<select name="EQup1" onChange="calc(this.form)" id="EQup1"/>
<option value="0">Please select</option>
<option value="1" >One</option>
<option value="2" >Two</option>
<option value="3" >Three</option>
<option value="4" >Four</option>
<option value="5" >Five</option>
</select> x <strong>$550.00</strong>
</p>
<p><label for="EQup2">How many Satellits?</label><br />
<select name="EQup2" onChange="calc(this.form)" id="EQup2"/>
<option value="0">Please select</option>
<option value="1" >One</option>
<option value="2" >Two</option>
<option value="3" >Three</option>
<option value="4" >Four</option>
<option value="5" >Five</option>
</select> x <strong>$440.00 </strong>
</p>
<input type="text" onfocus="this.blur();" name="GrandTotal" size="10" readonly="readonly"/>
<input type="hidden" name="InitialPrice" value="660" />
<input type="hidden" name="EQup1Price" value="550" />
<input type="hidden" name="EQup2Price" value="440" />
</form>
Thank you
JavaScript is case sensitive. Var won't work, use var.
Both of your <select> elements are being closed prematurely as if they have no inner content.