It worked and now it doesn't. I just can't find what i did wrong.
It should show a div with driving license categories when you select "Ja" in select box.
Following is the source code. It should be very simple to solve this i just can't see it :(
var nein = $('#nein'),
ja = $('#ja');
ja.click(function() {
if ($('#kfz').hasClass('in')) {
return false;
}
});
nein.click(function() {
if (!$('#kfz').hasClass('in')) {
return false;
}
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<label for="has_driverslicense">KFZ Führerschein:</label>
<select class="form-control" required="required" id="has_driverslicense" name="has_driverslicense">
<option value="0" id="nein" data-toggle="collapse" data-target="#kfz">Nein</option>
<option value="1" id="ja" data-toggle="collapse" data-target="#kfz">Ja</option>
</select>
<div id="kfz" class="collapse out">
<div>
<input id="checkbox-20" class="checkbox-style" name="work_as_service" type="checkbox">
<label for="checkbox-20" class="checkbox-style-3-label">B (Auto bis 3,49t)</label>
</div>
<div>
<input id="checkbox-21" class="checkbox-style" name="work_as_service_cashier" type="checkbox">
<label for="checkbox-21" class="checkbox-style-3-label">BE (Auto mit Anhänger)</label>
</div>
<div>
<input id="checkbox-22" class="checkbox-style" name="work_as_service_leader" type="checkbox">
<label for="checkbox-22" class="checkbox-style-3-label">C1 (LKW bis 7,49t)</label>
</div>
<div>
<input id="checkbox-23" class="checkbox-style" name="work_as_bar" type="checkbox">
<label for="checkbox-23" class="checkbox-style-3-label">C (LKW bis 40t)</label>
</div>
<div>
<input id="checkbox-24" class="checkbox-style" name="work_as_logistics" type="checkbox">
<label for="checkbox-24" class="checkbox-style-3-label">CE (LKW mit Anhänger)</label>
</div>
<div>
<input id="checkbox-25" class="checkbox-style" name="work_as_cook" type="checkbox">
<label for="checkbox-25" class="checkbox-style-3-label">Fahrerkarte</label>
</div>
<div>
<input id="checkbox-26" class="checkbox-style" name="work_as_cook_assistant" type="checkbox">
<label for="checkbox-26" class="checkbox-style-3-label">Gabelstaplerführerschein</label>
</div>
<div>
<input id="checkbox-27" class="checkbox-style" name="work_as_cook_assistant" type="checkbox">
<label for="checkbox-27" class="checkbox-style-3-label">Geländestaplerführerschein</label>
</div>
<div>
<input id="checkbox-28" class="checkbox-style" name="work_as_cook_assistant" type="checkbox">
<label for="checkbox-28" class="checkbox-style-3-label">IPAF – Arbeitsbühnen</label>
</div>
</div>
</body>
</html>
Get the value from select, and use addClass/remoceClass
$("#has_driverslicense").on("change", function(){
if($(this).val() === "1") {
$('#kfz').addClass("in");
} else {
$('#kfz').removeClass("in");
}
})
I've updated the fiddle:
https://jsfiddle.net/aq8pqbft/1/
Related
I have a div with some radio buttons, and the input names are cty_1. If i add more div the input names inside that divs should become cty_2, cty_3, etc.respectively.
Here's my code:
<div class="category">
<div class="col-md-6">
<input type="radio" name="cty_1" id="1" value="car">
<label for="1">car</label>
</div>
<div class="col-md-6">
<input type="radio" name="cty_1" id="2" value="bike">
<label for="2">bike</label>
</div>
</div>
If another div is added, i want that like
<div class="category">
<div class="col-md-6">
<input type="radio" name="cty_1" id="1" value="car">
<label for="1">car</label>
</div>
<div class="col-md-6">
<input type="radio" name="cty_1" id="2" value="bike">
<label for="2">bike</label>
</div>
</div>
<div class="category">
<div class="col-md-6">
<input type="radio" name="cty_2" id="3" value="phone">
<label for="3">phone</label>
</div>
<div class="col-md-6">
<input type="radio" name="cty_2" id="4" value="computer">
<label for="4">computer</label>
</div>
</div>
NB: i don't know javascript.
If you're using jQuery then this is pretty easy. Using the following code, every time you click "Go" a new category element will be appended and the name and id attributes will increment:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
<div class="container">
<btn class="btn btn-primary">Go</btn>
<div class="category">
<div class="col-md-6">
<input type="radio" name="cty_1" id="1" value="car">
<label for="1">car</label>
</div>
<div class="col-md-6">
<input type="radio" name="cty_1" id="2" value="bike">
<label for="2">bike</label>
</div>
</div>
</div>
</body>
<script>
$('.btn-primary').on('click',function(){
var idx = parseInt($('.category').last().index())+1;
$('.category')
.last()
.clone()
.find('input[type=radio]')
.each(function(index){
$(this)
.attr('name','cty_' + idx)
.attr('id','cty_' + idx + "_" + index)
.parent()
.find('label')
.attr('for','cty_' + idx + "_" + index)
.end()
})
.end()
.insertAfter($('.category').last());
});
</script>
Try this: updated fiddle
//Html
<div id="divMain">
</div>
//jQuery Code
var valuesArr=["car","bike","truck","Test4","Test5"];
var cityCounter=1;
var idCounter=1;
var addCategoryFlag=false;
function CallHtml(){
var html="";
for(var i=0;i<valuesArr.length;i++){
if(idCounter%2!=0){
html+='<div class="category">';
}
else{
addCategoryFlag=true;
}
html+='<div class="col-md-6">';
html+=' <input type="radio" name="cty_'+cityCounter+'" id="'+idCounter+'" value="'+valuesArr[i]+'">';
html+=' <label for="'+idCounter+'">'+valuesArr[i]+'</label>';
html+='</div>';
if(addCategoryFlag){
html+='</div>';
addCategoryFlag=false;
cityCounter++;
}
idCounter++;
}
$("#divMain").html(html);
}
CallHtml();
I am working on Angular forms. I created Index.html and efTemplate.html files. efTemplate.html is a form page which I am trying to get in Index.html. I am having Index.html page with all references of scripting languages which required. Still when I execute Index.html I am getting blank page.
Please suggest.
Code for
Index.html
<!DOCTYPE html>
<html ng-app="angularFormsApp">
<head>
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="app/AngularFormsApp.js"></script>
<script src="app/EmployeeForm/efController.js"></script>
<script src="app/EmployeeForm/efDirective.js"></script>
<script src="app/EmployeeForm/efService.js"></script>
</head>
<body ng-controller="efController" class="container">
<employee-form />
</body>
</html>
Code for
AngularFormsApp.js
var angularFormsApp = angular.module('angularFormsApp', []);
Code for
efController.js
angularFormsApp.controller('efController',
function efController($scope, efService) {
$scope.employee = efService.employee;
});
Code for
efService.js
angularFormsApp.factory('efService',
function () {
return {
employee:{
fullName: "Ashok Karale",
Notes: "The Ideal employee. Just don't bother him",
department: "Admin",
perkCar: true,
PerkStock: false,
perkSixWeeks:true,
PayrollType:"none"
}
}
});
Code for
efDirective.js
angularFormsApp.directive('employeeForm',
function () {
return {
restrict: 'E',
templateUrl: 'app/EmployeeForms/efTemplate.html'
}
});
and code for
efTemplate.html
<form role="form">
<div class="form-group">
<label for="fullName">Name</label>
<input type="text" id="fullName" class="form-control" />
</div>
<div class="form-group">
<label for="notes">Notes</label>
<textarea name="notes" id="notes" class="form-control" rows="5"> </textarea>
</div>
<div class=" form-group">
<label for=" department">Department</label>
<select name="department" id="department" class="form-control">
<option>Engineering</option>
<option>Finance</option>
<option>Admin</option>
</select>
</div>
<br />
<span><b>Perks</b></span><br />
<div class="checkbox">
<label><input type="checkbox" value="perkCar"/>PerkCar</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="perkStock" />PerkStock</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="perSixWeek" />Perk SixWeek</label>
</div>
<div class="radio">
<label><input type="radio" name="payrollType" value="w2" />W-2</label>
</div>
<div class="radio">
<label><input type="radio" name="payrollType" value="ten99" />W-2</label>
</div>
<div class="radio">
<label><input type="radio" name="payrollType" value="none" />W-2</label>
</div>
<br />
<input type="submit"class="btn btn-primary" value="Submit" />
</form>
I think the correct way to put a directive tag is:
<employee-form></employee-form>
https://docs.angularjs.org/guide/directive
I am trying to toggle the visibility to div content using javascript, not jquery. I can get it to work using a huge else if, but I am trying to use a for loop.
HTML
<fieldset >
<legend>Please indicate below how you intend to pay any pick-related charges for you shipments.</legend>
<div >
<input id="repl_id" name="repl_name" type="radio" value="111">
<label for="repl_id" >Bill to your Account Number.</label>
</div>
<div >
<input id="repl_id" name="repl_name" type="radio" value="222">
<label for="repl_id" >Bill to a paymentcard.</label>
</div>
<div >
<input id="repl_id" name="repl_name" type="radio" value="333">
<label for="repl_id" >Bill to the reciever or a third party.</label>
</div>
<div >
<input id="repl_id" name="repl_name" type="radio" value="444">
<label for="repl_id" >Pay with check or money order.</label>
</div>
<div >
<input id="repl_id" name="repl_name" type="radio" value="555">
<label for="repl_id" >Pay with cash.</label>
</div>
</fieldset>
<div id="111"><p>This is 111</p></div>
<div id="222"><p>This is 222</p></div>
<div id="333"><p>This is 333</p></div>
<div id="444"><p>This is 444</p></div>
<div id="555"><p>This is 555</p></div>
Javascript
$(":input[type='radio']").on("change", function () {
var choice =[111,222,333,444,555];
if ($(this).prop("checked")) {
for(i=0; i<=choice.length; i++){
if($(this).val() === choice[i]){
$("#"+i).show();
} else {
$("#"+i).hide();
}
}
}
The problem I am having is that it does not seem to recognize the index of the array I am iterating through. So it always reads false. No JQuery please.
Demo - https://jsfiddle.net/of3gm5h8/1/
HTML
<fieldset>
<legend>Please indicate below how you intend to pay any pick-related charges for you shipments.</legend>
<div>
<input id="repl_id" name="repl_name" type="radio" value="111">
<label for="repl_id">Bill to your Account Number.</label>
</div>
<div>
<input id="repl_id" name="repl_name" type="radio" value="222">
<label for="repl_id">Bill to a paymentcard.</label>
</div>
<div>
<input id="repl_id" name="repl_name" type="radio" value="333">
<label for="repl_id">Bill to the reciever or a third party.</label>
</div>
<div>
<input id="repl_id" name="repl_name" type="radio" value="444">
<label for="repl_id">Pay with check or money order.</label>
</div>
<div>
<input id="repl_id" name="repl_name" type="radio" value="555">
<label for="repl_id">Pay with cash.</label>
</div>
</fieldset>
<div id="111" class="hide">
<p>This is 111</p>
</div>
<div id="222" class="hide">
<p>This is 222</p>
</div>
<div id="333" class="hide">
<p>This is 333</p>
</div>
<div id="444" class="hide">
<p>This is 444</p>
</div>
<div id="555" class="hide">
<p>This is 555</p>
</div>
JS
$(function() {
$('.hide').hide();
$("input[type='radio']").on("change", function() {
// Hide all the .hide divs
$('.hide').hide();
var checked = $(this).val();
if (checked == "111") {
$("#111").show();
} else if (checked == "222") {
$("#222").show();
} else if (checked == "333") {
$("#333").show();
} else if (checked == "444") {
$("#444").show();
} else if (checked == "555") {
$("#555").show();
}
});
});
I think this is what you're looking for.
//removed the colon before input
$("input[type='radio']").on("change", function () {
var choice =[111,222,333,444,555];
if ($(this).prop("checked")) {
//get the value of the checked input
var value = $(this).val();
//match the index to the input and show it, hide the others.
$('#'+value).show().siblings().hide();
}
}
This assumes that the choice array has all the values from the the inputs.
Make sure the id's of the radio buttons are unique.(You already have the same name for the radio button to make it behave like a group.)
Then target the div using the value of the radio button.
JS
$(":input[type='radio']").on("change", function() {
// Hide all the divs
$('.div-container div').hide();
if ($(this).prop("checked")) {
$("#" + $(this).val()).show();
}
});
HTML
<fieldset>
<legend>Please indicate below how you intend to pay any pick-related charges for you shipments.</legend>
<div>
<input id="repl_id1" name="repl_name" type="radio" value="111">
<label for="repl_id1">Bill to your Account Number.</label>
</div>
<div>
<input id="repl_id2" name="repl_name" type="radio" value="222">
<label for="repl_id2">Bill to a paymentcard.</label>
</div>
<div>
<input id="repl_id3" name="repl_name" type="radio" value="333">
<label for="repl_id3">Bill to the reciever or a third party.</label>
</div>
<div>
<input id="repl_id4" name="repl_name" type="radio" value="444">
<label for="repl_id4">Pay with check or money order.</label>
</div>
<div>
<input id="repl_id5" name="repl_name" type="radio" value="555">
<label for="repl_id5">Pay with cash.</label>
</div>
</fieldset>
<div class="div-container">
<div id="111">
<p>This is 111</p>
</div>
<div id="222">
<p>This is 222</p>
</div>
<div id="333">
<p>This is 333</p>
</div>
<div id="444">
<p>This is 444</p>
</div>
<div id="555">
<p>This is 555</p>
</div>
</div>
Check Fiddle
I'm trying to pass in the dropdown menu selection to a function in my Javascript File. This works, but as soon as I hit the submit button the dropdown menu choices get deleted, and I'm left with an empty dropdown menu. (This seems to only happen when it's an app in google scripts.)
Any thoughts why this is happening? Is there a better way to do this with apps script?
Any help would be greatly appreciated.
function doSomething(){
var x = document.getElementById("API_key").value;
document.getElementById("API_key").innerHTML = x;
var subdomain =document.getElementById("subdomain").value;
document.getElementById("subdomain").innerHTML = subdomain;
var state = document.getElementById("stateSelect").value;
document.getElementById("stateSelect").innerHTML = state;
google.script.run.getInfo(x,subdomain,state);
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<head>
<base target="_top">
</head>
<body>
<P ALIGN=Center>
<BLOCKQUOTE>
<P ALIGN=Left>
<div class="inline form-group">
<label for="API_key">API Key</label>
<input type="text" id="API_key" style="width: 150px;" value="Enter API key here!">
</div>
<P ALIGN=Left>
<div class="inline form-group">
<p>
<label for="Subdomain">Subdomain</label>
<input type="text" id="subdomain" style="width: 150px;">
</p>
</div>
<select id ="stateSelect">
<option value="">All</option>
<option value="&state=active">Active</option>
<option value="&state=past_due">Past Due</option>
<option value="&state=canceled">Canceled</option>
<option value="&state=expired">Expired</option>
<option value="&state=trialing">Trialing</option>
</select>
<div>
<input type="checkbox" id="Product Info" checked>
<label for="Product Info">Product Info</label>
</div>
<div>
<input type="checkbox" id="Shipping Info">
<label for="Shipping Info">Shipping Info</label>
</div>
<div>
<p>
<input class="action" type="button" onclick="doSomething()" value="Get Info!" />
</p>
</div>
</BLOCKQUOTE>
</body>
</html>
function doSomething(){
var x = document.getElementById("API_key").value;
var subdomain =document.getElementById("subdomain").value;
var state = document.getElementById("stateSelect").value;
google.script.run.getInfo(x,subdomain,state);
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<head>
<base target="_top">
</head>
<body>
<P ALIGN=Center>
<BLOCKQUOTE>
<P ALIGN=Left>
<div class="inline form-group">
<label for="API_key">API Key</label>
<input type="text" id="API_key" style="width: 150px;" value="Enter API key here!">
</div>
<P ALIGN=Left>
<div class="inline form-group">
<p>
<label for="Subdomain">Subdomain</label>
<input type="text" id="subdomain" style="width: 150px;">
</p>
</div>
<select id ="stateSelect">
<option value="">All</option>
<option value="&state=active">Active</option>
<option value="&state=past_due">Past Due</option>
<option value="&state=canceled">Canceled</option>
<option value="&state=expired">Expired</option>
<option value="&state=trialing">Trialing</option>
</select>
<div>
<input type="checkbox" id="Product Info" checked>
<label for="Product Info">Product Info</label>
</div>
<div>
<input type="checkbox" id="Shipping Info">
<label for="Shipping Info">Shipping Info</label>
</div>
<div>
<p>
<input class="action" type="button" onclick="doSomething()" value="Get Info!" />
</p>
</div>
</BLOCKQUOTE>
</body>
</html>
This is not necessary .just comment and check it
function doSomething(){
var x = document.getElementById("API_key").value;
document.getElementById("API_key").innerHTML = x;
var subdomain =document.getElementById("subdomain").value;
document.getElementById("subdomain").innerHTML = subdomain;
var state = document.getElementById("stateSelect").value;
//document.getElementById("stateSelect").innerHTML = state;
google.script.run.getInfo(x,subdomain,state);
}
Here I need to get the selected radio button value (123,456,789) and assign it to valueee div element? I used document.getElementsById, but couldn't get what I need.
Any help would be highly appreciated.
<!DOCTYPE html>
<html>
<head>
<title>Radio Button Selection</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#radio_submit").click(function(e) {
var checked_option_radio = document.getElementsByName("deff").value;
if (checked_option_radio === undefined) {
alert('Please select options!');
} else {
alert("inside else");
$('#valueee').html(checked_option_radio);
}
});
});
</script>
</head>
<body>
<form id="myform">
<div>Choose option:</div>
<div>
<input type="radio" name="user_options" />
</div>
<div name="deff" id="val1">123</div>
<span>CSS</span>
<br></br>
<div>
<input type="radio" name="user_options" />
</div>
<div name="deff" id="val2">456</div>
<span>html</span>
<br></br>
<div>
<input type="radio" name="user_options" />
</div>
<div name="deff" id="val3">678</div>
<span>jquery</span>
<br></br>
<div>
<input type="radio" name="user_options" />
</div>
<div name="deff" id="val4">675</div>
<span>JS</span>
<br></br>
<div><button id="radio_submit" type="button">Show Selected Radio</button></div>
</form>
<div id="valueee"></div>
</body>
</html>
jQuery
$(document).ready(function() {
$("#radio_submit").click(function (e) {
var checked_option_radio = $("input[name=user_options]:checked").val();
});
});
Full Code
$(document).ready(function() {
$("#radio_submit").click(function (e) {
var checked_option_radio = $("input[name=user_options]:checked").val();
if(checked_option_radio===undefined){
alert('Please select options!');
}else{
alert("inside else");
$('#valueee').html(checked_option_radio);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form id="myform">
<div>Choose option:</div>
<div>
<input type="radio" name="user_options" value="456"/>
</div>
<div name="deff" id="val1" x>123</div>
<span>CSS</span>
<br></br>
<div>
<input type="radio" name="user_options" value="456" />
</div>
<div name="deff" id="val2" >456</div>
<span>html</span>
<br></br>
<div>
<input type="radio" name="user_options" value="678" />
</div>
<div name="deff" id="val3" >678</div>
<span>jquery</span>
<br></br>
<div>
<input type="radio" name="user_options" value="675" />
</div>
<div name="deff" id="val4" >675</div>
<span>JS</span>
<br></br>
<div><button id="radio_submit" type="button">Show Selected Radio</button></div>
</form>
<div id="valueee"></div>
Check jsFiddle
I am adding a class for selected radio button parent div,based on the class I am getting the next div text and printing in the desired place using Jquery.
Rename the name=deff to class=deff.
$("#radio_submit").click(function (e) {
var checked_option_radio = $(this).closest('form').find('div').hasClass('selected');
if(checked_option_radio) {
var hello = $('.selected').next('.deff').text();
$('#valueee').html(hello);
} else {
alert('nothing selected');
var hello2 = "no radio button is selected"
$('#valueee').html(hello2);
}
});
$('input').on('click',function(){
if (!$("input").is(':checked')) {
$(this).parent().addClass('selected').siblings().removeClass('selected');
}
else {
$(this).parent().addClass('selected').siblings().removeClass('selected');
}
});
<form id="myform">
<div>Choose option:</div>
<div>
<input type="radio" name="user_options" />
</div>
<div class="deff" id="val1">123</div>
<span>CSS</span>
<br></br>
<div>
<input type="radio" name="user_options" />
</div>
<div class="deff" id="val2">456</div>
<span>html</span>
<br></br>
<div>
<input type="radio" name="user_options" />
</div>
<div class="deff" id="val3">678</div>
<span>jquery</span>
<br></br>
<div>
<input type="radio" name="user_options" />
</div>
<div class="deff" id="val4">675</div>
<span>JS</span>
<br></br>
<div><button id="radio_submit" type="button">Show Selected Radio</button></div>
</form>
<div id="valueee"></div>
http://jsfiddle.net/silpa/xeb9hoyr/2/
Here is the updated code to get input value
var check_div = $('.selected').next().is('div');
var check_input = $('.selected').next().is('input');
var div_value = $('.selected').next('.deff').text();
var input_value = $('.selected').next('input').val();
if(check_div){
$('#valueee').html(div_value);
}
if(check_input){
$('#valueee').html(input_value);
}
http://jsfiddle.net/silpa/xeb9hoyr/9/
since you have the jquery library implemented use
$('#divid').val(somevalue);