Change form inputs based on selected values

Change form inputs based on selected values - javascript

I have 3 fields: publishers in a radio-button, cities name in a drop-down list and images of news paper.
How it is possible when I select the radio button the city drop-down changes accordingly and when we select a particular city the image of news paper comes according to the city selected?
the code i am using is the code is working in first time when we select another publisher code doesnot work for images :
<html>
<title>index</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
var listA =[{name:'Ahmedabad', value:'Ahmedabad'}, {name:'Banglore', value:'Banglore'}, {name:'Chennai', value:'Chennai'}, {name:'Delhi', value:'Delhi'}, {name:'Hyderabad', value:'hyderabad'}, {name:'Jaipur', value:'Jaipur'}, {name:'Kochi', value:'Kochi'}, {name:'Kolkata', value:'Kolkata'}, {name:'Lucknow', value:'Lucknow'}, {name:'Mumbai', value:'Mumbai'}, {name:'NaviMumbai', value:'NaviMumbai'}, {name:'Pune', value:'Pune'}, {name:'Thane', value:'Thane'}];
var listB = [{name:'Banglore', value:'Banglore'}, {name:'Delhi', value:'Delhi'}, {name:'Kolkata', value:'Kolkata'}, {name:'Mumbai', value:'Mumbai'}];
var listC = [{name:'Ahmedabad', value:'Ahmedabad'}, {name:'Mumbai', value:'Mumbai'}, {name:'Banglore', value:'Banglore'}, {name:'Pune', value:'Pune'}];
var listD = [{name:'Ahmednagar', value:'Ahmednagar'}, {name:'Aurangabad', value:'Aurangabad'}, {name:'Jalgaon', value:'Jalgaon'}, {name:'Kolhapur', value:'Kolhapur'}, {name:'Mumbai', value:'Mumbai'}, {name:'Nagpur', value:'Nagpur'}, {name:'Nashik', value:'Nashik'}, {name:'Pune', value:'Pune'}];
var listE = [{name:'Delhi', value:'Delhi'}, {name:'Mumbai', value:'Mumbai'}, {name:'Lucknow', value:'Lucknow'}, {name:'Ghaziabad', value:'Ghaziabad'}, {name:'Noida', value:'Noida'}, {name:'faridabad', value:'Faridabad'}, {name:'Gurgaon', value:'Gurgaon'}];
var listF = [{name:'Delhi', value:'Delhi'}, {name:'Mumbai', value:'Mumbai'}, {name:'Lucknow', value:'Lucknow'}, {name:'Ghaziabad', value:'Ghaziabad'}, {name:'Noida', value:'Noida'}, {name:'faridabad', value:'Faridabad'}, {name:'Gurgaon', value:'Gurgaon'}];
var listG = [{name:'Ahmedabad', value:'Ahmedabad'}, {name:'Nav Gujrat Et Wealth', value:'Nav_Gujrat_Et_Wealth'}];
var listH = [{name:'Delhi', value:'Delhi'}, {name:'Mumbai', value:'Mumbai'}, {name:'Lucknow', value:'Lucknow'}, {name:'Ghaziabad', value:'Ghaziabad'}, {name:'Noida', value:'Noida'}, {name:'faridabad', value:'Faridabad'}, {name:'Gurgaon', value:'Gurgaon'}];
$(document).ready( function() {
$("input[name='chk']").on('change',function() {
if($(this).is(':checked') && $(this).val() == 'toi')
{
$('#describe').empty()
$.each(listA, function(index, value) {
$('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
});
}
else if($(this).is(':checked') && $(this).val() == 'tet')
{
$('#describe').empty()
$.each(listB, function(index, value) {
$('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
});
}
else if($(this).is(':checked') && $(this).val() == 'mirror')
{
$('#describe').empty()
$.each(listC, function(index, value) {
$('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
});
}
else if($(this).is(':checked') && $(this).val() == 'mht')
{
$('#describe').empty()
$.each(listD, function(index, value) {
$('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
});
}
else if($(this).is(':checked') && $(this).val() == 'nbt')
{
$('#describe').empty()
$.each(listE, function(index, value) {
$('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
});
}
else if($(this).is(':checked') && $(this).val() == 'eis')
{
$('#describe').empty()
$.each(listF, function(index, value) {
$('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
});
}
else if($(this).is(':checked') && $(this).val() == 'ngs')
{
$('#describe').empty()
$.each(listG, function(index, value) {
$('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
});
}
else if($(this).is(':checked') && $(this).val() == 'vke')
{
$('#describe').empty()
$.each(listH, function(index, value) {
$('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
});
}
else
{
}
});
});
</script>
<style type="text/css">
body{ margin:0; padding:0;}
.header{ width:100%; border-bottom:4px solid #0099ff;}
.headerin{ width: 710px; margin:0 auto; }
.divOuter {
background: none repeat scroll 0 0 #f9f9f9;
border: 2px solid #fff;
border-radius: 10px;
box-shadow: 0 5px 5px #ddd;
margin: 28px auto;
padding:50px 20px;
width: 710px;
}
.clr{ clear:both;}
.left_feilds{ float:left; width:275px;}
.left_right{ float:left;}
.forms{ float:left; margin:128px 0 0 0;}
#describe{ padding:3px 10px; width:150px; float:left;}
.logo{ float:left;}
.submit{ }
.submit input{ background:#d12f2f;
border: 0 none;
border-radius: 5px;
color: #fff;
cursor: pointer;
padding: 5px; width:80px;margin-top:30px; margin-left:30px; }
.imgs{ margin:180px 0 0 0px; float:left;}
.footer{ width:100%; border-top:3px solid #0099FF;}
.footerin{ width:780px; margin:0 auto; text-align:center;}
.footerin a{ text-decoration:none; color:#666666; font-size:14px;}
img{
float: right;
height: 150px;
margin: 10px -120px;
width: 120px;}
</style>
<script language='JavaScript' type='text/javascript'>
function check_value(fieldvalue)
{
switch(fieldvalue)
{
case 1:
document.getElementById("imagedest").innerHTML = "<img src='../../mayank /change_images_by_dropdown/images/Chrysanthemum.jpg'>";
break;
case 2:
document.getElementById("imagedest").innerHTML = "<img src='../../mayank/change_images_by_dropdown/images/Desert.jpg'>";
break;
case 3:
document.getElementById("imagedest").innerHTML = "<img src='../../mayank/change_images_by_dropdown/images/Hydrangeas.jpg'>";
break;
}
}
</script>
</head>
<body>
<div class="header">
<div class="headerin">
<div class="logo"><img src="images/big_logo.png" /></div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div class="divOuter">
<div class="left_feilds">
<p><input type="radio" id="class" name="chk" value="toi" checked>The Times of India<br/></p>
<p><input type="radio" id="Club" name="chk" value="tet">The Economic Times<br/></p>
<p><input type="radio" id="Club" name="chk" value="mirror">Mirror<br/></p>
<p><input type="radio" id="Club" name="chk" value="mht">Maharashtra Times<br/></p>
<p><input type="radio" id="Club" name="chk" value="nbt">NavBharat Times<br/></p>
<p><input type="radio" id="Club" name="chk" value="eis">Ei Samay<br/></p>
<p><input type="radio" id="Club" name="chk" value="ngs">NavGujarat Samay<br/></p>
<p><input type="radio" id="Club" name="chk" value="vke">VijayKarnataka ePaper<br/></p>
<form action="insert_image.php" method="post" enctype="multipart/form-data">
<p><input type="file" name="file" ></p>
<p><div class="submit"><input type="submit" value="Submit" name="Submit"></div></p>
</div>
<div class="left_right">
<div class="forms">
<select id="describe">
<option name="field" value="1" onclick='check_value(1)'>Ahmedabad</option>
<option name="field" value="2" onclick='check_value(2)'>Banglore</option>
<option name="field" value="3" onclick='check_value(3)'>Chennai</option>
<option name="field" value="4" onclick='check_value(4)'>Delhi</option>
<option name="field" value="5" onclick='check_value(5)'>Hyderabad</option>
<option name="field" value="6" onclick='check_value(6)'>Jaipur</option>
<option name="field" value="7" onclick='check_value(7)'>Kochi</option>
<option name="field" value="8" onclick='check_value(8)'>Kolkata</option>
<option name="field" value="9" onclick='check_value(9)'>Lucknow</option>
<option name="field" value="10" onclick='check_value(10)'>Mumbai</option>
<option name="field" value="11" onclick='check_value(11)'>NaviMumbai</option>
<option name="field" value="12" onclick='check_value(12)'>Pune</option>
<option name="field" value="13" onclick='check_value(13)'>Thane</option>
</select>
<div class="clr"></div>
<div class="imgs">
<img src="images/knowMore.png" alt="" />
</div>
</div>
<div class="clr"></div>
<div id='imagedest'></div>
</form>
</div>
<div class="clr"></div>
</div>
<div class="footer">
<div class="footerin">
<p>About Us | Advertise with Us | Terms of Use | Privacy Policy </p>
<p>Copyright © 2014 • All rights reserved. </p>
</div>
</div>
</body>
</html>

first add the onchange event on to checkbox.
test the condition checkbox is checked or not
if checkbox is checked then get the value of checkbox and change cities name accrodingly
same thing for cities name to change images
Someone could help you better if you provide the code whatever you have tried
here is a sample code you can get basic idea from
<input name="check" type="radio" onclick="changeCities(this,1)" value="1">having value 1
<input name="check" type="radio" onclick="changeCities(this, 2)" value="2">having value 2
<input name="check" type="radio" onclick="changeCities(this, 3)" value="3">having value 3
<br>
<br><br>
<select id="cities" onchange="getPhosts(this.value);">
<option value="1">india</option>
<option value="2">australia</option>
<option value="3">america</option>
</select>
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script>
function changeCities(thisObj, publisher) {
var publisher = publisher || $(thisObj).val();
// here get all the cities based on publishers
// i am writing here some static data
var cities = [{'id':'1', 'name':'dubai'}, {'id':'2', 'name':'arab'}];
var options = '';
for (var i = 0; i < cities.length; i++) {
options += "<option value='"+cities[i].id+"'>" + cities[i].name + "</option>";
}
$('#cities').html(options);
}
function getPhosts(city){
//same process like changeCities() for images here
}
</script>

Related

Using arrays to produce an output from a form. How do i change the order of this output?

The code below produces an output of
Apple,Orange
Sliced,Diced
Option1 Option2 Option3 Option4 ,Option1 Option2 Option3 Option4
I would like the output to be
Apple
Sliced
Option1 Option2 Option3 Option4
Orange
Diced
Option1 Option2 Option3 Option4
addOptions() creates the arrays from a form and showOptions() replaces elements with the array.
What needs to be changed in order to achieve this type of output? Please see this snippet
var fruit
var prep
var saladsArr = [];
var salad = {
"theFruit": []
, "thePrep": []
, "theOpt": []
};
function clickFruit() {
fruit = document.getElementById('theTable').theFruitRad.value;
console.log(fruit);
}
function clickPrep() {
prep = document.getElementById('theTable').thePrepRad.value;
console.log(prep);
}
// Create Arrays
function addOrder() {
addOptions(document.getElementById('theTable'));
}
function addOptions(frm) {
var buffTop = "";
for (var i in frm.theFruitRad) {
if (frm.theFruitRad[i].checked) salad.theFruit.push(frm.theFruitRad[i].value);
}
for (var i in frm.thePrepRad) {
if (frm.thePrepRad[i].checked) salad.thePrep.push(frm.thePrepRad[i].value);
}
for (var i in frm.chkbox) {
if (frm.chkbox[i].checked) {
buffTop += frm.chkbox[i].value + " "
}
}
salad.theOpt.push(buffTop);
console.log(saladsArr.length);
saladsArr.push(salad);
resetForms();
}
function showOptions(frm) {
for (var i = 0; i < saladsArr.length; i++) {
var salad = saladsArr[i];
var html_salad = "<div class='resFruit" + [i] + "'>" + salad.theFruit + "</div>";
html_salad += "<div class='resPrep" + [i] + "'>" + salad.thePrep + "</div>";
html_salad += "<div class='resOpt" + [i] + "'>" + salad.theOpt + "</div><br>";
}
document.getElementById('finResults').innerHTML = html_salad;
}
function test() {
console.log(salad);
console.log(salad.theFruit);
console.log(salad.thePrep);
console.log(salad.theOpt);
}
function resetForms() {
document.getElementById("theTable").reset();
}
div{
background:white;
}
.resFruit {
height: auto;
background: yellow;
color: black;
width: auto;
}
.resPrep {
height: auto;
background: green;
color: black;
width: auto;
}
.resOpt {
height: auto;
background: orange;
color: black;
width: auto;
}
table {
color: white;
}
#left {
background: red;
width: 50%;
height: 100%;
float: left;
color: white;
}
#right {
background: blue;
width: 50%;
height: 100%;
float: left;
color: white;
}
#inputButton {
vertical-align: bottom;
}
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel=stylesheet type="text/css" href="temp.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="temp1.js"></script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="left">
<form id="theTable"> <b><u>Fruit</u></b>
<br>
<label class="rad">
<input required required type="radio" name="theFruit" id="theFruitRad" onclick="clickFruit()" value="Apple" /><i></i> Apple</label>
<br>
<label class="rad">
<input required type="radio" name="theFruit" id="theFruitRad" onclick="clickFruit()" value="Orange" /> <i></i> Orange</label>
<br>
<label class="rad">
<input required type="radio" name="theFruit" id="theFruitRad" onclick="clickFruit()" value="Banana" /> <i></i> Banana</label>
<br>
<label class="rad">
<input required type="radio" name="theFruit" id="theFruitRad" onclick="clickFruit()" value="Pear" /> <i></i> Pear</label>
<br> <b><u><br>Prep</u></b>
<br>
<label class="rad">
<input type="radio" name="prep" id="thePrepRad" onclick="clickPrep()" value="Sliced" /> <i></i> Sliced</label>
<br>
<label class="rad">
<input type="radio" name="prep" id="thePrepRad" onclick="clickPrep()" value="Diced" /> <i></i> Diced</label>
<br>
<label class="rad">
<input type="radio" name="prep" id="thePrepRad" onclick="clickPrep()" value="Peeled" /> <i></i> Peeled</label>
<br>
<label class="rad">
<input type="radio" name="prep" id="thePrepRad" onclick="clickPrep()" value="Whole" /> <i></i> Whole</label>
<br> <b><u>Options</u></b><br>
<label class="ckb">
<input type="checkbox" name="chkbox1" id="chkbox" value="Option1" /> <i></i> Option1</label>
<br>
<label class="ckb">
<input type="checkbox" name="chkbox1" id="chkbox" value="Option2" /> <i></i> Option2</label>
<br>
<label class="ckb">
<input type="checkbox" name="chkbox1" id="chkbox" value="Option3" /> <i></i> Option3</label>
<Br>
<label class="ckb">
<input type="checkbox" name="chkbox1" id="chkbox" value="Option4" /> <i></i> Option4</label>
</Br>
</form>
</div>
<div id="right">
<div id="finResults"></div>
<center>
<input id="inputButton" type="button" value="Add" onClick="addOrder()" />
<input id="inputButton" type="button" value="test" onClick="test()" />
<input id="inputButton" type="button" value="Show Results" onClick="showOptions(document.getElementById('theTable'))" /> </center>
</div>
</body>
</html>

In order to get the desired output, you just need to add a for loop to your test function as follows:
function test() {
console.log(salad);
for(var i = 0; i < salad.theFruit.length; i++) {
console.log(salad.theFruit[i] || '');
console.log(salad.thePrep[i] || '');
console.log(salad.theOpt[i] || '');
console.log('');
}
}
Hope that's what you want.
When you print an array, it prints all the elements at once, separated by a comma. That was the case in your code which printed all the fruits at once, followed by preps and opts.
Adding a loop, we print the element at a particular index from all the 3 arrays at once. Thus, the element in the fruits array at the first position is printed, followed by the first element in the preps array, and the opts array. Then the elements at second position from all the 3 arrays and so on.

Change image in specified div when checkboxes are selected

I am wanting to display an image in a div when checkboxes or buttons are selected. I need to to be able to select multiple boxes and display a different image based on the total selection.
The selection matrix would be as follows: A, B, C, D, AB, AC, AD, BC, BD, ABC, ABD. C and D cannot appear together. When nothing is selected I want it to display image F.
I was also hoping to use Bootstrap styling to make them look like buttons not checkboxes.
<div>
<form name="test1">
<div data-toggle="buttons" class="btn-group itemcontent">
<label class="btn btn-default"><input type="checkbox" name="myimages" value="01" id="myimages" onclick="check_value(1)" />Selector1</label>
<label class="btn btn-default"><input type="checkbox" name="myimages" value="02" id="myimages" onclick="check_value(2)" />Selector2</label>
<label class="btn btn-default"><input type="checkbox" name="myimages" value="03" id="myimages" onclick="check_value(3)" />Selector3</label>
<label class="btn btn-default"><input type="checkbox" name="myimages" value="04" id="myimages" onclick="check_value(4)" />Selector4</label>
</form>
</div>
I was thinking of using a script like this:
function check_value(fieldvalue)
{
switch(fieldvalue)
{
case 1:
document.getElementById("imagetest").innerHTML = "<img src='img/600/600T_W_Base_Model.png'>";
break;
case 2:
document.getElementById("imagetest").innerHTML = "<img src='img/600/600T_W_DW.png'>";
break;
For my image display div:<div class="col-6" id="imagetest"></div>
But I'm honestly not sure where to go from here. I'm VERY new to JavaScript.
Thank you!
UPDATE
With a friends help we were able to come up with a test, but I can't get the code to work correctly...
<!DOCTYPE html>
<html>
<head>
<title>Test </title>
<script src="https://cdnjs.cloudflare.com/.../jquery/1.12.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/.../jque.../1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/.../jqu.../1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/.../3.3.6/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/.../3.3.6/css/bootstrap.css" />
<style type="text/css">
input {
display: none;
}
input:checked ~ label {
background: #00C000;
border: 1px solid #090;
color: #fff;
}
label {
background: #ddd;
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-khtml-user-select: none;
/* Konqueror */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
not supported by any browser */
padding: 10px 30px;
border: 1px solid #aaa;
color: #555;
}
</style>
</head>
<body>
<div id="form1">
<form name="test">
<span><input type="checkbox" id="chk1" onchange="check_value()" data-val="A"><label for="chk1">A</label></span>
<span><input type="checkbox" id="chk2" onchange="check_value()" data-val="B"><label for="chk2">B</label></span>
<span><input type="checkbox" id="chk3" onchange="check_value()" data-val="C"><label for="chk3">C</label></span>
<span><input type="checkbox" id="chk4" onchange="check_value()" data-val="D"><label for="chk4">D</label></span>
</form>
</div>
<div id="imagetest" style="height:200px;width: 200px; border: 5px solid red;">
</div>
</body>
<script type="text/javascript">
function check_value()
{
var myVal = '';
$("input[type=checkbox]").each(function()
{
if ($(this).is(':checked'))
{
myVal += $(this).data('val');
}
});
alert(myVal);
var myDiv = $('#imagetest');
if (myVal == 'A')
{
myDiv.css('background-color', 'blue');
}
else if (myVal == 'B')
{
myDiv.css('background-color', 'green');
}
else if (myVal == 'C')
{
myDiv.css('background-color', 'grey');
}
else if (myVal == 'D')
{
myDiv.css('background-color', 'pink');
}
else if (myVal == 'AB')
{
myDiv.css('background-color', 'orange');
}
else if (myVal == 'AC')
{
myDiv.css('background-color', 'yellow');
}
else if (myVal == 'AD')
{
myDiv.css('background-color', 'black');
}
else if (myVal == 'BC')
{
myDiv.css('background-color', 'lightblue');
}
else if (myVal == 'BD')
{
myDiv.css('background-color', 'lightgreen');
}
else if (myVal == 'ABC')
{
myDiv.css('background-color', 'brown');
}
else if (myVal == 'ABD')
{
myDiv.css('background-color', 'Cyan');
}
else
{
myDiv.css('background-color', 'white');
}
}
</script>
<style type="text/css">
input {
display: none;
}
input:checked ~ label {
background: #00C000;
border: 1px solid #090;
color: #fff;
}
label {
background: #ddd;
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-khtml-user-select: none;
/* Konqueror */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
not supported by any browser */
padding: 10px 30px;
border: 1px solid #aaa;
color: #555;
}
</style>
</html>
What am I doing wrong here..?

Ok, I got it you want to change image in radio-button selection. If you want to select multiple radio-button you must use another type, checkbox.
Vanilla JavaScript
This is a vanilla, pure javascript, code:
function changeImage(elem) {
var imageUrl = elem.getAttribute('image');
document.getElementById('imgview').setAttribute('src', imageUrl);
}
document.querySelector('[value="one"]').click();
<div id="form1">
<form name='test'>
<span><input onclick="changeImage(this)" type="radio" image="https://placebear.com/300/200" name="field" value="one">BASE</span>
<span><input onclick="changeImage(this)" type="radio" image="https://placebear.com/300/300" name="field" value="two">Deep Well </span>
<span><input onclick="changeImage(this)" type="radio" image="https://placebear.com/200/200" name="field" value="three">Extension </span>
<span><input onclick="changeImage(this)" type="radio" image="https://placebear.com/200/300" name="field" value="four">Treadmill</span>
<span><input onclick="changeImage(this)" type="radio" image="https://placebear.com/300/250" name="field" value="five">Stairs </span>
</form>
</div>
<div id="imagetest">
<img id="imgview" src="">
</div>
Simple explanation:
You give every radio button an attribute with the link (relative or absolute is your choice) and then in the function call grep the value for that attribute for the clicked element and set it as image element source.
jQuery
If you want to use jQuery to accomplish it this is a sample:
$(document).ready(function() {
$('#form1 input[name=field][value]').on('click', function(e) {
var imageUrl = $(this).attr('image');
$('#imgview').attr('src', imageUrl);
});
$('#form1 input[name=field][value=one]').click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="form1">
<form name='test'>
<span><input type="radio" image="https://placebear.com/300/200" name="field" value="one">BASE</span>
<span><input type="radio" image="https://placebear.com/300/300" name="field" value="two">Deep Well </span>
<span><input type="radio" image="https://placebear.com/200/200" name="field" value="three">Extension </span>
<span><input type="radio" image="https://placebear.com/200/300" name="field" value="four">Treadmill</span>
<span><input type="radio" image="https://placebear.com/300/250" name="field" value="five">Stairs </span>
</form>
</div>
<div id="imagetest">
<img id="imgview" src="">
</div>
Edit:
Multiple selection with multiple image view
$(document).ready(function() {
$('#form1 input[name=field][value]').on('click', function(e) {
var imageUrl = $(this).attr('image');
var fieldValue = $(this).val();
var idImage = 'image_' + fieldValue;
if ($(this).is(':checked')) {
$('#imagetest').append('<img src="' + imageUrl + '" id="' + idImage + '">');
} else {
$('#'+idImage).remove();
}
});
$('#form1 input[name=field][value=one]').click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="form1">
<form name='test'>
<label><input type="checkbox" image="https://placebear.com/300/200" name="field" value="one">BASE</label>
<label><input type="checkbox" image="https://placebear.com/300/300" name="field" value="two">Deep Well </label>
<label><input type="checkbox" image="https://placebear.com/200/200" name="field" value="three">Extension </label>
<label><input type="checkbox" image="https://placebear.com/200/300" name="field" value="four">Treadmill</label>
<label><input type="checkbox" image="https://placebear.com/300/250" name="field" value="five">Stairs </label>
</form>
</div>
<div id="imagetest">
</div>

Adding the total for a form Javascript

I have been working on this form and can't get past the CalculateTotal. I am completely lost on how to get this to add up and display in the box. Can anyone help?
Here is my jsfiddle http://jsfiddle.net/clbacon70/x6kjqbop/1/
var gc_fSandwichPrice = 5.99; // Price for each sandwich
var gc_fExtrasPrice = 1.50; // Price for each extra item
// GLOBAL VARS
// Global object vars
var divErrors;
var radSandwich;
var radSize;
var chkExtras;
// Other global vars
var g_fTotal;
var g_sSandwich;
var g_sSize;
var g_sExtras;
window.addEventListener('load', Init);
function Init() {
document.getElementById("h1Title").innerHTML = "Dirty Deli 1.0";
var spanExtrasPrice = document.getElementById("spanExtrasPrice");
var btnCalculateTotal = document.getElementById("btnCalculateTotal");
divErrors = document.getElementById("divErrors");
radSandwich = document.getElementsByName('radSandwich');
radSize = document.getElementsByName('radSize');
chkExtras = document.getElementsByName('chkExtras');
spanExtrasPrice.innerHTML = gc_fExtrasPrice.toFixed(2);
btnCalculateTotal.addEventListener('click', CalculateTotal);
} // function Init()
function CalculateTotal() {
divErrors.innerHTML = '';
if (radSandwich[0].checked) {
g_sSandwich = radSandwich[0].value;
} else if (radSandwich[1].checked) {
g_sSandwich = radSandwich[1].value;
} else if (radSandwich[2].checked) {
g_sSandwich = radSandwich[2].value;
} else if (radSandwich[3].checked) {
g_sSandwich = radSandwich[3].value;
} else {
divErrors.innerHTML = "Select a Sandwich";
return;
}
if (radSize[0].checked){
g_fTotal = radSize[0].title;
} else if (radSize[1].checked) {
g_fTotal = radSize[1].title;
} else if (radSize[2].checked) {
g_fTotal = radSize[2].title;
} else {
divErrors.innerHTML = "Please choose a size";
return;
}
if (chkExtras[0].checked) {
g_sExtras = chkExtras[0].value;
g_fTotal = g_fTotal + gc_fExtrasPrice;
}
if (chkExtras[1].checked) {
g_sExtras = g_sExtras + ',' + chkExtras[1].value;
g_fTotal = g_fTotal + gc_fExtrasPrice; }
if (chkExtras[2].checked) {
g_sExtras = g_sExtras +', ' + chkExtras[2].value;
g_fTotal = g_fTotal + gc_fExtrasPrice;
}
var textTotal = document.getElementById('textTotal');
textTotal.value = g_fTotal;
} // function CalculateTotal
function ProcessOrder() {
} // function ProcessOrder
* {
margin: 0;
padding: 0;
}
body {
background-color: #333;
}
#divWrapper {
background-color: #efe;
width: 40em;
border: solid black;
border-radius: 0 0 20px 20px;
border-width: 0 1px 1px 1px;
margin: 0 auto;
padding: 2em 1em;
}
h2 {
font-style: italic;
font-size: 1.3em;
color: #666;
margin-top: 0px;
}
input {
margin-right: 0.3em;
}
h3, p {
margin: 0.5em 0;
}
div#divErrors {
font-size: 110%;
color: white;
background: #f00;
margin-bottom: 0.5em;
}
#divPaymentInfo {
margin: 10px 0 20px 0;
padding-bottom: 10px;
border: solid black;
border-width: 1px 0;
}
#divCreditCardInfo {
font-size: .8em;
visibility: hidden;
margin-left: 1em;
display: inline;
}
#divOrder {
background: white;
min-height: 10em;
width: 25em;
border: 1px solid black;
margin: 0.5em 0;
padding: 10px;
}
<body>
<div id="divWrapper">
<form name="frmMain">
<h1 id="h1Title">Deli Form</h1>
<h2>Part 1</h2>
<h3>Sandwich</h3>
<label><input type="radio" name="radSandwich" value="Breast of Chicken">Breast of Chicken</label><br>
<label><input type="radio" name="radSandwich" value="Leg of Lamb">Leg of Lamb</label><br>
<label><input type="radio" name="radSandwich" value="Loin of Ham">Loin of Ham</label><br>
<label><input type="radio" name="radSandwich" value="ReelMeat®">ReelMeat®</label><br>
<br>
<h3>Size</h3>
<label><input type="radio" name="radSize" value="Manly Man" title="$4.99">Manly Man</label>
<label><input type="radio" name="radSize" value="Girly Man" title="$5.99">Girly Man</label>
<label><input type="radio" name="radSize" value="Super Girly Man" title="$6.99">Super Girly Man</label>
<br><br>
<h3>Extras ($<span id="spanExtrasPrice"></span> each)</h3>
<label><input type="checkbox" name="chkExtras" value="Deep-Fried Spam">Deep-Fried Spam</label><br>
<label><input type="checkbox" name="chkExtras" value="Toenails">Toenails</label><br>
<label><input type="checkbox" name="chkExtras" value="Secret Sauce">Secret Sauce</label><br>
<br><br>
Total: <input type="text" id="txtTotal" size="5"> <input type="button" id="btnCalculateTotal" value="Calculate Total">
<br><br>
<div id="divErrors"></div>
<div id="divPaymentInfo">
<h2>Part 2</h2>
<strong>Customer's Name:</strong> <input type="text" id="txtName">
<br><br>
<strong>Payment:</strong>
<select id="selPayment">
<option value="Cash" selected="selected">Cash</option>
<option value="Check">Check</option>
<option value="Credit Card">Credit Card</option>
</select>
<div id="divCreditCardInfo">
Card Number: <input type="text" id="txtCreditCardNbr" size="20">
Month: <input type="text" id="txtMonth" size="2"> Year:
<select id="selYear">
<option value="" selected="selected"></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="2010">2017</option>
<option value="2011">2018</option>
</select>
</div><!-- divCreditCardInfo -->
</div><!-- divPaymentInfo -->
<input type="button" id="btnProcessOrder" value="Process Order">
<div id="divOrder"></div>
<input type="reset" value="Reset">
</form>
</div> <!-- divWrapper -->
</body>

You have a typo in your javascript. You are attempting to fetch an html element with id textTotal, when the field you're interesting in is actually given the id txtTotal.
Fix that typo and it will work.

var textTotal = document.getElementById('textTotal');
Your selector is wrong. The element id of your textbox is txtTotal
so the following should work:
var textTotal = document.getElementById('txtTotal');

Here's a fixed copy of your jsFiddle: http://jsfiddle.net/dcseekcw/
What I fixed:
You were passing in $ along with values you were trying to add as floats. Removed them from your title values and only put it back in after the total is calculated.
Put in parseFloat so values could be added together instead of being concatenated as strings.
Initialised your g_fTotal and chkExtras variables.
Put in some basic checking so that radSize doesn't cause problems when it's not selected.

You have to add brackets after 'Init'.
window.addEventListener('load', Init());
And also there was a typo in the end of CalculateTotal function.
Here is working example:
http://jsfiddle.net/x6kjqbop/3/

How to limit checkbox selection to one using jquery or javascript

How to limit checkbox selection to one using jquery or javascript and other checkbox should be disabled after one checkbox selected?
<input type="checkbox" name="size[]" id="size" value="Small" />Small
<input type="checkbox" name="size[]" id="size" value="Medium" />Medium
<input type="checkbox" name="size[]" id="size" value="Large" />Large
<input type="checkbox" name="size[]" id="size" value="Xl" />XL
Here The Example But I Want Same Thing In Html Or Php
http://gravitywiz.com/demos/limit-how-many-checkboxes-can-be-checked/
Problem Is Solved Now Here The Final Solution
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$('input:checkbox').click(function(){
var $inputs = $('input:checkbox')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true);
}else{
$inputs.prop('disabled',false);
}
})
})
</script>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox" />

$("input[type='checkbox']").on("click" , function(){
$("input[type='checkbox']").not(this).attr("disabled", "disabled");
});
Working Example

If you disable, user can't change his choice after first selection.
Here is a radio button behavior for checkbox.
$("input[type=checkbox]").on('click', function() {
$("input[type=checkbox]").not(this).attr('checked', false);
});
http://jsfiddle.net/BxF4Y/
But to doing that, the best way is to use radio buttons.

Browsing the source code of that page reveals the jQuery they used to achieve that effect. You should just be able to change the checkboxLimit to 1.
<script type="text/javascript">
jQuery(document).ready(function($) {
$.fn.checkboxLimit = function(n) {
var checkboxes = this;
this.toggleDisable = function() {
// if we have reached or exceeded the limit, disable all other checkboxes
if(this.filter(':checked').length >= n) {
var unchecked = this.not(':checked');
unchecked.prop('disabled', true);
}
// if we are below the limit, make sure all checkboxes are available
else {
this.prop('disabled', false);
}
}
// when form is rendered, toggle disable
checkboxes.bind('gform_post_render', checkboxes.toggleDisable());
// when checkbox is clicked, toggle disable
checkboxes.click(function(event) {
checkboxes.toggleDisable();
// if we are equal to or below the limit, the field should be checked
return checkboxes.filter(':checked').length <= n;
});
}
$("#field_11_1 .gfield_checkbox input:checkbox").checkboxLimit(3);
});
</script>

Yes, this is an old thread, however there is no real conclusion here. I have included a fiddle with my version of how check-boxes should work should you wish to limit the number of boxes checked by the user.
/** Begin HTML **/
<div class="cContainer">
<div class="cDropdown">
<div class="downArrow"></div>
<h4>Night Life</h4>
</div>
<div class="multiCheckboxes stick">
<input id="1" class="stick" type="checkbox" value="1" name="l-28">
<label class="stick" for="1">Dive Bar</label>
<br>
<input id="2" class="stick" type="checkbox" value="2" name="l-28">
<label class="stick" for="2">Pub</label>
<br>
<input id="3" class="stick" type="checkbox" value="3" name="l-28">
<label class="stick" for="3">Dance Club</label>
<br>
<input id="4" class="stick" type="checkbox" value="4" name="l-28">
<label class="stick" for="4">Pool Hall</label>
<br>
<input id="5" class="stick" type="checkbox" value="5" name="l-28">
<label class="stick" for="5">Karaoke</label>
<br>
<input id="6" class="stick" type="checkbox" value="6" name="l-28">
<label class="stick" for="6">Sports Bar</label>
<br>
<input id="7" class="stick" type="checkbox" value="7" name="l-28">
<label class="stick" for="7">Trendy</label>
<br>
</div>
/** END HTML **/
/** BEGIN JS **/
$('.cDropdown').on('click', function (e) {
$('.multiCheckboxes').slideUp(50)
e.stopPropagation();
currentDrop = $(this).next();
currentDrop.stop().slideToggle();
});
$('input:checkbox[name="l-28"]').on('change', function () {
var nightLifeLimit = $('input:checkbox[name="l-28"]:checked').length;
if (nightLifeLimit == 2) {
$('input:checkbox[name="l-28"]').each(function () {
if ($(this).is(':checked')) {
return;
}
else {
$(this).prop('disabled', true);
}
});
}
else {
$('input:checkbox[name="l-28"]').each(function () {
$(this).prop('disabled', false);
});
}
});
/** END JS **/
/** BEGIN CSS **/
.cDropdown {
background: none repeat scroll 0 0 #FFFFFF;
border: 2px inset #D3D3D3;
clear: right;
padding: 4px 3px;
width: 150px;
}
.cDropdown h4 {
font-size: 0.86em;
font-weight: normal;
margin: 0 0 0 1px;
padding: 0;
}
.downArrow {
border-left: 8px solid rgba(0, 0, 0, 0);
border-right: 8px solid rgba(0, 0, 0, 0);
border-top: 8px solid #3C3C3C;
float: right;
height: 0;
margin: 3px 0 0 3px;
width: 0;
}
.multiCheckboxes {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #3C3C3C;
display: none;
left: 9px;
max-height: 200px;
overflow: auto;
padding: 5px;
position: absolute;
top: 35px;
width: 146px;
z-index: 999;
}
.multiCheckboxes label {
float: none !important;
font-size: 0.9em;
width: 7.6em !important;
}
http://jsfiddle.net/defmetalhead/9BYrm/1/

CSS,HTML formatting in a form

I have been trying to create a HTML form consisting of checkboxes in a dropdown. I have been able to do this part. But when you click on a particular dropdown, the remaining dropdown shift down. on the second click th dropdown collapses and they return to their original place. Please help me to correct this problem. I am trying to keep the position of the dropdown constant, if or not the checkboxes are visible.
What I am trying to achieve is something like the filters on the left hand side at http://www.luxuryretreats.com/. Would be thankful for any advise!
Here is the code.
<html>
<head>
<script type="text/javascript">
function ExposeList1() {
var showstatus = document.getElementById('ScrollCountry').style.display;
if (showstatus == 'none') {
document.getElementById('ScrollCountry').style.display = "block";
} else {
document.getElementById('ScrollCountry').style.display = 'none';
}
}
function ExposeList2() {
var showstatus = document.getElementById('Scrollguests').style.display;
if (showstatus == 'none') {
document.getElementById('Scrollguests').style.display = "block";
} else {
document.getElementById('Scrollguests').style.display = 'none';
}
}
function ExposeList3() {
var showstatus = document.getElementById('Scrollminprice').style.display;
if (showstatus == 'none') {
document.getElementById('Scrollminprice').style.display = "block";
} else {
document.getElementById('Scrollminprice').style.display = 'none';
}
}
function ExposeList4() {
var showstatus = document.getElementById('Scrollmaxprice').style.display;
if (showstatus == 'none') {
document.getElementById('Scrollmaxprice').style.display = "block";
} else {
document.getElementById('Scrollmaxprice').style.display = 'none';
}
}
</script>
</head>
<body>
<form action="trying.php" method="post">
<img src="original1.png" onmouseover="this.src='onhover1.png'"
onmouseout="this.src='original1.png'" onclick="ExposeList1()">
<div>
<div id="ScrollCountry"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="scb1" name="c1" value="Mexico">Mexico<br>
<input type="checkbox" id="scb2" name="c2" value="Belize">Belize<br>
<input type="checkbox" id="scb3" name="c3" value="Jamaica">Jamaica<br>
<input type="checkbox" id="scb4" name="c4" value="Thailand">Thailand<br>
<input type="checkbox" id="scb5" name="c5"
value="Turks & Caicos">Turks & Caicos<br>
<br />
</div>
</div>
<img src="original2.png" onmouseover="this.src='onhover2.png'"
onmouseout="this.src='original2.png'" onclick="ExposeList2()">
<div>
<div id="Scrollguests"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="n1" name="n1" value="4">2 - 4<br>
<input type="checkbox" id="n2" name="n2" value="6">4 - 6<br>
<input type="checkbox" id="n3" name="n3" value="8">6 - 8<br>
<input type="checkbox" id="n4" name="n4" value="10">8 -
10<br> <input type="checkbox" id="n5" name="n5" value="30">10+<br>
<br />
</div>
</div>
<img src="original3.png" onmouseover="this.src='onhover3.png'"
onmouseout="this.src='original3.png'" onclick="ExposeList3()">
<div>
<div id="Scrollminprice"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="mn1" name="mn1" value="200">200<br>
<input type="checkbox" id="mn2" name="mn2" value="300">300<br>
<input type="checkbox" id="mn3" name="mn3" value="400">400<br>
<input type="checkbox" id="mn4" name="mn4" value="500">500<br>
<input type="checkbox" id="mn5" name="mn5" value="600">600<br>
<br />
</div>
</div>
<img src="original4.png" onmouseover="this.src='onhover4.png'"
onmouseout="this.src='original4.png'" onclick="ExposeList4()">
<div>
<div id="Scrollmaxprice"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="mx1" name="mx1" value="600">600<br>
<input type="checkbox" id="mx2" name="mx2" value="700">700<br>
<input type="checkbox" id="mx3" name="mx3" value="800">800<br>
<input type="checkbox" id="mx4" name="mx4" value="900">900<br>
<input type="checkbox" id="mx5" name="mx5" value="1000">1000<br>
</div>
</div>
<input type="submit" />
</form>
</body>
</html>

You should put a position: absolute on your dropdown list. That way the other dropdown will not be impacted by the fact that you have open / close the other one.

Instead of using the display attribute, use the visibility attribute (visibility = visible | hidden). That would reserve the space required for the DIV irrespective whether is displayed or not.
Modified version here at jsfiddle.

We Keep Coding

JavaScript is the programming language of the Web.

Change form inputs based on selected values - javascript

Related

Using arrays to produce an output from a form. How do i change the order of this output?

Change image in specified div when checkboxes are selected

Adding the total for a form Javascript

How to limit checkbox selection to one using jquery or javascript

CSS,HTML formatting in a form

Categories

Resources