I have a simple js script shows and hide 2 forms variants.
function show_form (item_form_id, item_desc_id, radio_item_id) {
/* hide all active */
var i=0;
for (; i < document.getElementsByClassName('active').length; i++ ) {
active_item=document.getElementsByClassName('active')[i].style.display='none';
}
/* show all unactive */
var a=0;
for (; a < document.getElementsByClassName('unactive').length; a++ ) {
unactive_item=document.getElementsByClassName('unactive')[a].style.display='block';
}
form_id=document.getElementById(item_form_id);
form_id.style.display='block';
desc_id=document.getElementById(item_desc_id);
desc_id.style.display='none';
radio_id=document.getElementById(radio_item_id);
radio_id.checked=true;
}
.active {
display:none;
}
<table border="0" cellspacing="2" cellpadding="2">
<tr onClick="show_form('form_1','form_1_unactive','radio_item_1');">
<td><div class="active" id="form_1"><input type="text" id="name" name="name" value="text 1"></div><div class="unactive" id="form_1_unactive">form_1</div></td>
<td><input type="radio" name="address_id" value="radio_1" id="radio_item_1"></td>
</tr>
<tr onClick="show_form('form_2','form_2_unactive','radio_item_2');">
<td><div class="active" id="form_2"><input type="text" id="name" name="name" value="text 2"></div><div class="unactive" id="form_2_unactive">form_2</div></td>
<td><input type="radio" name="address_id" value="radio_2" id="radio_item_2"></td>
</tr></table>
It works properly with FF, Chrome, Opera but doesn't work properly in IE.
After select one form I can't put characters - cursor disapears.
I've tryed with css visibility and is the same - no cursor.
How to fix it or make in different way - show and hide forms ?
Related
I'm trying to make a simple time in/out app for some teens as part of a training program we have.
More or less what it should look like
When the user presses "ADD ANOTHER ROW", another row appears with a "Delete" button at the end. When the user clicks "Review" at the bottom, I'd like to disable all buttons above so the encoded info isn't accidentally edited before submitting, then Yes/No appear. If No is selected, the buttons are enabled again for editing. My problem is I can disable everything except for the "Delete Row" buttons.
function finalCheck() {
document.getElementById("review-button").disabled = true;
document.getElementById("add").disabled = true;
document.getElementById("wala").disabled = true;
var wala = document.getElementsByClassName("minus").length;
for(i = 0; i < wala.length; i++){
wala[i].disabled = true;
}
var final = document.getElementById("last-check").content;
var copy = document.importNode(final,true);
document.getElementById("bigGuy").appendChild(copy);
var totalHours = 0;
for (i = 0; i < content.length; i++){
totalHours = totalHours + content[i][3];
console.log(totalHours);
}
document.getElementById("total-hours").innerHTML = totalHours;
}
Here's the HTML template:
<template id="shift" class="data">
<tr class="data-body" id="extra-row">
<td>
<input type="text" class="datepicker" required>
</td>
<td>
<input type="text" class="timepicker" name="clockIn" required>
</td>
<td>
<input type="text" class="timepicker" name="clockOut" required>
</td>
<td class="calced-hours"></td>
<td text-align: center>
<button class="btn waves-effect waves-light minus red lighten-2" name="remove">Delete row</button>
</td>
</tr>
</template>
I should note, the DELETE ROW button itself does work; it will delete the relevant row.
Classname of the Delete buttons is "minus." I tried it without the var; I tried forEach (but I really don't understand fully how to use forEach...). I'm guessing the problem is because the Delete buttons are added by template, but if I try to get the length of the array for var "wala", it gives me a result. So I know the function is able to detect those buttons. I just can't get them disabled.
I am an absolute beginner when it comes to anything JavaScript or JQuery. I am trying to get a few checkboxes open in a new tab if they are checked and then the submit button clicked. The code I have works only if one checkbox is checked. If more than one is checked, then only the first one is open in the tab. My code is as follows:
Javascript
function CheckCheckboxes(form)
{
var
i, counter = 0;
for (i = 0; i < form.elements.length; ++i) {
if ('checkbox' === form.elements[i].type && form.elements[i].checked) {++counter;
window.open('http://' + form.elements[i].value, '_blank');
}
}
if (!counter) {
alert('Please check at least one!');
}
}
HTML
<form onsubmit="CheckCheckboxes(this); return false;">
<table align="left" border="1" style="border-collapse: collapse;">
<tr style="height:30px">
<td colspan="8"><center>Companies</center></td>
</tr>
<tr>
<td><input type="checkbox" name="Google" value="www.google.com" />Google</td>
<td><input type="checkbox" name="Apple" value="www.apple.com" />Apple</td>
<td><input type="checkbox" name="Microsoft" value="www.Microsoft.com" />Microsoft</td>
<td><input type="checkbox" name="facebook" value="www.facebook.com" />Facebook</td>
<td><br /><input type="submit" value="Send Form" /></td>
</tr>
</table>
</form>
Any help would be greatly appreciated. Been at this for 3 and a half hours :)
Thanks
Your code is working but the browser is blocking the new windows after the first one is displayed. By default browsers are blocking multiple pop-ups from a website, you can turn this off though but don't expect your users to do the same.
See Fiddle
Your code window.open('http://' + form.elements[i].value, '_blank'); works :)
I'm trying to get an input box to be visible / not visible depending on whether a radio button is selected on yes or no.
I have assigned an ID to each div where the text input box is.
<tr>
<td>Acknowledged within 30 secs</td>
<td>
<div class="radio"><input type="radio" value="1" name="greet"> Yes</div>
<div class="radio"><input type="radio" value="0" name="greet"> No</div>
</td>
</tr>
<tr>
<td></td>
<td>
<div id="greet-info" class="hidden">
<input type="text" class="textbox" placeholder="Tell us more" id="greet_more" name="greet_more">
</div>
</td>
</tr>
$("input[name='greet']").change(
function(){
if($('input[name=greet]:checked').val()=="0"){
$('#greet-info').removeClass("hidden");
}else{
$('#greet-info').addClass("hidden");
}
}
);
$("input[name='menu']").change(
function(){
if($('input[name=menu]:checked').val()=="0"){
$('#menu-info').removeClass("hidden");
}else{
$('#menu-info').addClass("hidden");
}
}
);
$("input[name='drinks_menu']").change(
function(){
if($('input[name=drinks_menu]:checked').val()=="0"){
$('#drinks_menu-info').removeClass("hidden");
}else{
$('#drinks_menu-info').addClass("hidden");
}
}
);
Since I have a lot of questions, and they are spread across 5 pages. I will need a lot of input boxes, and therefore i'll have to re-write the function out each time. I was wondering how I could do it so I only have to write one function?
Thanks!
If your html follows the same structure across all the elements then
$('table input[type="radio"]').change(function(){
$(this).closest('tr').next().find('div').toggle(this.value == 1 && this.checked)
})
Demo: Fiddle
easiest would be:
function bindInput(selector, id) {
$(selector).change(
function(){
if($(selector + ':checked').val()=="0"){
$(id).removeClass("hidden");
}else{
$(id).addClass("hidden");
}
}
);
}
bindInput("input[name='greet']",'#greet-info')
bindInput("input[name='menu']",'#menu-info')
bindInput("input[name='drinks_menu']",'#drinks_menu-info')
I have two separate radio button arrays that should behave as if they are one. Currently, I have it only working one way. I have a YouTube video showing my problem.
I have two mutually exclusive arrays that I want them working together as one array to the user. E.g., If one radio button is checked" in one array, I do not want the other array's radio button checked, but unchecked. JavaScript should deselect the radio button in the other array, making the functionality to look like the user is working with one set of radio buttons. The two separate radio arrays have different name=pair values.
YouTube Video Showing Problem
https://www.youtube.com/watch?v=nlvzgu3pJ8A
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
body{font-family:sans-serif, arial;}
th{text-align:left;}
h3,h4{margin-top:.15em; padding:0;}
</style>
<script>
function monthlyPlan(){
for(var i=0; i<document.deliveryForm.monthly.length;++i)
{
if(document.deliveryForm.monthly[i].checked== true )
document.deliveryForm.weekly.checked = false;
}
}
function weeklyPlan(){
for(var i=0; i<document.deliveryForm.weekly.length;++i)
{
if(document.deliveryForm.weekly[i].checked == true)
document.deliveryForm.monthly.checked = false;
}
}
</script>
</head>
<body>
<form name="deliveryForm" action="FormProcessor.html" method="get">
<h3>Delivery Rates</h3>
<h4>Allow users to select their desired delivery option.</h4>
<ul>
<li>Bill weekly or monthly</li>
<li>Devlivered Mon-Sat or Everyday</li>
</ul>
<p>
<strong>Billed continuously $3.50 by the Month?</strong>
<input type="radio" name="monthly" value="yes" onclick="monthlyPlan();" /> Yes
</p>
<strong>Billed by a Weekly Plan?</strong>
<table border=1 cellpadding=6>
<tr>
<th></th>
<th>4 weeks</th>
<th>13 weeks</th>
<th>26 weeks</th>
<th>52 weeks</th>
</tr>
<tr>
<th>Devlivered Mon-Sat</th>
<td><input type="radio" name="weekly" value="12.60" onclick="weeklyPlan();" />12.60</td>
<td><input type="radio" name="weekly" value="40.95" onclick="weeklyPlan();" />40.95</td>
<td><input type="radio" name="weekly" value="81.90" onclick="weeklyPlan();" />81.90</td>
<td><input type="radio" name="weekly" value="156.00" onclick="weeklyPlan();" />156.00</td>
</tr>
<th>Devlivered Everyday</th>
<td><input type="radio" name="weekly" value="13.56" onclick="weeklyPlan();" />13.56</td>
<td><input type="radio" name="weekly" value="44.07" onclick="weeklyPlan();" />44.07</td>
<td><input type="radio" name="weekly" value="88.14" onclick="weeklyPlan();" />88.14</td>
<td><input type="radio" name="weekly" value="159.74" onclick="weeklyPlan();" />159.74</td>
</tr>
</table>
</form>
</body>
</html>
Try this:
function monthlyPlan() {
for (var i = 0; i < document.deliveryForm.weekly.length; ++i) {
document.deliveryForm.weekly[i].checked = false;
}
}
function weeklyPlan() {
document.deliveryForm.monthly.checked = false;
}
Demo: http://jsfiddle.net/DpbMB/
You don't need to test whether the radio that was just clicked is checked, because for radio buttons you know they will be checked when the click event occurs (there's no way to uncheck them by clicking except by clicking on another in the group, and then it is the other that gets the event).
When the monthly radio button is clicked, loop over all of the weekly radio buttons and set them to not be checked. When any weekly radio is clicked simply uncheck the monthly one.
The array-style access is only applicable when there is more than one element with the same name, so to access the monthly button don't use [i].
It seems to me though that it would be easier to just make the monthly button part of the same group, and give it an appropriate value that you can test server-side.
Try the following for your monthlyPlan() function:
function monthlyPlan(){
/*for(var i=0; i<document.deliveryForm.monthly.length;++i)
{
if(document.deliveryForm.monthly.checked== true )
document.deliveryForm.weekly.checked = false;
}
*/
alert(document.deliveryForm.monthly.length); // will say undefined
if (document.deliveryForm.monthly.checked)
{
for (var k = 0; k < document.deliveryForm.weekly.length; ++k)
{
document.deliveryForm.weekly[k].checked = false;
}
}
}
It appears that when you only have one radio button in the group, the DOM doesn't treat it as an array.
EDIT: Actually, nnnnnn's answer is better. No point keeping the redundant if statements.
I'm creating an order form that when a button is clicked it displays an image in a separate div. The code works successfully for check boxes but with radio buttons doesn't hide the previously clicked image.
function displayImage(id) {
var el = document.getElementById(id);
if (el.style.display == "inline") {
el.style.display = "none";
} else {
el.style.display = "inline";
}
}
<tr>
<td>
<input type="radio" name="cheese" id="chkcheese" value="Yellow American" onclick="displayImage('imgamerican');" />
<label for="chkcheese">Yellow American</label>
</td>
<td>
<input type="radio" name="cheese" value="Pepper Jack" id="pepperjack" onclick="displayImage('imgjack');" />
<label for="chkjack">Pepper Jack</label>
</td>
<td>
<input type="radio" name="cheese" value="Mozzarella" id="chkmozz" onclick="displayImage('imgmozz');"/>
<label for="chkmozz">Mozzarella</label>
</td>
</tr>
<div class="cheese">
<img id="imgamerican" src="images/american-cheese-slice.png" style="display:none"/>
<img id="imgcheddar" src="images/agedcheddar.png" style="display:none"/>
<img id="imgjack" src="images/pepperJack.png" style="display:none" />
<img id="imgswiss" src="images/swisscheese.png" style="display:none" />
The click event only happens on the radio that was clicked.
You'll need to iterate the radio buttons and make sure that the deselected ones have their corresponding image hidden, or just iterate the images and hide them before showing the one that had its radio clicked.
function displayImage(id) {
var imgs = document.querySelectorAll(".cheese > img");
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.display = "none";
}
document.getElementById(id).style.display = "inline";
}
It looks like your problem is that you're expecting the click event to fire when a radio button becomes unchecked. But it doesn't. You'll need to specifically change the display of the last-shown cheese, but only when it's a radio button that was clicked.
This solution is kind of a hack, but it should work in this situation:
JavaScript:
var lastUnique;
function displayImage(id, unique) {
var el = document.getElementById(id);
if (unique) {
if (lastUnique) {
lastUnique.style.display = 'none';
}
lastUnique = el;
}
el.style.display = 'block';
}
Radio buttons (note the added true):
<tr>
<td><input type="radio" name="cheese" id="chkcheese" value="Yellow American" onclick="displayImage('imgamerican', true);" />
<label for="chkcheese">Yellow American</label></td>
<td><input type="radio" name="cheese" value="Pepper Jack" id="pepperjack" onclick="displayImage('imgjack', true);" />
<label for="chkjack">Pepper Jack</label></td>
<td><input type="radio" name="cheese" value="Mozzarella" id="chkmozz" onclick="displayImage('imgmozz', true);" />
<label for="chkmozz">Mozzarella</label></td>
</tr>
So, the JavaScript keeps track of the last element shown with the unique argument being truthy, and hides it when another call with unique == true happens.
Aside:
You might look into how event handling is done in the modern world. This is the old way of doing it, and it's not exactly manageable.
Also, consider looking into modularization and encapsulation techniques.