Develop Reference

Jquery - Hide Radio buttons - But Make the image clickable to show a bigger image

My Current HTML looks like this (I do not have any control over the HTML as its SAAS, so I can add only Jquery)
What I am trying to do is something like the following image. The problem is how to (1) hide the hide buttons from the display (but it should be in the background, meaning I need to know what image was selected in the form). (2) How to Pass the image name to <div class="Show-which-image-is-selected-here"> and change the source of that image.
Here is the HTML
<div class="col-sm-8">
<div id="input-option257">
<div class="radio">
<label>
<input type="radio" name="option[257]" value="133">
<img src="black-50x50.JPG" alt="Black " class="img-thumbnail">
Black
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="option[257]" value="141">
<img src="white-50x50.jpg" alt="White " class="img-thumbnail">
White
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="option[257]" value="136">
<img src="light%20grey-50x50.JPG" alt="Light Gray " class="img-thumbnail">
Light Gray
</label>
</div>
</div>
</div>
<div class="Show-which-image-is-selected-here">
<img src="<BIGIMAGE-black-50x50.JPG" alt="Black " class="img-thumbnail">
</div>
My jquery
$('#input-option257').parent().hide();

For point 1: you can just do it with CSS or you can also do it in jQuery if you can use CSS
for point number 2 just change the src attribute for the <img> inside the click() event handler
This is a working snippet, note that I added Images:
$(document).ready(function() {
// $("input[type='radio']").style({display:none})
$("img").click(function() {
$(this)
.parent()
.find("input[type='radio']")
.prop("checked", true);
$(".Show-which-image-is-selected-here img").attr(
"src",
$(this).attr("src")
);
});
});
input[type='radio'] {
display: none;
}
<div class="col-sm-8">
<div id="input-option257">
<div class="radio">
<label>
<input type="radio" name="option[257]" value="133">
<img src="https://via.placeholder.com/100x100?text=image+1" alt="Black " class="img-thumbnail"> Black
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="option[257]" value="141">
<img src="https://via.placeholder.com/100x100?text=image+2" alt="White " class="img-thumbnail"> White
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="option[257]" value="136">
<img src="https://via.placeholder.com/100x100?text=image+3" alt="Light Gray " class="img-thumbnail"> Light Gray
</label>
</div>
</div>
</div>
<div class="Show-which-image-is-selected-here">
<img src="https://via.placeholder.com/100x100?text=image+3" alt="Black " class="img-thumbnail">
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

Why is this.value undefined when getting value of images?

New to coding, please be gentle. This has to be done with pure JavaScript, due to limitations by our class. At the moment, all I'm trying to do is console.log() the value of the image clicked by the user. In this instance, it's either value="0" for "Rock", value="1" for "Paper" or value="2" for "Scissors". I'm unexperienced with using this.value, and I'm wondering if I can pass the value of the clicked image as a parameter to the function called "check()".
HTML
<img src="img/rock.png" alt="Rock" id="rock" value="0" onclick="check(this.value)">
<img src="img/paper.png" alt="Paper" id="paper" value="1" onclick="check(this.value)">
<img src="img/scissors.png" alt="Scissors" id="scissors" value="2" onclick="check(this.value)">
JavaScript (no jQuery)
function check(inputValue) {
console.log(inputValue);
}
I expect the output to be either 0, 1 or 2 depending on which image was clicked by the user. At the moment, all I'm getting is undefined.

Because images don't have a value attribute, this will always come back as undefined. An alternative would be to use a data attribute. These can be retrieved using this.dataset.<attributeName>.
For example, data-value would be accessed by doing this.dataset.value.
function check(inputValue) {
console.log(inputValue);
}
<img src="img/rock.png" alt="Rock" id="rock" data-value="0" onclick="check(this.dataset.value)">
<img src="img/paper.png" alt="Paper" id="paper" data-value="1" onclick="check(this.dataset.value)">
<img src="img/scissors.png" alt="Scissors" id="scissors" data-value="2" onclick="check(this.dataset.value)">

