I am using jquery to display some forms depending on user input. I have a basic info to fill and then the user select radio buttons that will show one distinct form depending on the input (four radio buttons, 2 questions). The problem is that I don't know how to choose it, I want two distint functions for each question.
My Jquery code (just the idea of what I want):
$(document).ready(function () {
$('form[name="THE_FORM"]'.find('p.ISVM')).click(function () {
if ($(this).attr("value") == "1") {
$('#first').hide();
$('#second').show();
}
if ($(this).attr("value") == "2") {
$('#first').show();
$('#second').hide();
}
});
$('form[name="THE_FORM"]'.find('p.ISVH').click(function () {
if ($(this).attr("value") == "3") {
$('#third').hide();
$('#fourth').show();
}
if ($(this).attr("value") == "4") {
$('#third').show();
$('#fourth').hide();
}
});
});
HTML:
<div id="main">
<form name="The_FORM">
<p class = "ISVH"> <span> Is Virtual host? </span>
<label for="VH"> Yes <input id="VH" type="radio" name="VH" value="3"> </label>
<label for="NVH"> No <input id="NVH" type="radio" name="VH" value="4"> </label> </p>
<p class = "ISVM"> <span> Is Virtual Machine? </span>
<label for="VM"> Yes <input id="VM" type="radio" name="VM" value="1"> </label>
<label for="PM"> No <input id="PM" type="radio" name="VM" value="2"> </label> </p>
...divs first, second, third, fourth here...
</form>
</div>
I tried:
$('form[name="THE_FORM"]'.find('p.ISVM')).click(function () ...
$('form[name="THE_FORM"]: p.ISVM')).click(function () ...
Bit is not working..
What I am doing wrong here? How I write the jquery functions to select the what I want?
$('form[name="THE_FORM"]'.find('p.ISVM')).click(function () ...
should be
$('form[name="THE_FORM"]').find('p.ISVM').click(function () ...
while
$('form[name="THE_FORM"]: p.ISVM')).click(function () ...
should be
$('form[name="THE_FORM"] p.ISVM')).click(function () ...
Also, using name attribute is not as efficient as using an ID:
and then one of these would be my preference:
$('#THE_FORM').find('p.ISVM').click(function () ...
$('#THE_FORM p.ISVM').click(function () ...
or even
$('#THE_FORM').on('click', 'p.ISVM', function () ...
which does something else, but that something else is nice.
Even better, I'd probably disregard click and go directly for change event on inputs.
$(input[name*='VH']).change()
{
var vh= $(input[name*='VH']).val();
if (vh == 1 )
{
$('#first').hide();
$('#second').show();
} else if (vh == 2)
{
$('#first').show();
$('#second').hide();
}
}
$(input[name*='VM']).change(){
var vm = $(input[name*='VM']).val();
if (vm == 1 )
{
$('#third').hide();
$('#fourth').show();
} else if (vh == 2)
{
$('#fourth').hide();
$('#third').show();
}
}
Related
I have this logic that is in a form that some users are able to process without selecting a source. Is there a better way to do this logic so it will not fail I am unable to get it to fail so I am very limited.
html
<div id="sources">
<label id="lblSources" class="control-label">* Source</label>
<label id="lblSourcesError" class="pl-4 text-danger" style="display:none">At least one 'Source' must be selected</label>
<input type="checkbox" value=#item.Value name="chkProduct" />
</div>
Js
var checked_sourcecheckboxes = $("#sources input[type=checkbox]:checked");
if (checked_sourcecheckboxes.length == 0) {
$("#lblSourcesError").show();
additionalValidation = true
}
else {
$("#lblSourcesError").hide();
}
Consider the following example.
$(function() {
var checked_sourcecheckboxes = $("#sources input[type=checkbox]");
if (checked_sourcecheckboxes.filter(":checked").length == 0) {
$("#lblSourcesError").show();
additionalValidation = true
} else {
$("#lblSourcesError").hide();
}
checked_sourcecheckboxes.change(function() {
if (checked_sourcecheckboxes.filter(":checked").length == 0) {
$("#lblSourcesError").show();
additionalValidation = true
} else {
$("#lblSourcesError").hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sources">
<label id="lblSources" class="control-label">* Source</label>
<label id="lblSourcesError" class="pl-4 text-danger" style="display:none">At least one 'Source' must be selected</label>
<input type="checkbox" value=#item.Value name="chkProduct" />
</div>
This checks the status when the page loads and whenever the checkbox is changed.
I did this code to show a div when people select one input radio, but doesn't work.
Unfortunately the input is inside a .tpl page (PrestaShop) and it's a group. So I did it calling the value 23. If I put some css it works, but when I set "show" the div stays hide. What is wrong?
$(document).ready(function () {
$('#group_1 input').each(function () {
if ($(this).val() == ('23') && $(this).is(':checked')) {
$('#showtext').show();
} else {
$('#showtext').hide();
}
});
});
{elseif $group.group_type == 'radio'}
<ul id="group_{$id_attribute_group}">
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<li class="input-container float-xs-left">
<label class="accordion--form__label">
<input class="input-radio" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}>
<span class="radio-label">{$group_attribute.name}</span>
</label>
</li>
{/foreach}
</ul>
{/if}
$(document).ready(function() {
$('#group_1 input').each(function() {
if ($(this).val() == ('23') && $(this).is(':checked')) {
$('#showtext').show();
} else {
$('#showtext').hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "group_1" >
<input class = "input-radio" type = "radio" data-product-attribute = "data-product-attribute" name = "test" value = "23" checked>
</div>
<div id = "showtext" >Show text </div>
You can see code above is working absolutely fine. You have applied display:none !important;to showtext in your css code.
I have tried all the solutions i could find but i am stuck. I have 2 checkboxes, HBO and Marvin. Marvin needs to show a div. HBO needs to show nothing. It works until I need to click the checkbox twice for it to show/hide. usually this would be a $apply() issue but that does not seem to be the case. I believe I am not updating the model correctly. I forgot to mention that the checkboxes need to reset to false when the other is true.
plunker
var ctrl = this;
ctrl.showMeMarvin = function () {
if (ctrl.show === true) {
//$timeout(function () {
ctrl.marvin = false;
ctrl.show = false;
ctrl.hbo = false;
//})
}
else {
//$timeout(function () {
ctrl.marvin = true;
ctrl.show = true;
ctrl.hbo = false;
//})
}
};
ctrl.showMeHBO = function () {
if (ctrl.show === true) {
// $timeout(function () {
ctrl.show = false;
ctrl.hbo = true;
ctrl.marvin = false;
//})
}
else {
//$timeout(function () {
ctrl.marvin = false;
ctrl.hbo = true;
//})
}
};
Just change the div ng-show like this:
<div class="col-xs-12" ng-show="checkedHBO == 1">
And it will work without any additional functions calls.
Edit:
To have it working with the condition to reset the prev selected value you can use this:
<div ng-controller="ShowController as ctrl">
<div class="col-xs-12">
<label for="checkedHBO" class="ts-label">HBO</label>
<input id="checkedHBO" name="mygroup" type="radio" value="hbo" ng-model="checkedHBO" ng-change="checkedMarvin = undefined"/>
<label for="checkedMarvin" class="ts-label">Marvin</label>
<input id="checkedMarvin" name="mygroup" type="radio" value="marvin" ng-model="checkedMarvin" ng-change="checkedHBO = undefined"/>
</div>
<div class="col-xs-12" ng-show="checkedHBO">
<center>
<div class="jumbotron">
DIV 1
</div>
<div class="jumbotron">
DIV 2
</div>
<div class="jumbotron">
DIV 3
</div>
</center>
</div>
</div>
You should be using a radio input instead of checkboxes. http://plnkr.co/edit/hE68w9RKUoFamAWGgRzR?p=preview
<input name="radio" id="checkedHBO" type="radio" ng-model="ctrl.show" ng-value="false" />
<input name="radio" id="checkedMarvin" type="radio" ng-model="ctrl.show" ng-value="true"/>
I would like to hide a div until the leased radio button is selected. This div contains input fields only relative to the leased radio selection, so hiding them when the owned radio button is selected is preferred. However, the code I have is not working.
HTML
<div id="surv_radio4">
<p>
Merchant Site Property is
</p>
<input type="radio" id="owned" value="owned" name="merchant_property"/>
<label for="owned">Owned</label>
<input type="radio" id="leased" value="leased" name="merchant_property"/>
<label for="leased">Leased</label>
</div>
<div id="surv_5">
<label for="landlord_name" class="test">Landlord Name</label>
<input type="text" id="landlord_name" placeholder="Landlord Name"/>
<label for="landlord_phone">Phone Number</label>
<input type="text" id="landlord_phone" placeholder="XXX-XXX-XXXX"/>
</div>
CSS
#surv_5 {
display: none;
}
Javascript
<script>
$(document).ready.(function() {
$("input[name$='merchant_property']").click(function() {
var value = $(this).val();
if (value == 'leased') {
$("#surv_5").show();
} else if (value == 'owned') {
$("#surv_5").hide();
}
});
});
</script>
Your document.ready function has a syntax error (extra period):
$(document).ready(function () {
http://jsfiddle.net/isherwood/tW3D5/
Try this:
$("input[name$='merchant_property']").change(function () {
var value = $(this).val();
if (value == 'leased') {
$("#surv_5").show();
} else {
$("#surv_5").hide();
}
});
Fiddle here.
On your original code, you also had an error on your else statement.. See fiddle here
Relevant bits below:
if (value == 'leased') {
$("#surv_5").show();
} else if(value == 'owned'){
$("#surv_5").hide();
}
UPDATE
Too late, looks like #Hiral has an answer for you....
I have a checkboxlist control, in this control I wan't every checkbox to fire an event whenever the checkbox is clicked (manually or programmatically).
Html code generated by checkboxlist lloks something like below:
<div id="divleft">
<table id="MainContent_CheckBoxList1">
<tbody>
<tr>
<td><input id="MainContent_CheckBoxList1_0" name="ctl00$MainContent$CheckBoxList1$0" onclick="router(this);" value="1" type="checkbox"><label for="MainContent_CheckBoxList1_0">Option1</label></td>
</tr>
<tr>
<td><input id="MainContent_CheckBoxList1_1" name="ctl00$MainContent$CheckBoxList1$1" onclick="router(this);" value="2" type="checkbox"><label for="MainContent_CheckBoxList1_1">Option2</label></td>
</tr>
<tr>
<td><input id="MainContent_CheckBoxList1_2" name="ctl00$MainContent$CheckBoxList1$2" onclick="router(this);" value="3" type="checkbox"><label for="MainContent_CheckBoxList1_2">Option3</label></td>
</tr>
<tr>
<td><input id="MainContent_CheckBoxList1_3" name="ctl00$MainContent$CheckBoxList1$3" onclick="router(this);" value="4" type="checkbox"><label for="MainContent_CheckBoxList1_3">Option4</label></td>
</tr>
</tbody>
</table>
</div>
On click of checkbox I am hiding or showing div(s). The div looks like:
<div id="divright">
<div id="divoption1" style="display: none;">
I am in option1 div
</div>
<div id="divoption2" style="display: none;">
I am in option2 div
</div>
<div id="divoption3" style="display: none;">
I am in option3 div
</div>
</div>
</div>
I have a jquery code which does the heavy duty work for showing / hiding divs.
$(document).ready(function () {
RunOnce();
});
function uncheckAllCheckboxes(previouscheckedCheckboxValue, currentcheckedCheckboxValue) {
if (previouscheckedCheckboxValue != null && previouscheckedCheckboxValue != currentcheckedCheckboxValue) {
window.isRunOnce = 'false';
$('[id$=divleft]').find('input:checkbox[value="' + previouscheckedCheckboxValue + '"]').prop('checked', false).click();
//variable used to avoid infinite loop
window.isRunOnce = null;
}
return currentcheckedCheckboxValue;
}
function router(control) {
if (control.value == '1') {
Option1Controller(control.value);
}
if (control.value == '2') {
Option2Controller(control.value);
}
if (control.value == '3') {
Option3Controller(control.value);
}
}
function Option1Controller(currentCheckBoxValue) {
if ($('[id$=divleft]').find('input:checkbox[value="' + currentCheckBoxValue + '"]').is(':checked') == true) {
$('[id$=divoption1]').show();
if (window.isRunOnce == null) {
window.previouscheckBoxValue = uncheckAllCheckboxes(window.previouscheckBoxValue, currentCheckBoxValue);
}
}
else {
$('[id$=divoption1]').hide();
}
}
function Option2Controller(currentCheckBoxValue) {
if ($('[id$=divleft]').find('input:checkbox[value="' + currentCheckBoxValue + '"]').is(':checked') == true) {
$('[id$=divoption2]').show();
if (window.isRunOnce == null) {
window.previouscheckBoxValue = uncheckAllCheckboxes(window.previouscheckBoxValue, currentCheckBoxValue);
}
}
else {
$('[id$=divoption2]').hide();
}
}
function Option3Controller(currentCheckBoxValue) {
if ($('[id$=divleft]').find('input:checkbox[value="' + currentCheckBoxValue + '"]').is(':checked') == true) {
$('[id$=divoption3]').show();
if (window.isRunOnce == null) {
window.previouscheckBoxValue = uncheckAllCheckboxes(window.previouscheckBoxValue, currentCheckBoxValue);
}
}
else {
$('[id$=divoption3]').hide();
}
}
function RunOnce() {
Option1Controller('1');
Option2Controller('2');
Option3Controller('3');
}
Problem lies with function uncheckAllCheckboxes, in this function, I am unchecking previously checked checkboxes:
I have tried:
$('[id$=divleft]').find('input:checkbox[value="' + previouscheckedCheckboxValue + '"]').prop('checked', false);
Above query unchecks the corresponding checkbox but does not fire the onclick event?
$('[id$=divleft]').find('input:checkbox[value="' + previouscheckedCheckboxValue + '"]').click(); just after the above query.
It fires the click event but also undoes 1, so it is useless.
$('[id$=divleft]').find('input:checkbox[value="' + previouscheckedCheckboxValue + '"]').prop('checked', false).click();
This query also seems to do nothing
My requirement is simple: I need to pro grammatically check/uncheck checkboxes which are identified by parent id and the value of checkbox control. After checking/unchecking, the control should fire click event also.
Any help shall be appriciated.
Note: I am new to this jquery stuff, so any improvements in my code are also welcomed.
Have you considered using radio buttons instead of checkboxes? They have same behavior you trying to achieve with checkboxes. I've created a fiddle
HTML
<label for="checkbox1">Div 1</label>
<input type="checkbox" name="div" id="checkbox1" data-div-id="1">
<label for="checkbox2">Div 2</label>
<input type="checkbox" name="div" id="checkbox2" data-div-id="2">
<label for="checkbox3">Div 3</label>
<input type="checkbox" name="div" id="checkbox3" data-div-id="3">
<hr/>
<div id="div1">DIV1</div>
<div id="div2">DIV2</div>
<div id="div3">DIV3</div>
<br/>
<label for="radio1">Div 4</label>
<input type="radio" name="div" id="radio1" data-div-id="4">
<label for="radio2">Div 5</label>
<input type="radio" name="div" id="radio2" data-div-id="5">
<label for="radio3">Div 6</label>
<input type="radio" name="div" id="radio3" data-div-id="6">
<hr/>
<div id="div4">DIV4</div>
<div id="div5">DIV5</div>
<div id="div6">DIV6</div>
JS
$(document).ready(function() {
var checkboxes = $('input:checkbox'),
radios = $('input:radio'),
divs = $('div');
// hide all divs
divs.hide();
checkboxes.change(function( e ) {
var e = e || window.event,
target = e.target || e.srcElement;
$('#div' + $(target).data('div-id')).toggle();
});
radios.change(function( e ) {
var e = e || window.event,
target = e.target || e.srcElement;
divs.hide();
$('#div' + $(target).data('div-id')).toggle();
});
});
you can see the comparison between both. And wouldn't use inline js anymore and css when possible. And try to avoid using tables if it not for tabular data, they are known for causing performance issues. Read this
I think you are using too much code.
Check this:
$('input[type="checkbox"]').change(function () {
var this_index = $(this).closest('tr').index(); //check the index of the tr of this input
$("#divright > div").eq(this_index).show(); //show the div inside divright that has same index as this_index
});
And this demo. I removed all inline function calls. I think this is a easier way.