We Keep Coding

"Video select screen" via radio buttons

i have the following problem. I try to make some kind of "video select screen" where you have the option to choose what kind of video you want to see AND choose what music genre you want to listen to while the video plays (there is one video-file for every possible choice). I tried to write a function that changes the src of the video but i just cant make it work and i dont know why.
This is my code so far:
HTML:
<form>
<h3>Customize your own Showreel</h3>
<fieldset>
<input type="radio" id="commercials" name="selection" value="com">
<label for="commercials">Commercials</label>
<input type="radio" id="mixed" name="selection" value="mix" checked="checked">
<label for="mixed">Mixed</label>
<input type="radio" id="videoclip" name="selection" value="vid">
<label for="videoclip">Videoclips</label>
</fieldset>
<h4>Select Music</h4>
<fieldset>
<input type="radio" id="pop" name="musicselection" value="pop" checked="checked">
<label for="pop">Pop</label>
<input type="radio" id="rock" name="musicselection" value="rock">
<label for="rock">Rock</label>
</fieldset>
<video id="theVideo" controls></video>
<button type="button" id="theVideo" onclick="playselected();">play</button>
</form>
Javascript:
function playselected() {
var music = document.getElementsByName("musicselection");
var selection = document.getElementsByName("selection");
var theVid = document.getElementById("theVideo");
if (music.value == "com" && selection.value == "pop") {
theVid.src = "videos/com_pop.mp4";
}
if (music.value == "com" && selection.value == "rock") {
theVid.src = "videos/com_rock.mp4";
}
if (music.value == "mix" && selection.value == "pop") {
theVid.src = "videos/mix_pop.mp4";
}
if (music.value == "mix" && selection.value == "rock") {
theVid.src = "videos/mix_rock.mp4";
}
if (music.value == "vid" && selection.value == "pop") {
theVid.src = "videos/vid_pop.mp4";
}
if (music.value == "vid" && selection.value == "rock") {
theVid.src = "videos/vid_rock.mp4";
}
}
This is what i came up with. I hope my attempt to takle the problem is even pointing in the right direction. (im new to javascript and html and im teaching myself how to code. please dont be too harsh)

That's because getElementsByName returns a NodeList, which means that you have to iterate through the collection to access the value of the selected radio button. Therefore, you can convert the NodeList into an array using Array.prototype.slice.call(<NodeList>), perform filtering on it to return radio buttons that are checked, and then use it to access its value:
var musicValue = Array.prototype.slice.call(music).filter(function(musicRadioButton) {
return musicRadioButton.checked;
})[0].value;
var selectionValue = Array.prototype.slice.call(selection).filter(function(selectionRadioButton) {
return selectionRadiobutton.checked;
})[0].value;
Further explanation on the code block above:
Array.prototype.slice.call(music) converts the music NodeList into an array of elements
We then use .filter() to go through the returned array. In the callback, we ensure that we only select/filter for radio buttons that are checked, i.e. .checked property returns a truthy value.
Chain [0] after the .filter() call to get the first checked radio button
Chain .value to get the value of the first checked radio button
Then in your if/else blocks, instead of checking for music.value or selection.value, you can refer to musicValue and selectionValue instead:
function playselected() {
var music = document.getElementsByName("musicselection");
var selection = document.getElementsByName("selection");
var theVid = document.getElementById("theVideo");
var musicValue = Array.prototype.slice.call(music).filter(function(musicRadioButton) {
return musicRadioButton.checked;
})[0].value;
var selectionValue = Array.prototype.slice.call(selection).filter(function(selectionRadioButton) {
return selectionRadiobutton.checked;
})[0].value;
if (musicValue == "com" && selectionValue == "pop") {
theVid.src = "videos/com_pop.mp4";
}
if (musicValue == "com" && selectionValue == "rock") {
theVid.src = "videos/com_rock.mp4";
}
if (musicValue == "mix" && selectionValue == "pop") {
theVid.src = "videos/mix_pop.mp4";
}
if (musicValue == "mix" && selectionValue == "rock") {
theVid.src = "videos/mix_rock.mp4";
}
if (musicValue == "vid" && selectionValue == "pop") {
theVid.src = "videos/vid_pop.mp4";
}
if (musicValue == "vid" && selectionValue == "rock") {
theVid.src = "videos/vid_rock.mp4";
}
}
<form>
<h3>Customize your own Showreel</h3>
<fieldset>
<input type="radio" id="commercials" name="selection" value="com">
<label for="commercials">Commercials</label>
<input type="radio" id="mixed" name="selection" value="mix" checked="checked">
<label for="mixed">Mixed</label>
<input type="radio" id="videoclip" name="selection" value="vid">
<label for="videoclip">Videoclips</label>
</fieldset>
<h4>Select Music</h4>
<fieldset>
<input type="radio" id="pop" name="musicselection" value="pop" checked="checked">
<label for="pop">Pop</label>
<input type="radio" id="rock" name="musicselection" value="rock">
<label for="rock">Rock</label>
</fieldset>
<video id="theVideo" controls></video>
<button type="button" id="theVideo" onclick="playselected();">play</button>
</form>

