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>
Related
I have a group of checkboxes (id = "first" id = "second") and the main checkbox (id = "main").
<input type='checkbox' id="main_button" onclick="Indeterminate()"><label for="main_button">Main checkbox of group</label>
<input type='checkbox' id="first" onclick="Indeterminate()"><label for="first">First thing</label>
<input type='checkbox' id="second" onclick="Indeterminate()"><label for="second">Second thing</label>
If one or more of the group checkbox checked then the main have indeterminate condition. If all checked then the main checkbox have also checked condition.
function Indeterminate() {
if (document.getElementById('first').checked || document.getElementById('second').checked) {
document.getElementById('main_button').indeterminate = true;
} else if (document.getElementById('first').checked && document.getElementById('second').checked) {
document.getElementById('main_button').checked;
} else {
document.getElementById('main_button').indeterminate = false;
}
}
In my IF ELSE statement, conditions IF and ELSE works, but there is something wrong with ELSE IF. Probably doing a simple mistake or? Thank you!
JSFiddle example
var main = document.getElementById('main_button');
var first = document.getElementById('first');
var second = document.getElementById('second');
function Indeterminate() {
if (first.checked && second.checked) {
main.checked = true;
main.indeterminate = false;
} else if (first.checked || second.checked)
main.indeterminate = true;
else
main.indeterminate = false;
}
<input type='checkbox' id="main_button" onclick="Indeterminate()">
<label for="main_button">Main checkbox of group</label>
<input type='checkbox' id="first" onclick="Indeterminate()">
<label for="first">First thing</label>
<input type='checkbox' id="second" onclick="Indeterminate()">
<label for="second">Second thing</label>
Your && code is right, but it's the && situation is apart of you || code, so When || is not true, the && will not true too. Just change their sequence.
I think the problem is that you are getting the meaning of || wrong. It means or in the sense that either the left or the right expression is true - or both!
Therefore, your else if will never be called, because if a.checked && b.checked is true, then a.checked || b.checked will always be true as well, and the if will be executed before the else if is even checked.
Therefore, the correct solution is:
function Indeterminate() {
if (document.getElementById('first').checked && document.getElementById('second').checked) {
document.getElementById('main_button').checked;
} else if (document.getElementById('first').checked || document.getElementById('second').checked) {
document.getElementById('main_button').indeterminate = true;
} else {
document.getElementById('main_button').indeterminate = false;
}
}
Here, you first check for the more specific condition a.checked && b.checked. Only if that condition is not true, the weaker condition a.checked || b.checked is evaluated.
As commented before, you should move && before ||.
Reason for this is if first is selected or both is selected, first.checked || second.checked will always be true. Only situation when || will fail is when both are unchecked, and then && will also fail.
JSFiddle
Updated Code
function Indeterminate() {
var first = document.getElementById('first').checked;
var second = document.getElementById('second').checked
var main = document.getElementById('main_button');
if (first && second) {
main.indeterminate = false;
main.checked = true
} else {
main.checked = main.indeterminate = first || second
}
}
<input type='checkbox' id="main_button" onclick="Indeterminate()">
<label for="main_button">Main checkbox of group</label>
<br>
<input type='checkbox' id="first" onclick="Indeterminate()">
<label for="first">First thing</label>
<br>
<input type='checkbox' id="second" onclick="Indeterminate()">
<label for="second">Second thing</label>
As commented by Bekim Bacaj, I have updated my code. JSFiddle
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   <input type="radio" value="1" name="user_type" > </label> 
<label>MODEL   <input type="radio" value="2" name="user_type"></label> 
<label>COMPOSER   <input type="radio" value="3" name="user_type" ></label> <br>
<label>BEAT MAKER   <input type="radio" value="4" name="user_type" ></label> 
<label>NONE   <input type="radio" value="0" name="user_type" ></label>
<label> <input type="checkbox" value="1" name="letter" >   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;
}
}
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.
The below is a snippet
<tr>
<td>7</td>
<td>Tick the Teaching Methods Used </td>
<td>
<input type="checkbox" id="lectures" name="lectures" value="lectures">Lectures
<input type="checkbox" id="study" name="study" value="study">Case Study
<input type="checkbox" id="audvid" name="audvid" value="audvid">Audio|Video
<input type="checkbox" id="interactive" name="interactive" value="interactive">Interactive Methods
<input type="checkbox" id="discussion" name="discussion" value="discussion">Discussion
<input type="checkbox" id="role" name="role" value="role">Role Play
<input type="checkbox" id="quiz" name="quiz" value="quiz">Quiz
</td>
</tr>
and the validation code is
if ((document.form1.lectures.checked == false)
&& (document.form1.study.checked == false)
&& (document.form1.audvid.checked == false)
&& (document.form1.interactive.checked == false)
&& (document.form1.discussion.checked == false)
&& (document.form1.role.checked == false)
&& (document.form1.quiz.checked == false)) {
alert("Please check any one method");
isValid = false;
}
return isValid;
How do i insert only the checked values into mysql database, implode doesn't seem to help
Edit : If i use the same "name" for all checkbox implode works but in that case I'm not able to validate
Use the same name for all your checkboxes. You said implode, so that's good. As for the validation, change it to use the IDs:
else if ((document.getElementById("lectures").checked == false)
&& (document.getElementById("study").checked == false)
&& (document.getElementById("audvid").checked == false)
&& (document.getElementById("interactive").checked == false)
&& (document.getElementById("discussion").checked == false)
&& (document.getElementById("role").checked == false)
&& (document.getElementById("quiz").checked == false)) {
alert("Please check any one method");
isValid = false;
}
return isValid;
Checkboxes are only put in POST, if selected (checked).
PHP:
$keys = explode(',','lectures,study,audvid'); //get all keys
$result = array();
foreach ($keys as $key) {
if (isset($_POST[$key]) && $_POST[$key]) { //selected!
$result[] = $key;
}
}
print_r($result); //only selected checkeboxes are in result.
Utilizing ASP with DotNetNuke to loop through listing of repeating radio buttons.
Utilizing JQuery
Currently displaying proper result value for weightCalculations function (ex: 3)
How do I combine the rbtCalculations results with the weightCalculations results?
Ex: IF rbtCalculations = Very High AND weightCalculations = High THEN
$('p.custom' + ID).text("5");
<input id="rbt_0" name="rbt" value="Very High" checked="checked" onclick="rbtCalculations(this,6559);" type="radio">
<input id="rbt_1" name="rbt" value="High" onclick="rbtCalculations(this,6559);" type="radio">
<input id="stakeholders_rbt_0" name="stakeholders_rbt" value="Very High" onclick="weightCalculations(this,6559);" type="radio">
<input id="stakeholders_rbt_1" name="stakeholders_rbt" value="High" checked="checked" onclick="weightCalculations(this,6559);" type="radio">
<input id="stakeholders_rbt_2" name="stakeholders_rbt" value="Low to Moderate" onclick="weightCalculations(this,6559);" type="radio">
<p class="custom6559">3</p>
<script type="text/javascript">
function weightCalculations(value, ID) {
if (value.value == "High") {
$('p.custom' + ID).text("3");
}
else {
$('p.custom' + ID).text("2");
}
}
I'd probably just add a class to the radio buttons to identify them and a wrapping element to associate all the parts together:
<div class="js-weight-calc-wrap">
<input type="radio" class="js-rbt" ... />
<input type="radio" class="js-rbt" ... />
<input type="radio" class="js-weight" ... />
<input type="radio" class="js-weight" ... />
<input type="radio" class="js-weight" ... />
<p class="js-result custom6559"></p>
</div>
<script>
jQuery(document).ready(function ($) {
$('.js-rbt, .js-weight').change(function () {
var $this = $(this),
$wrap = $this.closest('.js-weight-calc-wrap'),
rbtVal = $wrap.find('.js-rbt:checked').val(),
weightVal = $wrap.find('.js-weight:checked').val(),
result = rbtVal === 'VeryHigh' && weightVal === 'High'
? '5'
: rbtVal === 'VeryHigh' && weightVal === 'Low'
? '4'
: '0';
$wrap.find('.js-result').text(result)
});
});
</script>
I'd also probably end up create a jQuery plugin to contain all of that logic, so on your page it'd just be a call like this:
jQuery(function ($) {
$('.js-weight-calc-wrap').weightCalculator({
rbtSelector: '.js-rbt',
weightSelector: '.js-weight',
resultSelector: '.js-result'
});
});
UPDATE
I'd forgotten before that you need to filter the radio buttons when you select them, so that you get the checked one only (was confusing with a <select/> element). After adding :select to the selector, it works as expected. I cleaned it up a little more, and created a working jsFiddle.
function weightCalculations(value, ID) {
if (value.value === "High" && $('input[name="rbt"]').val() === "Very High") {
$('p.custom' + ID).text("5");
}
else if(value.value === "High"){
$('p.custom' + ID).text("3");
}
else {
$('p.custom' + ID).text("2");
}
}