Images don't have a value attribute. You'd probably be better off using a data attribute.
function check(inputValue) {
console.log(inputValue.dataset.value);
}
<img src="img/rock.png" alt="Rock" id="rock" data-value="0" onclick="check(this)">
<img src="img/paper.png" alt="Paper" id="paper" data-value="1" onclick="check(this)">
<img src="img/scissors.png" alt="Scissors" id="scissors" data-value="2" onclick="check(this)">

Show/hide images using input radio

Explanation
I'm trying to show an image (and hide the others) based in an input radio selection. It does work when without label (also, of course, without its attributes), but when adding label it won't, probably because eq($(this).index()) isn't the same as before, so it selects a different object. Both the codes are below.
Codes
with label
$(document).ready(function() {
$('#radioDiv .inputRadio').change(function() {
$('.image').hide().eq($(this).index()).show();
});
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="radioDiv">
<input id="colorRed" class="inputRadio" type="radio" name="typeof" />
<label for="color-1" style="color: red">Red</label>
<input id="colorYellow" class="inputRadio" type="radio" name="typeof" />
<label for="colorYellow" style="color: yellow">Yellow</label>
<input id="colorGreen" class="inputRadio" type="radio" name="typeof" />
<label for="colorGreen" style="color: green">Green</label>
</div>
<div>
<div class="image hidden red">
<img src="http://placehold.it/50x50">
</div>
<div class="image hidden yellow">
<img src="http://placehold.it/100x100">
</div>
<div class="image hidden green">
<img src="http://placehold.it/150x150">
</div>
</div>
without label
$(document).ready(function() {
$('#radioDiv .inputRadio').change(function() {
$('.image').hide().eq($(this).index()).show();
});
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="radioDiv">
<input id="colorRed" class="inputRadio" type="radio" name="typeof" /> Red
<input id="colorYellow" class="inputRadio" type="radio" name="typeof" /> Yellow
<input id="colorGreen" class="inputRadio" type="radio" name="typeof" /> Green
</div>
<div>
<div class="image hidden red">
<img src="http://placehold.it/50x50">
</div>
<div class="image hidden yellow">
<img src="http://placehold.it/100x100">
</div>
<div class="image hidden green">
<img src="http://placehold.it/150x150">
</div>
</div>
Thanks in advance,
Luiz.

One approach could be adding data-* attributes to the input radios to save they target image. In the next example I used the data-target attribute for hold the target image of each input radio:
$(document).ready(function()
{
$('#radioDiv .inputRadio').change(function()
{
$('.image').hide();
$($(this).data("target")).show();
});
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="radioDiv">
<input id="colorRed" class="inputRadio" type="radio" name="typeof" data-target=".red"/>
<label for="color-1" style="color: red">Red</label>
<input id="colorYellow" class="inputRadio" type="radio" name="typeof" data-target=".yellow"/>
<label for="colorYellow" style="color: yellow">Yellow</label>
<input id="colorGreen" class="inputRadio" type="radio" name="typeof" data-target=".green"/>
<label for="colorGreen" style="color: green">Green</label>
</div>
<div>
<div class="image hidden red">
<img src="http://placehold.it/50x50">
</div>
<div class="image hidden yellow">
<img src="http://placehold.it/100x100">
</div>
<div class="image hidden green">
<img src="http://placehold.it/150x150">
</div>
</div>

You could wrap the label around the input of which the outcome would be the same without altering the indexes.
You'll want to slightly tweak the JS too so it's using the index of the label and not the input.
$(document).ready(function() {
$('#radioDiv .inputRadio').change(function() {
$('.image').hide().eq($(this).parent().index()).show();
});
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="radioDiv">
<label style="color: red"><input class="inputRadio" type="radio" name="typeof" /> Red</label>
<label style="color: yellow"><input class="inputRadio" type="radio" name="typeof" /> Yellow</label>
<label style="color: green"><input class="inputRadio" type="radio" name="typeof" /> Green</label>
</div>
<div>
<div class="image hidden red">
<img src="http://placehold.it/50x50">
</div>
<div class="image hidden yellow">
<img src="http://placehold.it/100x100">
</div>
<div class="image hidden green">
<img src="http://placehold.it/150x150">
</div>
</div>

Using session storage to save values in a form

Currently trying to use the following script to save the billing information i've included below on a page refresh. Hoping that this would clear up further errors i'm having down the line with redirecting users to paypal.
<script>
// Run on page load
window.onload = function() {
// If sessionStorage is storing default values (ex. name), exit the function and do not restore data
if (sessionStorage.getItem('billing_firstname') == "billing_firstname") {
return;
}
// If values are not blank, restore them to the fields
var billing_firstname = sessionStorage.getItem('billing_firstname');
if (billing_firstname !== null) $('#billing_firstname').val(billing_firstname);
var billing_state= sessionStorage.getItem('billing_state');
if (billing_state !== null) $('#billing_state').val(billing_state);
var billing_country= sessionStorage.getItem('billing_country');
if (billing_country!== null) $('#billing_country').val(billing_country);
}
// Before refreshing the page, save the form data to sessionStorage
window.onbeforeunload = function() {
sessionStorage.setItem("billing_firstname", $('#billing_firstname').val());
sessionStorage.setItem("billing_state", $('#billing_state').val());
sessionStorage.setItem("billing_country", $('#billing_country').val());
}
</script>
To save the following form (not added all the form labels to the script yet)
<div id="billing_info" class="pad10 boxShadow" style="display:block">
<!--START: SAVE_ADDRESSES-->
<div class="chkField">
<label for="save_address">[checkout3_PreviousAddresses]</label>
<select type="dropdown" name="save_address" onchange="javascript:filladdress_form(this,'billing','billing');check_address('billing');" tabindex="1" class="txtBoxStyle">
[address_billing_list]
</select>
<div class="clear"></div>
</div>
<!--END: SAVE_ADDRESSES-->
<div class="chkField">
<label for="billing_firstname">[CustomerInfo_firstname]</label>
<input name="billing_firstname" onchange="clearContent(this);" type="text" id="billing_firstname" value="[billing_firstname]" size="15" tabindex="2" class="txtBoxStyle" />
<!--START: req_billing_firstname-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_billing_firstname-->
<div class="clear"></div>
</div>
<div class="chkField">
<label for="billing_lastname">[CustomerInfo_lastname]</label>
<input name="billing_lastname" type="text" onchange="clearContent(this);" id="billing_lastname" value="[billing_lastname]" size="15" tabindex="3" class="txtBoxStyle" />
<!--START: req_billing_lastname-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_billing_lastname-->
<div class="clear"></div>
</div>
<div class="chkField">
<label for="billing_company">[CustomerInfo_company]</label>
<input name="billing_company" type="text" onchange="clearContent(this);" id="billing_company" value="[billing_company]" size="25" tabindex="4" class="txtBoxStyle" />
<div class="clear"></div>
</div>
<div class="chkField">
<label for="billing_state">[CustomerInfo_state]</label>
<select id="billing_state" onchange="this.form.billing_zip.value='';check_address('billing');" name="billing_state" tabindex="9" class="txtBoxStyle">
</select>
<!--START: req_billing_state-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_billing_state-->
<div class="clear"></div>
</div>
<div class="chkField">
<label for="billing_country">[CustomerInfo_country]</label>
<select name="billing_country" onchange="check_address('billing');" tabindex="8" class="txtBoxStyle" id="billing_country">
</select>
<!--START: req_billing_country-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_billing_country-->
<div class="clear"></div>
</div>
<div class="chkField">
<label for="billing_address">[CustomerInfo_address]</label>
<input name="billing_address" type="text" onchange="clearContent(this);[po_box_disabled_billing]" id="billing_address" value="[billing_address]" size="25" tabindex="5" class="txtBoxStyle" />
<!--START: req_billing_address-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_billing_address-->
<div class="clear"></div>
</div>
<div class="chkField">
<label for="billing_address2">[CustomerInfo_address2]</label>
<input name="billing_address2" type="text" onchange="clearContent(this);" id="billing_address2" value="[billing_address2]" size="25" tabindex="6" class="txtBoxStyle" />
<div class="clear"></div>
</div>
<div class="chkField">
<label for="billing_city">[CustomerInfo_city]</label>
<input name="billing_city" type="text" onchange="clearContent(this);" id="billing_city" value="[billing_city]" size="25" tabindex="7" class="txtBoxStyle" />
<!--START: req_billing_city-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_billing_city-->
<div class="clear"></div>
</div>
<div class="chkField">
<label for="billing_zip">[CustomerInfo_zip]</label>
<input name="billing_zip" maxlength="15" type="text" id="billing_zip" value="[billing_zip]" size="10" tabindex="10" class="txtBoxStyle" onchange="clearContent(this);check_address('billing');" />
<!--START: req_billing_zip-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_billing_zip-->
<div class="clear"></div>
</div>
<div class="chkField">
<label for="billing_phone">[CustomerInfo_phone]</label>
<input name="billing_phone" type="text" onchange="clearContent(this);" id="billing_phone" value="[billing_phone]" size="25" tabindex="5" class="txtBoxStyle" />
<!--START: req_billing_phone-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_billing_phone-->
<div class="clear"></div>
</div>
<div class="clear"></div>
I'm getting the following error.
Uncaught TypeError: $ is not a function
at window.onbeforeunload
new error
Uncaught TypeError: $ is not a function
at checkout_one.asp:1903
at dispatch (jquery.min.js:2)
at y.handle (jquery.min.js:2)
After adding
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have not called the script from anywhere in my code as of yet.

<script>
$( window ).load(function() {
if (sessionStorage.getItem('billing_firstname') == "billing_firstname")
{
return;
}
// If values are not blank, restore them to the fields
var billing_firstname = sessionStorage.getItem('billing_firstname');
if (billing_firstname !== null) $('#billing_firstname').val(billing_firstname);
var billing_state= sessionStorage.getItem('billing_state');
if (billing_state !== null) $('#billing_state').val(billing_state);
var billing_country= sessionStorage.getItem('billing_country');
if (billing_country!== null) $('#billing_country').val(billing_country);
}
});
$( window ).unload(function() {
sessionStorage.setItem("billing_firstname",
$('#billing_firstname').val());
sessionStorage.setItem("billing_state", $('#billing_state').val());
sessionStorage.setItem("billing_country", $('#billing_country').val());
});
</script>
and include jquery before any script library included or before this code ... first script should be jquery :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
and please post error after this since u r using jquery $(" ") without jquery i think you are mixing js and jquery in bad way . please check this once .

Multiple line text and image display

I am in need to display a Text in two lines with an image on its right side. Something like :
Image
ABCDEFGH Image
(ABC) Image
Image
However my output is making the text come down of the image and that also in a single line:
<div>
<br/>
<br/>
<br/>
<br/>
<img src="images/ecg.jpg" alt="ECG" height="100" width="300" align="middle">
<table cellpadding="0" cellspacing="0" border="0">
<tr class="row1">
<td><b>Electrocardiac Diagram </b></td>
<td><b>(ECG) </b></td>
</tr>
</table>
<br/>
<br/>
</div>
How can I achieve the same?

Right way to do this :
<div style="float:left">
<p><b>Electrocardiac Diagram </b></p>
<p><b>(ECG) </b></p>
</div>
<div style="float:left">
<img src="images/ecg.jpg" alt="ECG" height="100" width="300" align="middle">
</div>
Live Exemple : http://jsfiddle.net/dLZsQ/

Add style='float:right;' to your image like this
<img src="images/ecg.jpg" style='float:right;' alt="ECG" height="100" width="300" align="middle" />
Demo here