Radio Button not Working in ie

I have 4 radio button in my form, once i submit the form any of the radio button should checked, if not a alert message will be displayed. its working properly in chrome, firefox, but in ie one i checked the radion it always showing the alert so i cant submit the form, i have given my code below please help me
PHP:
<form action="user_register.php" method="POST" name="myForm" onsubmit="return validateForm()" enctype="multipart/form-data">
<label>USERNAME:</label></td>
<input type="text" name="username" class="regtext" required/>
<label>RESIDING CITY:</label></td>
<input type="text" name="city" class="regtext" required/>
<label>I'M A</label>
<label>ARTIST &nbsp <input type="radio" value="1" name="user_type" > </label>&nbsp
<label>MODEL &nbsp <input type="radio" value="2" name="user_type"></label>&nbsp
<label>COMPOSER &nbsp <input type="radio" value="3" name="user_type" ></label>&nbsp<br>
<label>BEAT MAKER &nbsp <input type="radio" value="4" name="user_type" ></label>&nbsp
<label>NONE &nbsp <input type="radio" value="0" name="user_type" ></label>
<label> <input type="checkbox" value="1" name="letter" > &nbsp I WOULD LIKE TO RECEIVE YOUR NEWSLETTER</label>
</div>
<div class="mainhead">
<input type="submit" name="register" class="submit" value="SEND AND REGISTER NOW">
</div>
</form>
JS:
<script type="text/javascript">
function validateForm() {
var province = document.forms["myForm"]["province"].value;
if (province == 0 ) {
alert("Select Province");
document.myForm.province.focus()
return false;
}
var user_type = document.forms["myForm"]["user_type"].value;
if (user_type == null || user_type == "") {
alert("Select Who You are");
return false;
}
var letter = document.forms["myForm"]["letter"].value;
if (letter == null || letter == "") {
alert("Select that you want to receive news letter");
return false;
}
}
</script>

Problem is that for IE, document.forms["myForm"]["user_type"] is an HTMLCollection and has no value
Solution is to change
var user_type = document.forms["myForm"]["user_type"].value;
to
var user_type = document.querySelector('form[name="myForm"] input[name="user_type"]:checked').value;

What i observed is :
No name province present in code (what you gave). If you include it here, it will not work.
<script type="text/javascript">
function validateForm() {
var province = document.forms["myForm"]["province"].value;
if (province == 0 ) {
alert("Select Province");
document.myForm.province.focus()
return false;
}
var user_type = document.forms["myForm"]["user_type"].value;
if (user_type == null || user_type == "") {
alert("Select Who You are");
return false;
}
var letter = document.forms["myForm"]["letter"].value;
if (letter == null || letter == "") {
alert("Select that you want to receive news letter");
return false;
}
}
</script>
After removing province validation. It started working.
<script type="text/javascript">
function validateForm() {
var user_type = document.forms["myForm"]["user_type"].value;
if (user_type == null || user_type == "") {
alert("Select Who You are");
return false;
}
var letter = document.forms["myForm"]["letter"].value;
if (letter == null || letter == "") {
alert("Select that you want to receive news letter");
return false;
}
}
</script>
So, as Mr Rayon Dabre said "There is no element having name as province". So, i also agree with him. Remove province validation from validateForm() function (as it is not used in <from></form>)

