Hide Base on select (multiple)

Hide Base on select (multiple) - javascript

I want to hide and show input just closest select
script
$(function() {
var inputToHide = $('div[id=other]');
$('#showhide]').on('change', function() {
var selected = $('#other option:selected').val();
if (selected === "other") {
$(this).closest('div[id=other]').show();
} else {
$(this).closest('div[id=other]').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
<span><i class="fa fa-globe"></i></span>
<select name="web" class="form-control" id="showhide">
<option value="" selected="selected">Select ...</option>
<option value="car">car</option>
<option value="train">train</option>
<option value="other">other</option>
</select>
</div>
Hide this if not "other" selected
<div class="input-group" id="other">
<span><i class="fa fa-play"></i></span>
<input type="text" name="other" class="form-control" />
</div>
<br>
<br>
<br>
<br>
<br>
<div class="input-group">
<span><i class="fa fa-globe"></i></span>
<select name="web" class="form-control" id="showhide">
<option value="" selected="selected">Select ...</option>
<option value="car">car</option>
<option value="train">train</option>
<option value="other">other</option>
</select>
</div>
Hide this if not "other" selected
<div class="input-group" id="other">
<span><i class="fa fa-play"></i></span>
<input type="text" name="other" class="form-control" />
</div>
end html
How to do this?

There were a lot of incoherences when I reviewed your code.
You use the same id multiple times. You should, at all cost, always try to avoid that! read here
Also, I was not sure what you were aiming to do. Was it to show the input when the selected option is other? Your code was a little confusing about that.
So I fixed the problems, and acted as you wanted the input to be shown if the selected option was "Other". (note that inputs are hidden on startup, instead of shown)
The code :
<div class="input-group">
<span><i class="fa fa-globe"></i></span>
<select name="web" class="form-control showhide">
<option value="" selected="selected">Select ...</option>
<option value="car">car</option>
<option value="train">train</option>
<option value="other">other</option>
</select>
</div>
<div class="input-group other">
<span><i class="fa fa-play"></i></span>
<input type="text" name="other" class="form-control" />
</div>
<br>
<div class="input-group">
<span><i class="fa fa-globe"></i></span>
<select name="web" class="form-control showhide">
<option value="" selected="selected">Select ...</option>
<option value="car">car</option>
<option value="train">train</option>
<option value="other">other</option>
</select>
</div>
<div class="input-group other">
<span><i class="fa fa-play"></i></span>
<input type="text" name="other" class="form-control" />
</div>
html
$(function() {
$('.other').hide();
$('.showhide').change(function() {
var selected = $(this).find("option:selected").val();
if (selected === "other") {
$(this).parent().next(".other").show();
} else {
$(this).parent().next(".other").hide();
}
});
});
js
jsfiddle

First i can see that you have identifiers problem, you should use unique ids in same document, when you solve that you can improve your script to be like following example and it will work.
Hope this helps.
$(function() {
$('body').on('change', '#showhide', function() {
if ($(this).val() == "other")
$('#other').show();
else
$('#other').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
<span><i class="fa fa-globe"></i></span>
<select name="web" class="form-control" id="showhide">
<option value="" selected="selected">Select ...</option>
<option value="car">car</option>
<option value="train">train</option>
<option value="other">other</option>
</select>
</div>
Hide this if not "other" selected
<div class="input-group" id="other">
<span><i class="fa fa-play"></i></span>
<input type="text" name="other" class="form-control" />
</div>

$(function() {
$('.other').hide();
$('.showhide').on('change', function() {
if ($(this).val() == "other") {
$(this).closest('.section').find('.other').show();
} else {
$(this).closest('.section').find('.other').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="section">
<div class="input-group">
<span><i class="fa fa-globe"></i></span>
<select name="web" class="form-control showhide">
<option value="" selected="selected">Select ...</option>
<option value="car">car</option>
<option value="train">train</option>
<option value="other">other</option>
</select>
</div>
<div class="input-group other">
<span><i class="fa fa-play"></i></span>
<input type="text" name="other" class="form-control" placeholder="first input"/>
</div>
</div>
<br/>
<br/>
<br/>
<div class="section">
<div class="input-group">
<span><i class="fa fa-globe"></i></span>
<select name="web" class="form-control showhide">
<option value="" selected="selected">Select ...</option>
<option value="car">car</option>
<option value="train">train</option>
<option value="other">other</option>
</select>
</div>
<div class="input-group other">
<span><i class="fa fa-play"></i></span>
<input type="text" name="other" class="form-control" placeholder="second input" />
</div>
</div>

Related

selecting only the element in the same div with jquery

how can i selec only the element in the same div with jquery
$('.to-show').hide();
$('#offset').on('change', function() {
if ($(this).val() == "Custom") {
$(this).closest('.wrapper').children('.to-show').toggle();
} else {
$('.to-show').hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="to-click">
<td class="value">
<select id="offset" class="" name="attribute_offset" data-attribute_name="attribute_offset" data-show_option_none="yes">
<option value="">Choose an option</option>
<option value="15" selected="selected" class="attached enabled">15</option>
<option value="Custom" class="attached enabled">Custom</option>
</select> </td>
</div>
<div class="to-show">
<div class="tc-cell tc-col-auto"><button type="button" class="button tm-section-link" data-title="Custom Offset" data-sectionid="61cc25f8bfe870.59019822">Custom Offset</button></div>
</div>
</div>
<div class="wrapper">
<div class="to-click">
<td class="value">
<select id="offset" class="" name="attribute_offset" data-attribute_name="attribute_offset" data-show_option_none="yes">
<option value="">Choose an option</option>
<option value="15" selected="selected" class="attached enabled">15</option>
<option value="Custom" class="attached enabled">Custom</option>
</select> </td>
</div>
<div class="to-show">
<div class="tc-cell tc-col-auto"><button type="button" class="button tm-section-link" data-title="Custom Offset" data-sectionid="61cc25f8bfe870.59019822">Custom Offset</button></div>
</div>
</div>
So this only work with first select option
How i can make it work with the second select option what i am missing here ?
i tried also $(this).closest('.wrapper').find('.to-show').toggle();
but that did not work
thank you

Having two elements with the same id is invalid html. Switch it to use class or another attribute. But you have a second problem with $('.to-show').hide();, it is always hiding both .to-show.
$('.to-show').hide();
$('.offset').on('change', function() {
if ($(this).val() == "Custom") {
$(this).closest('.wrapper').children('.to-show').toggle();
} else {
$(this).closest('.wrapper').children('.to-show').hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="to-click">
<td class="value">
<select id="offset" class="offset" name="attribute_offset" data-attribute_name="attribute_offset" data-show_option_none="yes">
<option value="">Choose an option</option>
<option value="15" selected="selected" class="attached enabled">15</option>
<option value="Custom" class="attached enabled">Custom</option>
</select> </td>
</div>
<div class="to-show">
<div class="tc-cell tc-col-auto"><button type="button" class="button tm-section-link" data-title="Custom Offset" data-sectionid="61cc25f8bfe870.59019822">Custom Offset</button></div>
</div>
</div>
<div class="wrapper">
<div class="to-click">
<td class="value">
<select id="offset" class="offset" name="attribute_offset" data-attribute_name="attribute_offset" data-show_option_none="yes">
<option value="">Choose an option</option>
<option value="15" selected="selected" class="attached enabled">15</option>
<option value="Custom" class="attached enabled">Custom</option>
</select> </td>
</div>
<div class="to-show">
<div class="tc-cell tc-col-auto"><button type="button" class="button tm-section-link" data-title="Custom Offset" data-sectionid="61cc25f8bfe870.59019822">Custom Offset</button></div>
</div>
</div>

HTML form validation - check if at least one dropdown is selected

I'm struggling with the following issue - I have an HTML form in which there are three select fields. Before submitting values, I want to make a form validation in which at least ONE of the four dropdowns should be selected. I have the following code but it keeps requiring all the dropdowns.
Link to the code: jsfiddle
Code - HTML
<div class="container">
<div class="row">
<div class="col-lg-12">
<form method="post" id="myform">
<div class="form-group ">
<label class="control-label " for="select">
Select a Choice
</label>
<select class="select form-control" id="select1" name="select1" required>
<option value="">---</option>
<option value="First Choice">1</option>
<option value="Second Choice">2</option>
<option value="Third Choice">3</option>
</select>
<select class="select form-control" id="select2" name="select2" required>
<option value="">---</option>
<option value="First Choice">a</option>
<option value="Second Choice">b</option>
<option value="Third Choice">c</option>
</select>
<select class="select form-control" id="select3" name="select3" required>
<option value="">---</option>
<option value="First Choice">X</option>
<option value="Second Choice">Y</option>
<option value="Third Choice">Z</option>
</select>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" id="sub" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
Code - JS:
$(document).ready(function () {
$('#sub').click(function() {
check = $(".select option:selected").length;
if(!check) {
alert("You must select an option from at least one dropdown");
return false;
}
});
});
Where I make a mistake in the code?

Take a look at this
jsfiddle example
You need to remove the "required" attribute and manage required values using JS because if you set all combobox to required you'll be forced to fill all of them.
<div class="container">
<div class="row">
<div class="col-lg-12">
<form method="post" id="myform">
<div class="form-group ">
<label class="control-label " for="select">
Select a Choice
</label>
<select class="select form-control" id="select1" name="select1">
<option selected disabled value="">---</option>
<option value="First Choice">1</option>
<option value="Second Choice">2</option>
<option value="Third Choice">3</option>
</select>
<select class="select form-control" id="select2" name="select2">
<option selected disabled value="">---</option>
<option value="First Choice">a</option>
<option value="Second Choice">b</option>
<option value="Third Choice">c</option>
</select>
<select class="select form-control" id="select3" name="select3">
<option selected disabled value="">---</option>
<option value="First Choice">X</option>
<option value="Second Choice">Y</option>
<option value="Third Choice">Z</option>
</select>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" id="sub" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
JS code
$(document).ready(function () {
$('#sub').click(function() {
check = $('option[disabled]:selected').length;
if(check == 3) {
alert("You must select an option from at least one dropdown");
return false;
}
});
});
Hope it helps you

First, you must delete the required on your select tags. Then, use something like this in the jquery part:
$(document).ready(function () {
$('#sub').click(function() {
var anySelected = false;
$(".select option:selected").each(function(){
if(!$(this).val() == ""){
anySelected = true;
}
});
if(!anySelected) {
alert("You must select an option from at least one dropdown");
return false;
}
});
});
Here is a working fiddle.
Hope it helps!

Bootstrap Popover closes itself

I'm currently working on a edit view. So I decided use a popover with a form on it. I'm using bootstrap v.3.0.0. The popover appear perfectly, however it closes automatically after about 6 - 8 seconds after. Follows the code:
<a class="driveEdit" href="#">
<i class="fa fa-pencil edit-drive" style="font-size: 1.3em;" data-toggle="popover" data-placement="left" rel="tooltip"></i>
</a>
<div id="popover-content" class="hide">
<!-- MyForm -->
<form id="tab" method="POST"
action="#routes.UiscsiController.editVirtualDrive()"
data-toggle="validator">
<div class="form-group">
<label for="login">Login</label> <input
type="text" id="login" maxlength="50" name="login"
value=""
class="form-control" required/> <span
class="help-block with-errors"></span>
</div>
<div class="form-group">
<label for="jvm_memo">JVM Memo</label>
<select id="jvm_memo" name="jvm_memo" class="form-control">
<ul class="dropdown-menu" role="menu">
<option value="2">2</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="8">8</option>
<option value="10" selected="true">10</option>
<option value="12">12</option>
<option value="14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
<option value="24">24</option>
<option value="26">26</option>
<option value="28">28</option>
<option value="30">30</option>
</ul>
</select>
</div>
<div class="form-group">
<button class="btn btn-primary"
onclick="this.addEventListener('click', clickStopper, false);">
<i class="fa fa-save"></i>Save
</button>
</div>
<input type="hidden" class="editDriveId" name="editDriveId" id="editDriveId" value="" />
</form>
</div>
And here my popover initiator:
<script type="text/javascript">
var hasPopover = false;
$(document).ready(function(){
$(".edit-drive").popover({
html : true,
content: function() {
return $("#popover-content").html();
}
});
</script>
Is that a commom behavior or any error on my code?

I've added the placement property set to bottom and also the missing }); from your script and it displays very well. Hope this helps you:
var hasPopover = false;
$(".edit-drive").popover({
html: true,
placement: 'bottom',
content: function() {
return $("#popover-content").html();
}
});
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<a class="driveEdit" href="#">
<i class="fa fa-pencil edit-drive" style="font-size: 1.3em;" data-toggle="popover" data-placement="left" rel="tooltip">Click me please!</i>
</a>
<div id="popover-content" class="hide">
<!-- MyForm -->
<form id="tab" method="POST" action="#routes.UiscsiController.editVirtualDrive()" data-toggle="validator">
<div class="form-group">
<label for="login">Login</label>
<input type="text" id="login" maxlength="50" name="login" value="" class="form-control" required/> <span class="help-block with-errors"></span>
</div>
<div class="form-group">
<label for="jvm_memo">JVM Memo</label>
<select id="jvm_memo" name="jvm_memo" class="form-control">
<ul class="dropdown-menu" role="menu">
<option value="2">2</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="8">8</option>
<option value="10" selected="true">10</option>
<option value="12">12</option>
<option value="14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
<option value="24">24</option>
<option value="26">26</option>
<option value="28">28</option>
<option value="30">30</option>
</ul>
</select>
</div>
<div class="form-group">
<button class="btn btn-primary" onclick="this.addEventListener('click', clickStopper, false);">
<i class="fa fa-save"></i>Save
</button>
</div>
<input type="hidden" class="editDriveId" name="editDriveId" id="editDriveId" value="" />
</form>
</div>

Submit and Change jquery code rewrite

This code determines whether the form elements e.g. input fields, radio buttons and select fields have an attribute called required="required" then the jquery and add an error accordingly.
If the input field then has a value, then the change listener, should automatically remove the error.
The code works fine - However, its not been written well. There are lots of things being repeated.
What would be the best way of optimising the code?
$(document).ready(function() {
var count = 0;
$(".form-unique").attr('novalidate', "");
$('.form-unique').on('submit change', function(e) {
if (count > 0) {
$(this).find('.error-message').remove();
e.preventDefault();
console.log($('.supererror').length);
var dateField = $(".form-unique").find('#date-year').parent();
var _this = $(this);
var checkboxes = [];
_this.find(':input').each(function(i, val) {
$(this).css('border', 'transparent');
if ($(this).attr('required')) {
if ($(this).val() != '') {
$(this).removeClass('supererror');
if ($(this).attr('type') == "checkbox" || $(this).attr('type') == "radio") {
var checkboxName = $(this).attr('name');
if (checkboxes.indexOf(checkboxName) == -1) {
checkboxes.push(checkboxName);
var selector = "input:checked[type='radio'][name='" + $(this).attr('name') + "']";
if ($(selector).length == 0) {
$(this).parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>');
}
}
}
} else {
var superb = $(this).closest('div').find('label').text();
superb = superb.replace(/\*/g, '').replace(/\:/g, '');
$("input[type='checkbox'][name='submitted[yes_no]']").change(function() {
$(this).parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>');
});
$(this).addClass('supererror').css('border', '3px solid red');
$(this).parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>');
}
}
});
}
});
$('.form-unique').on('submit', function(e) {
count++;
if (count == 1) {
$(this).find('.myaccount-invalid-email-content').remove();
e.preventDefault();
console.log($('.supererror').length);
var _this = $(this);
var checkboxes = [];
_this.find(':input').each(function(i, val) {
$(this).css('border', 'transparent');
if ($(this).attr('required')) {
if ($(this).val() != '') {
$(this).removeClass('supererror');
if ($(this).attr('type') == "checkbox" || $(this).attr('type') == "radio") {
var checkboxName = $(this).attr('name');
if (checkboxes.indexOf(checkboxName) == -1) {
checkboxes.push(checkboxName);
var selector = "input:checked[type='radio'][name='" + $(this).attr('name') + "']";
if ($(selector).length == 0) {
$(this).parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>');
}
}
}
} else {
var superb = $(this).closest('div').find('label').text();
superb = superb.replace(/\*/g, '').replace(/\:/g, '');
$("input[type='checkbox'][name='submitted[yes_no]']").change(function() {
$(this).parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>');
});
$(this).addClass('supererror').css('border', '3px solid red');
$(this).parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>');
if ($(".moving-out-date-year").val() == "" || $(".moving-out-date-month").val() == "" || $(".moving-out-date-day").val() == "") {
$(".form-unique").find('.moving-out-date-year').parent().find(".myaccount-invalid-email-content").remove();
$(".form-unique").find('.moving-out-date-year').parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>');
} else {
$(".form-unique").find('.moving-out-date-year').parent().find(".myaccount-invalid-email-content").remove();
}
}
}
});
}
if ($('.supererror').length == 0) {
$('.form-unique').off();
$('.form-unique').submit();
}
});
});
.supererror{
border: 3px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form action="/" novalidate="" class="form-unique">
<div class="main-content">
<div class="new-markup">
<h3>Your contact details</h3>
</div>
<div class="name">
<label for="name">Full name: <span class="form-required">*</span></label>
<input id="name" required="required" type="text" name="submitted[name]" value="" class="form-text required"/>
</div>
<div class="new-e-mail-1">
<label for="e-mail-1">Email address: <span class="form-required">*</span></label>
<input id="e-mail-1" required="required" type="text" name="submitted[new_e_mail_1]" value="" class="form-text required"/>
</div>
<div class="phone-1">
<label for="phone-1">Phone number: <span class="form-required">*</span></label>
<input id="phone-1" required="required" type="text" name="submitted[phone_1]" value="" class="form-text required"/>
</div>
<div class="webform-component-markup moving-out">
<h3>Moving out</h3>
</div>
<div class="address-line-1">
<label for="address-line-1">House name/number: <span class="form-required">*</span></label>
<input id="address-line-1" required="required" type="text" name="submitted[address_line_1]" value="" class="form-text required"/>
</div>
<div class="address-line-2">
<label for="address-line-2">Street: <span class="form-required">*</span></label>
<input id="address-line-2" required="required" type="text" name="submitted[address_line_2]" value="" class="form-text required"/>
</div>
<div class="town-city">
<label for="town-city">District: </label>
<input id="town-city" type="text" name="submitted[town_city]" value="" class="form-text"/>
</div>
<div class="city">
<label for="city">City: </label>
<input id="city" type="text" name="submitted[city]" value="" class="form-text"/>
</div>
<div class="postcode2">
<label for="postcode2">Postcode: </label>
<input id="postcode2" type="text" name="submitted[postcode2]" value="" class="form-text"/>
</div>
<div class="webform-component-markup moving-date">
<h3>date</h3>
</div>
<div class="webform-component-date moving-out-date">
<label for="moving-out-date">Moving out date: <span class="form-required">*</span></label>
<div class="webform-container-inline webform-datepicker">
<label for="moving-out-date-year" class="element-invisible">Year </label>
<select id="moving-out-date-year" required="required" name="submitted[moving_out_date][year]" class="year form-select">
<option value="" selected="selected">Year</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
</select>
<label for="moving-out-date-month" class="element-invisible">Month </label>
<select id="moving-out-date-month" required="required" name="submitted[moving_out_date][month]" class="month form-select">
<option value="" selected="selected">Month</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<label for="moving-out-date-day" class="element-invisible">Day </label>
<select id="moving-out-date-day" required="required" name="submitted[moving_out_date][day]" class="day form-select">
<option value="" selected="selected">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<input id="dp1452155277044" type="image" src="/sites/all/modules/contrib/webform/images/calendar.png" alt="Open popup calendar" title="Open popup calendar" class="webform-calendar webform-calendar-start-2015-12-24 webform-calendar-end-2021-01-07 webform-calendar-day-0 hasDatepicker"/>
</div>
</div>
<div class="webform-component-markup new-address">
<h3>New address</h3>
</div>
<div class="addressnew-line-1">
<label for="addressnew-line-1">House name/number: </label>
<input id="addressnew-line-1" type="text" name="submitted[addressnew_line_1]" value="" class="form-text"/>
</div>
<div class="addressnew-line-2">
<label for="addressnew-line-2">Street: </label>
<input id="addressnew-line-2" type="text" name="submitted[addressnew_line_2]" value="" class="form-text"/>
</div>
<div class="town-city-new">
<label for="town-city-new">District: </label>
<input id="town-city-new" type="text" name="submitted[town_city_new]" value="" class="form-text"/>
</div>
<div class="county-new">
<label for="county-new">City: </label>
<input id="county-new" type="text" name="submitted[county_new]" value="" class="form-text"/>
</div>
<div class="postcode3">
<label for="postcode3">Postcode: </label>
<input id="postcode3" type="text" name="submitted[postcode3]" value="" class="form-text"/>
</div>
<div class="webform-component-markup take-us-with-you">
<h3>Take us with you</h3>
</div>
<div>
<label for="yes-no">yes?: </label>
<div id="yes-no" class="form-radios webform-radio-buttons">
<input id="yes-no-1" type="radio" name="submitted[yes_no]" value="1" class="webform-radio-buttons form-radio"/>
<label for="yes-no-1" class="option">No </label>
<input id="yes-no-2" type="radio" name="submitted[yes_no]" value="2" class="webform-radio-buttons form-radio"/>
<label for="yes-no-2" class="option">Yes </label>
</div>
</div>
<div class="form-actions">
<input type="submit" name="op" value="Submit" class="webform-submit button-primary form-submit"/>
</div>
</div>
</form>

$("form")[0].checkValidity() checks for form validity on modern browsers :P
Besides that it's indeed recommend to post this on codereview. There's nough to improve, too many ifs nested, full html variables in the code that can be replaced with a function which returns a html string that has a classname and text value input.

Cant toggle forms using JavaScript

I have this html
<body>
<section id="content" class="m-t-lg wrapper-md animated fadeInDown">
<a class="nav-brand" href="index.html"></a>
<div class="row m-n">
<div class="col-md-4 col-md-offset-4 m-t-lg">
<section class="panel">
<header class="panel-heading bg bg-primary text-center">
<div class="m-b-sm">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-sm btn-success">
<input type="radio" name="radios" id="radio1"> <i class="icon-ok text-active"></i>Credit card
</label>
<label class="btn btn-sm btn-success">
<input type="radio" name="radios" id="radio2"> <i class="icon-ok text-active"></i>Debit card
</label>
<label class="btn btn-sm btn-success">
<input type="radio" name="radios" id="radio3"> <i class="icon-ok text-active"></i>Internet Banking
</label>
</div>
</div>
</header>
<form method="post" action="http://www.bjhhbhjh.com/webapp/TokenProcess.php" class="panel-body" id="cardpayment">
<div class="form-group">
<input type='hidden' id='ccType' name='ccType'/>
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
</div>
<div class="form-group">
<label class="control-label">Card Number</label>
<input type="text" name="ccnumber" id="ccnumber" placeholder="411111111111111" class="form-control">
</div>
<div class="form-group">
<label class="control-label" style="display:inline">Expiry</label>
<select class="form-control" id="expiry_month" name="expiry_month">
<option selected>Select Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select class="form-control" id="expiry_year" name="expiry_year">
<option selected>Select Year</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option> <option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
<option value="2034">2034</option>
<option value="2035">2035</option>
<option value="2036">2036</option>
</select>
</div>
<div class="form-group">
<label class="control-label">CVV</label>
<input type="password" id="cvv" name="cvv" placeholder="123" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Amount</label>
<input type="text" name="amount" id="amount" placeholder="100.00" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Name on card</label>
<input type="text" name="name_on_card" id="name_on_card" placeholder="Enter name as on card" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Email</label>
<input type="text" name="email" id="email" placeholder="Enter your Email" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Mobile Number</label>
<input type="text" name="mobileNo" id="mobileNo" placeholder="Enter your mobile number" class="form-control">
</div>
<input type="hidden" name="merchant_id">
<input type="hidden" name="customerReferenceNo">
<input type="hidden" name="selectedRadioValue" id="selectedRadioValue">
<button type="submit" class="btn btn-info">Pay Now</button>
<div class="line line-dashed"></div>
<p class="text-muted text-center"><small>Already have an account?</small></p>
</form>
<form method="post" action="http://www.bmbmnbmnb.com/webapp/IB.php" id="internetpayment" class="panel-body">
<div class="form-group">
<label class="control-label">Name</label>
<input type="text" name="name" id="name" placeholder="Enter your name" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Email</label>
<input type="text" name="email" id="email" placeholder="Enter your Email" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Mobile Number</label>
<input type="text" name="mobileNo" id="mobileNo" placeholder="Enter your mobile number" class="form-control">
</div>
<label class="control-label" style="display:inline">Bank</label>
<select class="form-control" id="BankId" name="BankId">
<option selected>Select Bank</option>
<option value="CORP">CORPORATION </option>
<option value="HDFC"> HDFC </option>
<option value="ICICI"> ICICI </option>
<option value="IDBI"> IDBI </option>
<option value="SBI"> STATE BANK OF INDIA </option>
<option value="DB"> DEUTSCHE </option>
</select>
<div class="form-group">
<label class="control-label">Amount</label>
<input type="text" name="amount" id="amount" placeholder="100.00" class="form-control">
</div>
<input type="hidden" name="merchant_id">
<input type="hidden" name="customerReferenceNo">
<input type="hidden" name="selectedRadioValue" id="selectedRadioValue">
<button type="submit" class="btn btn-info">Pay Now</button>
</form>
</section>
</div>
</div>
</section>
<!-- footer -->
<footer id="footer">
<div class="text-center padder clearfix">
<p>
<small>Mobile first web app framework base on Bootstrap<br>© 2013</small>
</p>
</div>
</footer>
</body>
this primarly has 2 forms with ids "cardpayment" and "internetbanking".
I have a 3 radio buttons in which when i select "creditcard" form with id "card payment" is shown.When I click on "debit card",again the same form.And when I click on "internet banking" form with id"internetbanking" is shown and "cardpayment" form is hidden.
I have tried the following javascript
var radios = document.getElementsByName("radios");
var cardpayment = document.getElementById("cardpayment");
var internetpayment = document.getElementById("internetpayment");
cardpayment.style.display = 'block'; // show
internetpayment.style.display = 'none';// hide
for(var i = 0; i < radios.length; i++) {
radios[i].onclick = function() {
var val = this.value;
if(val == 'radio1' || val == 'radio2'){
cardpayment.style.display = 'block';
internetpayment.style.display = 'none';
}
else if(val == 'radio3'){
cardpayment.style.display = 'none';
internetpayment.style.display = 'block';
}
}
}
I have a fiddle demo with all the details here
http://jsfiddle.net/7DCY8/

Your code seems fine except you should change
var val = this.value;
to
var val = this.id;
Here's the working fiddle.

Develop Reference

JavaScript is the programming language of the Web.

Hide Base on select (multiple) - javascript

Related

selecting only the element in the same div with jquery

HTML form validation - check if at least one dropdown is selected

Bootstrap Popover closes itself

Submit and Change jquery code rewrite

Cant toggle forms using JavaScript

Categories

Resources