Changing image using Select option drop down, but for multiple events?

Changing image using Select option drop down, but for multiple events? - javascript

Using JQuery to change an image on the change of a select, the code works, on one form, however if I try to apply to same thing to another form the JQuery just doesn't work. Need to implement this one a basis where I can use the same code to change individual select.
Feel free to run the code and see what I mean, the first item works, change the select option to red, the image changes, try the same with the next one, no luck although its written in the same fashion.
If you need anything else let me know, thanks in advance.
$(function(){
$("#colour").on('change', function(){
$("#imageToSwap").attr("src", $(this).find(":selected").attr("data-src"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="shelf">
<li class="simpleCart_shelfItem">
<img id="imageToSwap" class="item_thumb" src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagBlack.png" />
<h4 class="item_name">C&J Wash Bag</h4>
<span class="item_price">£30.00</span>
<select id="colour">
<option value="Black" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagBlack.png">Black</option>
<option value="Red" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagRed.png">Red</option>
</select>
<select class="item_quantity">
<option value="0">0</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>
</select>
<input type="hidden" class="item_shipping" value="0" />
<input type="button" class="item_add" value="Add To Basket" />
</li>
<li class="simpleCart_shelfItem">
<img id="imageToSwap" class="item_thumb" src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBrown.png" />
<h4 class="item_name">C&J Wool Lined Gloves</h4>
<span class="item_price">£28.00</span>
<select id="colour">
<option value="Brown" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBrown.png">Brown</option>
<option value="Tan" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesTan.png">Tan</option>
<option value="Black" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBlack.png">Black</option>
<option value="Grey" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesGrey.png">Grey</option>
</select>
<select required class="item_quantity">
<option value="0">0</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>
</select>
<input type="hidden" class="item_shipping" value="0" />
<input type="button" class="item_add" value="Add To Basket" />
</li></ul>

It is bad thing to give same id to multiple element. There is same ID used for multiple element. Make it unique it works.
You can use class instead of id. like Here i give colour class and change image using sibling selector.
$(function(){
$(".colour").on('change', function(){
$(this).siblings(".item_thumb").attr("src", $(this).find(":selected").attr("data-src"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="shelf">
<li class="simpleCart_shelfItem">
<img id="imageToSwap" class="item_thumb" src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagBlack.png" />
<h4 class="item_name">C&J Wash Bag</h4>
<span class="item_price">£30.00</span>
<select id="colour" class="colour">
<option value="Black" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagBlack.png">Black</option>
<option value="Red" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagRed.png">Red</option>
</select>
<select class="item_quantity">
<option value="0">0</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>
</select>
<input type="hidden" class="item_shipping" value="0" />
<input type="button" class="item_add" value="Add To Basket" />
</li>
<li class="simpleCart_shelfItem">
<img id="imageToSwap1" class="item_thumb" src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBrown.png" />
<h4 class="item_name">C&J Wool Lined Gloves</h4>
<span class="item_price">£28.00</span>
<select id="colour1" class="colour">
<option value="Brown" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBrown.png">Brown</option>
<option value="Tan" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesTan.png">Tan</option>
<option value="Black" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBlack.png">Black</option>
<option value="Grey" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesGrey.png">Grey</option>
</select>
<select required class="item_quantity">
<option value="0">0</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>
</select>
<input type="hidden" class="item_shipping" value="0" />
<input type="button" class="item_add" value="Add To Basket" />
</li></ul>
Hope it helps.

It looks to me that you have "imageToSwap" duplicated. Therefore the function isn't able to locate the correct object to refresh.

As part of W3C rules, a html cannot contain duplicate ids. So I would suggest to change the ids and perform your color change by picking up class as below:
Changes -
Added class colorChange to your color select element and changed its
ids
Changed event change to fire on class and getting the actual target image with $(this) reaching to its parent li and getting the img with class image_thumb
$(function() {
$(".colorChange").on('change', function() {
$(this).closest('li').find('.item_thumb').attr("src", $(this).find(":selected").attr("data-src"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="shelf">
<li class="simpleCart_shelfItem">
<img id="imageToSwap" class="item_thumb" src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagBlack.png" />
<h4 class="item_name">C&J Wash Bag</h4>
<span class="item_price">£30.00</span>
<select id="colour" class="colorChange">
<option value="Black" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagBlack.png">Black</option>
<option value="Red" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagRed.png">Red</option>
</select>
<select class="item_quantity">
<option value="0">0</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>
</select>
<input type="hidden" class="item_shipping" value="0" />
<input type="button" class="item_add" value="Add To Basket" />
</li>
<li class="simpleCart_shelfItem">
<img id="imageToSwap1" class="item_thumb" src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBrown.png" />
<h4 class="item_name">C&J Wool Lined Gloves</h4>
<span class="item_price">£28.00</span>
<select id="colour1" class="colorChange">
<option value="Brown" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBrown.png">Brown</option>
<option value="Tan" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesTan.png">Tan</option>
<option value="Black" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBlack.png">Black</option>
<option value="Grey" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesGrey.png">Grey</option>
</select>
<select required class="item_quantity">
<option value="0">0</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>
</select>
<input type="hidden" class="item_shipping" value="0" />
<input type="button" class="item_add" value="Add To Basket" />
</li>
</ul>

Related

Add 2 days to "Check In Date" on Booking Widget

I have a booking widget on my website which checks the availability of the accommodation on a linked booking website.
I would like to have the "check out date" automatically be '2 days later' than the check in date, unless the user selects otherwise.
Eg: Check in date (entered on calendar by user) 1 September 2016
Check out date - automatically has a text of 3 September 2016
THis is the code for my iFrame Widget:
<div id="booking_widget">
<form class="formtastic" target="_blank" action="/properties/airportgamedirect?locale=en" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
<input type="hidden" name="locale" id="locale" value="en">
<input type="hidden" name="from_widget" id="from_widget" value="true">
<fieldset class="inputs">
<ol>
<li class="string">
<label>Check In Date</label>
<input type="text" name="check_in_date_view" id="check_in_date_view" class="calendar hasDatepicker" data-init-val="null"><img class="ui-datepicker-trigger" src="https://d3ltdu8ywan39g.cloudfront.net/assets/cal_button-27edd7f4d9f9f1a1ef085e5b4e139081.png" alt="Select a date" title="Select a date"><input type="hidden" name="check_in_date" id="check_in_date" value="">
</li>
<li class="string">
<label>Check Out Date</label>
<input type="text" name="check_out_date_view" id="check_out_date_view" class="calendar hasDatepicker" data-init-val="null"><img class="ui-datepicker-trigger" src="https://d3ltdu8ywan39g.cloudfront.net/assets/cal_button-27edd7f4d9f9f1a1ef085e5b4e139081.png" alt="Select a date" title="Select a date"><input type="hidden" name="check_out_date" id="check_out_date">
</li>
<li class="select_occupancies">
<label>Adults</label>
<select name="number_adults" id="number_adults"><option value="0">0</option>
<option selected="selected" 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></select>
</li>
<li class="select_occupancies">
<label>Children</label>
<select name="number_children" id="number_children"><option value="0">0</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></select>
</li>
</ol>
</fieldset>
<fieldset class="actions">
<ol>
<li><input type="submit" name="commit" value=" Check Availability" class="check_availability"></li>
</ol>
</fieldset>
</form>
</div>
I have tried
<input type="text" name="check_out_date_view" id="check_out_date_view" class="calendar hasDatepicker" data-init-value="text" value="check_in_date">
but that just adds the text "check_In_date" instead of the "check_in_date" value from the above field

You have to set and event listener on the check-in date box, once the user pick a date. you update the check-out box, something like this
$( "#check_in_date" ).change(function() {
//add two days
var checkoutDate = new Date($(this).val)
checkoutDate.setDate(checkoutDate.getDate() + 2)
//update check-out input
$( "#check_out_date" ).val(checkoutDate)
});

Getting input value from a data attribute

I have this code below where user can choose - each dropdown option has different data-tenure:
<div class="ten columns">
<p class="slider-label">Loan Tenure (Years)</p>
<!-- <input type="text" class="loan-tenure numeric-only" /> -->
<div class="field">
<div class="picker picker-dd2">
<select class="dropdown2 loan-tenure">
<option class="dropdown2-opt" data-tenure=“0.0298” value="1">1</option>
<option class="dropdown2-opt" data-tenure=“0.0387” value="2">2</option>
<option class="dropdown2-opt" data-tenure=“0.0418” value="3">3</option>
<option class="dropdown2-opt" data-tenure=“0.0434” value="4">4</option>
<option class="dropdown2-opt" data-tenure=“0.0444” value="5">5</option>
</select>
</div>
</div>
</div>
What I want is to set the input value to the data-tenure above - :
<input type="hidden" class="loan-rate" value="??" />
Do I need to add onchange() function to the dropdown above?

Edit, Updated
I meant - getting the data-tenure and this will be the input value. So
if the user selects 1, the input value will be 0.0298. If the user
selects 2 the input value will be 0.0387
You can use change event at .dropdown2 element, document.querySelector() with selector "input.loan-rate", set .value property with event.target Element.dataset at change event handler
document.querySelector(".dropdown2").addEventListener("change", function(event) {
// set value here
document.querySelector("input.loan-rate")
.value = event.target.dataset.tenure;
})

<select class="dropdown2 loan-tenure" id="selectId">
<option class="dropdown2-opt" data-tenure=“0.0298” value="1">1</option>
<option class="dropdown2-opt" data-tenure=“0.0387” value="2">2</option>
<option class="dropdown2-opt" data-tenure=“0.0418” value="3">3</option>
<option class="dropdown2-opt" data-tenure=“0.0434” value="4">4</option>
<option class="dropdown2-opt" data-tenure=“0.0444” value="5">5</option>
</select>
$(document).ready(function(){
$("#selectId").change(function(){
alert($("#selectId option:selected").attr("data-tenure"));
alert($("#selectId").val());
});
});

Try the below code. Here we are passing the object via an onchange event.
<div class="ten columns">
<p class="slider-label">Loan Tenure (Years)</p>
<!-- <input type="text" class="loan-tenure numeric-only" /> -->
<div class="field">
<div class="picker picker-dd2">
<select onchange="tenure_rates(this)" class="dropdown2 loan-tenure">
<option class="dropdown2-opt" data-tenure=“0.0298” value="1">1</option>
<option class="dropdown2-opt" data-tenure=“0.0387” value="2">2</option>
<option class="dropdown2-opt" data-tenure=“0.0418” value="3">3</option>
<option class="dropdown2-opt" data-tenure=“0.0434” value="4">4</option>
<option class="dropdown2-opt" data-tenure=“0.0444” value="5">5</option>
</select>
</div>
</div>
</div>
<script type="text/javascript">
function tenure_rates(dropdownValue) {
$('.dropdown2-opt').data('tenure',dropdownValue.value);
}
</script>

why don't you use select tag to take input
<select name="" form="tenureform">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>

<select onchange="changeInput()" class="dropdown2 loan-tenure">
<option class="dropdown2-opt" data-tenure=“0.0298” value="1">1</option>
<option class="dropdown2-opt" data-tenure=“0.0387” value="2">2</option>
<option class="dropdown2-opt" data-tenure=“0.0418” value="3">3</option>
<option class="dropdown2-opt" data-tenure=“0.0434” value="4">4</option>
<option class="dropdown2-opt" data-tenure=“0.0444” value="5">5</option>
</select>
function onChange(evt) {
document.querySelector("input.loan-rate").dataset.tenure = evt.currentTarget.value;
}

This is a vanilla js solution. There will probably be tons of jquery responses. You do need the onchange event:
<select class="dropdown2 loan-tenure" onchange="document.getElementById('loanrate').value = this.options[this.selectedIndex].dataset.tenure">
Make sure you add the id 'loadrate' to your input. See it in action here.

You can use selectedIndex to get the the current selected option. Then use getAttributeto get the data-tenure attribute value.Use getElementsByClassName to select the hidden input element and set it's value.
function tenure_rates(){
var e = document.getElementById("dropdown2");
var _option = e.options[e.selectedIndex].getAttribute('data-tenure');
document.getElementsByClassName('loan-rate')[0].value = _option;
}
JSFIDDLE
Note: Initially the value of hidden field will always be empty,since 1 is pre selected. So if an user don't change the option you will never find any value set this hidden element. You can select an option like Select

Try it :
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="ten columns">
<input type="hidden" class="loan-rate" value="" />
<p class="slider-label">Loan Tenure (Years)</p>
<!-- <input type="text" class="loan-tenure numeric-only" /> -->
<div class="field">
<div class="picker picker-dd2">
<select class="dropdown2 loan-tenure">
<option class="dropdown2-opt" data-tenure=“0.0298” value="1">1</option>
<option class="dropdown2-opt" data-tenure=“0.0387” value="2">2</option>
<option class="dropdown2-opt" data-tenure=“0.0418” value="3">3</option>
<option class="dropdown2-opt" data-tenure=“0.0434” value="4">4</option>
<option class="dropdown2-opt" data-tenure=“0.0444” value="5">5</option>
</select>
</div>
</div>
</div>
<script>
var sel = document.querySelector(".loan-tenure");
var hidEle = document.querySelector(".loan-rate");
sel.onchange = function(){
var value = sel.value;
hidEle.setAttribute("value",value);
alert("Input hidden value is : " + hidEle.getAttribute("value"));
}
</script>
</body>
</html>

want to disable my next button until my all option are filled using javascript

I have 6 dropdowns and next button and previous button.
i need to disable the next button until my 6 dropdowns are filled.
after filled all 6 drop drowns the "next" button wants to enable..
below code is the dropdown code:
<div class="q_category_details_right">
<img class="question_arrow1" src="left_arrow.png" id="firstpointer"/>
<div class="q_cell select_boxes margin_bottom_20">
<select onchange="currentChange(${jvar_question_number*2 +1}, this)" id="current${jvar_question_number*2 +1}">
<option value=""></option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="N">N</option>
</select>
<img src="command_active.png" width="10" class="comment" id="imgCurrent${jvar_question_number*2 +1}" onclick="popup(this)"/>
</div>
<div class="q_cell select_boxes">
<select id="target${jvar_question_number*2 +1}" disabled="true">
<option value=""></option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="N" class="hide">N</option>
</select>
<img src="comment_icon.png" width="10" class="comment" id="imgTarget${jvar_question_number*2 +1}" onclick="popup(this)"/>
</div>
<div class="q_cell select_boxes">
<select id="importance${jvar_question_number*2 +1}" disabled="true">
<option value=""></option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="N" class="hide">N</option>
</select>
<img src="comment_icon.png" width="10" class="comment" id="imgImportance${jvar_question_number*2 +1}" onclick="popup(this)"/>
</div>
</div>
</div>
<j:if test="${questionsDB.next()}">
<div class="questions_content questionlist2" onClick="changeInstruct(2)">
<div class="q_category_details_left margin_bottom_20">
<div class="display_table padding_left_20">
<div class="left_float">
<p> ${jvar_question_number*2 +2}</p>
</div>
<div class="right_float">
<p>
${questionsDB.assessment_questions}
</p>
</div>
</div>
</div>
<div class="q_category_details_right">
<img style="display:none;" src="left_arrow.png" id="secondpointer" class="question_arrow2"/>
<div class="q_cell select_boxes margin_bottom_20">
<select onchange="currentChange(${jvar_question_number*2 +2}, this)" id="current${jvar_question_number*2 +2}">
<option value=""></option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="N">N</option>
</select>
<img src="command_active.png" width="10" class="comment" id="imgCurrent${jvar_question_number*2 +2}" onclick="popup(this)"/>
</div>
<div class="q_cell select_boxes">
<select id="target${jvar_question_number*2 +2}" disabled="true">
<option value=""></option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="N" class="hide">N</option>
</select>
<img src="comment_icon.png" width="10" class="comment" id="imgTarget${jvar_question_number*2 +2}" onclick="popup(this)"/>
</div>
<div class="q_cell select_boxes">
<select id="importance${jvar_question_number*2 +2}" disabled="true">
<option value=""></option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="N" class="hide">N</option>
</select>
<img src="comment_icon.png" width="10" class="comment" id="imgImportance${jvar_question_number*2 +2}" onclick="popup(this)"/>
</div>
</div>
</div>
the button id is "next"

$('select').on('change', function(){
var isEmpty = false;
$(select).each(function(){
if(!$(this).val()) {
isEmpty = true;
}
});
isEmpty ? $('your button id').prop('disabled', true) : $('your button id').prop('disabled', false);
});

You need to bind a change event to the select box and keep checking if all of them have been selected (assuming selecting means value != "" )
//bind an change event
$( ".select_boxes select" ).change( function(){
var allselectboxchecked = true;
$( ".select_boxes select" ).each( function(){
if ( $( this ).val() == "" )
{
allselectboxchecked = false;
}
} );
//if all select boxes are selected then enable your button
if ( allselectboxchecked )
{
//enable the button
}
} );

Display multiple selectbox and radio button values values in div

I have a site that allows users to "guess / predict" the result of a sports match
To give you an idea what I am trying to achieve have a look at the following image:
The selected teams gets displayed at the bottom of the page (as you can see on the bottom circle of the image)
What Im trying to do
Im trying to modify the script to not only display the selected team at the bottom of the page but also the selected score
Example
Chiefs by 12
Have a look at my fiddle to get an idea of what I am doing, if anyone can help me to modify my script to include the score aswell it would be tremendously appreciated
My Code:
$(document).ready(function() {
$(':radio').change(function(e) {
//clear the div
$('#dispPicks').html('');
//update the div
$(':radio:checked').each(function(ind, ele) {
$('#dispPicks').append($(ele).val() + '<br/>');
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="foo" value="Shaks" />
<input type="radio" name="foo" value="Hurricanes" />
<input type="radio" name="foo" value="Draw" />
<select>
<option value="">0</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>
</select>
<br/>
<input type="radio" name="bar" value="Crusaders" />
<input type="radio" name="bar" value="Pioneers" />
<input type="radio" name="bar" value="Draw" />
<select>
<option value="">0</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>
</select>
<br/>
<input type="radio" name="wow" value="Chelsea" />
<input type="radio" name="wow" value="Liverpool" />
<input type="radio" name="wow" value="Draw" />
<select>
<option value="">0</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>
</select>
<div id="dispPicks"></div>
Fiddle Link

You can put related radio buttons and select box in a div and assign a class to it lets say team, then read checked radio button and value of select box in the same div as checked radio button belogs to. see below code -
HTML
<div class="team">
<input type="radio" name="foo" value="Shaks" />
<input type="radio" name="foo" value="Hurricanes" />
<input type="radio" name="foo" value="Draw" />
<select>
<option value="">0</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>
</select>
<br/>
</div>
<div class="team">
<input type="radio" name="bar" value="Crusaders" />
<input type="radio" name="bar" value="Pioneers" />
<input type="radio" name="bar" value="Draw" />
<select>
<option value="">0</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>
</select>
<br/>
</div>
<div class="team">
<input type="radio" name="wow" value="Chelsea" />
<input type="radio" name="wow" value="Liverpool" />
<input type="radio" name="wow" value="Draw" />
<select>
<option value="">0</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>
</select>
</div>
<div id="dispPicks"></div>
JQuery
$(document).ready(function () {
$(':radio, select').change(function (e) {
//clear the div
$('#dispPicks').html('');
//update the div
$(':radio:checked').each(function (ind, ele) {
var selectBoxVal = $(this).closest('div.team').find('select').val();
selectBoxVal = selectBoxVal!=''? "By "+selectBoxVal:selectBoxVal;
$('#dispPicks').append($(ele).val() +" "+selectBoxVal+ '<br/>');
});
});
});
JSfiddle Demo

I've made a few changes which I thought were essential:
1. since a team can't win by the score of 0, 0 is out of the select boxes
2. I gave all the select tags a data-name according to its radio button's names
and here we go DEMO
$(document).ready(function () {
$(':radio, select').change(function (e) {
//clear the div
$('#dispPicks').html('');
//update the div
$(':radio:checked').each(function (ind, ele) {
var name=$(this).attr('name');
if($(this).val()=='Draw'){
$('#dispPicks').append($(ele).val());
}
else{
$('#dispPicks').append($(ele).val() + ' by '+$('select[data-name='+name+']').val() + '<br>');
}
});
});
});

I think you to use more id's and names.
This is what i made for you, it just basic to let you understand what i mean:
$(':radio').change(function(e) {
x = $(this).attr('name');
y = $('input[name=' + x + ']:checked').val();
$("#" + x).html(y);
});
$("select").change(function() {
x = $(this).attr('name');
y = $(this).val();
$("#" + x).html(" by " + y);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="pick1" value="Shaks" />
<input type="radio" name="pick1" value="Hurricanes" />
<input type="radio" name="pick1" value="Draw" />
<select name="howMuch1">
<option value="">0</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>
</select>
<input type="radio" name="pick2" value="Chelsea" />
<input type="radio" name="pick2" value="Liverpool" />
<input type="radio" name="pick2" value="Draw" />
<select name="howMuch2">
<option value="">0</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>
</select>
<div id="picks">
<br /><span id="pick1"></span><span id="howMuch1"></span>
<br /><span id="pick2"></span><span id="howMuch2"></span>
</div>
On event (change) we make x our target and y our value.. rest is a case of put it right ;)

Hide label when select item from list - javascript

How i can hide label when the user select item from list , i have this code to hide input text , but how i can hide the label for that input text?
<form name="myform">
<table>
<td>
<select name="one" onchange="if (this.selectedIndex==8){this.myform['other'].style.visibility='visible'}else {this.myform['other'].style.visibility='hidden'};">
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">3</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="other">Other</option>
</select>
<label>Other</label><input type="textbox" name="other" style="visibility:hidden;"/>
</td>
</table>
</form>
i want to hide <label>Other</label> how i can do that ?

DEMO
you can not match text or value of dropdown like this this.selectedIndex
change it to this.selectedIndex == 8 to match the index
give textbox id="other" to show or hide it.
<select name="one" onchange="if (this.selectedIndex== 8){document.getElementById('other').style.visibility='visible'}else {document.getElementById('other').style.visibility='hidden'};">
Updated Demo
made new id for label l_other
<select name="one" onchange="if (this.selectedIndex== 8){document.getElementById('l_other').style.visibility='visible';
document.getElementById('other').style.visibility='visible'}else {document.getElementById('l_other').style.visibility='hidden';
document.getElementById('other').style.visibility='hidden'};">
Demo
Making use of single div with id other wrap label and textbox inside it
<select name="one" onchange="if (this.selectedIndex== 8){
document.getElementById('other').style.visibility='visible'}else{
document.getElementById('other').style.visibility='hidden'}">

Change your select tag and input text as below.
<select name="one" onchange="if (this.selectedIndex=='other'){document.getElementById("otherText").style.visibility='visible'}else {document.getElementById("otherText").style.visibility='hidden'};">
<div id="otherText" style="visibility:hidden;"><label>Other</label><input type="textbox" name="other" /></div>
Hope this helps.

function OnChange(that) {
var lblOther = document.getElementById('lblOther');
if (that.options[that.selectedIndex].text == 'Other') {
lblOther.style.display = "block";
}
else {
lblOther.style.display = "none";
};
}
<form name="myform">
<table>
<td>
<select name="one" onchange="OnChange(this);">
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">3</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="other">Other</option>
</select>
<label id="lblOther" style="display: block;">Other</label><input type="textbox" name="other" style="visibility: hidden;" />
</td>
</table>
</form>

Develop Reference

JavaScript is the programming language of the Web.

Changing image using Select option drop down, but for multiple events? - javascript

It looks to me that you have "imageToSwap" duplicated. Therefore the function isn't able to locate the correct object to refresh.

Related

Add 2 days to "Check In Date" on Booking Widget

Getting input value from a data attribute

want to disable my next button until my all option are filled using javascript

Display multiple selectbox and radio button values values in div

Hide label when select item from list - javascript

Categories

Resources