This code should do the trick:
function validateForm() {
var user_type = document.getElementsByName('user_type');
var u_type = '';
for (var i = 0, length = user_type.length; i < length; i++) {
if (user_type[i].checked) {
// do whatever you want with the checked radio
u_type = user_type[i].value;
// only one radio can be logically checked, don't check the rest
break;
}
}
if (u_type == "") {
alert("Select Who You are");
return false;
}
var letter = document.getElementsByName('letter')[0].checked;
if (letter == "" || letter == undefined) {
alert("Select that you want to receive news letter");
return false;
}
}

Methods to print ouput besides alert and document.write

This is some of the coding I have. I wanted to make the statements print directly on the page instead of using alert or document.write. I tried to use getElementId but it isnt working that great for me, I tried it on the first line in the script. The others are still an alert. Help?
<body>
<div id="myDiv1"></div>
<div id="myDiv2"></div>
Select one:<br>
<form name="locationform">
<input type="checkbox" name="North">North <br>
<input type="checkbox" name="South">South<br>
<input type="checkbox" name="Equator">Equator<hr>
Select another one:<br>
<input type="checkbox" name="Inward">Inward<br>
<input type="checkbox" name="Outward">Outward<br><br>
<input type="button" value="Submit" name="myButton" onClick="myfunction()">
<button type="reset" value="Reset">Reset</button>
</form>
<script language="JavaScript">
function myfunction() {
***if((document.locationform.North.checked == true) && (document.locationform.Inward.checked == true)){
document.getElementById('myDiv1').innerhtml = 'Some Test';***
}else if((document.locationform.South.checked == true) && (document.locationform.Outward.checked == true)){
alert("Case 4.");
}else if((document.locationform.Equator.checked == true) && (document.locationform.Outward.checked == true)){
alert("Case 6.");
}else if((document.locationform.South.checked == true) && (document.locationform.Inward.checked == true)){
alert("Case 3.");
}else if((document.locationform.North.checked == true) && (document.locationform.Outward.checked == true)){
alert("Case 5.");
}else if((document.locationform.Equator.checked == true) && (document.locationform.Inward.checked == true)){
alert("Case 2.");
} else if((document.locationform.Inward.checked == false) && (document.locationform.Outward.checked == false)){
alert("Select a valid entry");
} else if((document.locationform.North.checked == true) && (document.locationform.South.checked == true)){
alert("Select a valid entry");
} else if((document.locationform.North.checked == true) && (document.locationform.Equator.checked == true)){
alert("Select a valid entry");
} else if((document.locationform.Equator.checked == true) && (document.locationform.South.checked == true)){
alert("Select a valid entry");
}
</script>

You have a bug in your code
document.getElementById('myDiv1').innerhtml = 'Some Test';
should be
document.getElementById('myDiv1').innerHTML = 'Some Test';
Test it out in your console. element.innerhtml will return undefined because that is not a method.
Here's the source
http://www.w3schools.com/jsref/prop_html_innerhtml.asp

HTML
<div id="write_here"></div>
JS:
document.getElementById('write_here').innerHTML = 'Print Text Here';

It's innerHTML not innerhtml.
e.g. document.getElementById('mainbar').innerHTML

Cannot set the value properly in javascript

I've 6 following radio buttons
<input type="text" id="status" name="status">
<input type="radio" name="orderReceivingKeysPresent" id="orderReceivingKeysPresent_Y" value="1" onclick="checkKeyAndTitle(this);"> Yes
<input type="radio" name="orderReceivingKeysPresent" id="orderReceivingKeysPresent_N" value="0" onclick="checkKeyAndTitle(this);"> No
<input type="radio" name="orderReceivingTitlePresent" id="orderReceivingTitlePresent_Y" value="1" onclick="checkKeyAndTitle(this);"> Yes
<input type="radio" name="orderReceivingTitlePresent" id="orderReceivingTitlePresent_N" value="0" onclick="checkKeyAndTitle(this);"> No
<input type="radio" name="orderReceivingReturnToOwner" id="orderReceivingReturnToOwner_Y" value="1" onclick="hideAndShowReturnToOwner(this); checkKeyAndTitle(this);"> Yes
<input type="radio" name="orderReceivingReturnToOwner" id="orderReceivingReturnToOwner_N" value="0" onclick="hideAndShowReturnToOwner(this); checkKeyAndTitle(this);" checked="checked"> No
No I'm using javascript for assiging values. I've created javascript function but it isn't working properly and I can't figure it out. How to do it?
function checkKeyAndTitle(getObj) {
if(getObj.name == "orderReceivingKeysPresent") {
if(getObj.value == "1") {
$("#status").val('Delivered');
} else {
$("#status").val('Missing Keys');
}
}
else {
if(getObj.value == "1") {
$("#status").val('Delivered');
} else {
$("#status").val('Missing Title');
}
}
}
Now orderReceivingReturnToOwner is checked to no by default.
When I click at orderReceivingKeysPresent to yes and orderReceivingTitlePresent to no then status should be Missing Title and when orderReceivingKeysPresent no and orderReceivingTitlePresent yes status should be Missing Keys and when both are yes status should be Delivered and also check this one to when orderReceivingReturnToOwner yes status should be Return To Owner. Help suggest me how to do it.

$("input[type='radio']").on("click", function () {
var keyRadioVal = $('input:radio[name=orderReceivingKeysPresent]:checked').val();
var titleRadioVal = $('input:radio[name=orderReceivingTitlePresent]:checked').val();
var ownerRadioVal = $('input:radio[name=orderReceivingReturnToOwner]:checked').val();
if (ownerRadioVal == 1) {
$("#status").val('Return To Owner');
} else if (keyRadioVal == 1 && titleRadioVal == 0 && ownerRadioVal == 0) {
$("#status").val('Missing Title');
} else if (titleRadioVal == 1 && keyRadioVal == 0 && ownerRadioVal == 0) {
$("#status").val('Missing Keys');
} else if (titleRadioVal == 1 && keyRadioVal == 1 && ownerRadioVal == 0) {
$("#status").val('Delivered ');
} else {
$("#status").val('Missing Keys');
}
});
what i had done is getting value of each radio button which is selected on selection change of every single radio button and check all 3 case.
rest in all case Missing key will be shown that you can accordingly.

Validate 2 check boxes and 2 text boxes

My goal is user require to choose at least one option from 2 check boxes and 2 text boxes. If user do not select anything, the system will prompt the user to select at least one.
However, right now, the user need to select everything which is not what I want.
Below are my codes..
Help will be appreciate..Thanks! :)
At index.jsp
<form method="post" name="searchform" onsubmit="return validateForm();">
Date: <input name="date" readonly="readonly" />
Number: <input type="text" name="on">
<input type="checkbox" id="completed"> Option A
<input type="checkbox" id="pending"> Option B
<input type="submit" value="Submit">
</form>
At javascript
function validateForm() {
var radio1 = document.getElementById('pending').checked;
var radio2 = document.getElementById('completed').checked;
var on = document.forms["searchform"]["on"].value;
var date = document.forms["searchform"]["date"].value;
if ((radio1 == "") || (radio2 == "") || (on == null || on="") || (date == null || date =="")){
alert('Please Choose at least 1 Option');
return false;
}
}

simply change your outer || to &&
if ((radio1 == "") && (radio2 == "") && (on == null || on="") && (date == null || date =="")){
alert('Please Choose at least 1 Option');
return false;
}

Try this one
if (((radio1 == "") && (radio2 == "")) &&(on == null || on="") && (date == null || date =="")){
alert('Please Choose at least 1 Option');
return false;
}