select checkbox and display pats of form accordingly - javascript

.Like for two checkboxes there is true or false but what should I do for 3 checkoxes ?to display parts of form according to the checkbox selection.

You can make use of multiple values (by setting distinct values in the value="…" argument, and update the conditions in the ng-show="…" argument accordingly, for example:
<input type="radio" name="test" ng-model="modelname" value="1">1</input>
<input type="radio" name="test" ng-model="modelname" value="2">2</input>
<input type="radio" name="test" ng-model="modelname" value="3">3</input>
<div ng-show="modelname=='1'">form1</div>
<div ng-show="modelname=='2'">form2</div>
<div ng-show="modelname=='3'">form3</div>

Set value from the input checkbox using "value=", and change the conditions in the ng-if="…" argument accordingly, as shown below:
<input type="radio" ng-model="variable" value=1>your content</input>
<input type="radio" ng-model="variable" value=2>your content</input>
<input type="radio" ng-model="variable" value=3>your content</input>
<div ng-if="variable==1">your form</div>
<div ng-if="variable==2">your form</div>
<div ng-if="variable==3">your form</div>

Related

Get values of checked checkbox to Javascript?

My code is
<div class="textbox_pizza" id="pizza" disabled="true" onchange="controlinfo(); return false;">
<span><label>Margherita</label><input type="checkbox" name="pizza" id="margherita" value="12"></span>
<span><label>Quattro Formaggi</label><input type="checkbox" name="pizza" id="quattroformaggi" value="12.5"></span>
<span><label>Capricciosa</label><input type="checkbox" name="pizza" id="capricciosa" value="13"></span>
</div>
Is there any way to get checked check-box values and subtotal all numbers in Javascript, but not to use event boxes?

HTML FORMS - Passing values to two different forms on the same page

I am having problems trying to pass values to two different forms on the same page. The page is populated with 16 radio buttons (which I’ve turned into boxes for display reasons) and they all hold a value (e.g. 001). Both of the forms jobs are to somehow grab the active/selected radio button value and post it to a PHP file so database changes can be made. Instead of a submit button, I am using an anchor to pass a JavaScript submit function. I have tried having
both forms cover the whole page but still didn't have any luck.
I’ll post some code below to help you understand.
PS. If you need more code to understand, I can post it to pastebin.
<li>
<form id="form_ready" method="post" action="../backend/screen.php">
<input type="hidden" name="screenid" value="" />
<input type="hidden" name="status" value="" />
<input type="hidden" name="pickupid" value="document.activeElement.value;" />
<a onclick="document.getElementById('form_ready').submit();">READY</a>
</form>
</li>
<li>
<form id="form_c" method="post" action="../backend/screen.php">
<input type="hidden" name="status" value="" />
<input type="hidden" name="pickupid" value="document.activeElement.value;" />
<a onclick="document.getElementById('form_c').submit();">COLLECTED</a>
</form>
</li>
</ul>
<div id="content">
<div id="container">
<div id="table">
<div id="tr1">
<div id="td1">
<input type="radio" name="pickup" id="1" value="001" />
<label for="1"> <span>001</span> </label>
</div>
<div id="td2">
<input type="radio" name="pickup" id="2" value="002" />
<label for="2"> <span>002</span> </label>
</div>
<div id="td3">
<input type="radio" name="pickup" id="3" value="003" />
<label for="3"> <span>003</span> </label>
</div>
<div id="td4">
<input type="radio" name="pickup" id="4" value="004" />
<label for="4"> <span>004</span> </label>
</div>
To answer the suggestion in the comments and use only one form, here's how to grab the value from the selected radio button:
var inputs = document.getElementsByTagName('input');
var valueSelected;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) valueSelected = inputs[i].value;
}
valueSelected will contain the value of the selected radio.
If you ever need to reduce the type to "radio" only for some reason, you can check an input type with inputs[i]['type'] === 'radio' in the for loop.
The best would probably still be to set a class for your "radio" inputs, it will allow the loop to be more specific, hence a more efficient code, for example:
<input type="radio" class="myRadio">
and in JS: var inputs = document.getElementsByClassName('myRadio');

Radiobutton on selection do a function

I have two radio buttons. If the user chose one of them i would like my code to execute one particular function. I need to get the value from the radio button selection and push it to my function on the server-side as "valueButton". Guess i need a function on the client-side, but how should that look?
The buttons (client-side):
<div>
<input type="radio" name="origin" id="radio-origin-1" value="ID1">
<label for="radio-origin-auto">Grupp 1</label>
</div>
<div>
<input type="radio" name="origin" id="radio-origin-2" value="ID2">
<label for="radio-origin-en">Grupp 2</label>
</div>
The functions (server-side):
function dataSelect(valueButton){
if (valueButton == "ID1") {
ID1(); }
else if (valueButton == "ID2") {
ID2(); }
}
function ID1(){
MailApp.sendEmail("test.acc#outlook.com", "subjects", GetDataFromSpreadsheet());}
function ID2(){
MailApp.sendEmail("test.acc2#outlook.com", "subjects", GetDataFromSpreadsheet());}
HTML Code
<div>
<input type="radio" name="origin" id="radio-origin-1" value="ID1" onChange="dataSelect(this.value);">
<label for="radio-origin-auto">Grupp 1</label>
</div>
<div>
<input type="radio" name="origin" id="radio-origin-2" value="ID2" onChange="dataSelect(this.value);">
<label for="radio-origin-en">Grupp 2</label>
</div>

Linked Dynamic Radio Buttons HTML Javascript

All,
Have used this site a few times before and had some great replies so hopefully someone can help again. I want a set of radio buttons, so that when you click a button - you get another set below it. Then again, when you click one of the 2nd set of buttons, you'll get a third etc. Currently I have the following:
<html>
<head>
<title>My Wizard</title>
<script language="javascript">
function Display(question) {
h1=document.getElementById("yes");
h2=document.getElementById("no");
h3=document.getElementById("dk");
h4=document.getElementById("yes2");
if (question=="yes") h1.style.display="block";
else h1.style.display="none";
if (question=="no") h2.style.display="block";
else h2.style.display="none";
if (question=="dk") h3.style.display="block";
else h3.style.display="none";
if (question=="yes2") h4.style.display="block";
else h4.style.display="none";
}
</script>
</head>
<body>
<hr>
<form name="form1">
<p>Do you like the colour blue?</p>
<input type="radio" name="type" value="yes" checked
onClick="Display('yes');">
Yes
<input type="radio" name="type" value="no"
onClick="Display('no');">
No
<input type="radio" name="type" value="dk"
onClick="Display('dk');">
Don't know
<br>
<div ID="yes" style="display:none;">
<hr>
<p>Do you like the colour red?</p>
<input type="radio" name="type" value="yes2" checked
onClick="Display('yes2')">
Yes
<input type="radio" name="type" value="no2"
onClick="Display('no2');">
No
</div>
<div ID="yes2" style="display:none">
I want this to appear beneath the 2nd set of buttons, not replacing it!
</div>
<div ID="no2" style="display:none">
test2
</div>
<div ID="no" style="display:none">
<b>this is my no box:</b>
<input type="text" name="no" size="25">
</div>
<div ID="dk" style="display:none">
<b>dk:</b>
<input type="text" name="dk" size="15">
</div>
</form>
</body>
</html>
So basically, i'm trying to make a little wizard - so something that will ask the user a question, and based on this - it will ask them another. I dont want to use server side applications so am trying something simple like this - but whenever the user selects an option from the 2nd set of buttons, the text which goes with it replaces the 2nd set of buttons. What am i doing wrong?
Please select 'yes' and 'yes' again to see what i mean. Any help will be appreciated!
Joe
Radio input elements are grouped by their name attribute. You should assign a different name to the other sets of radio input elements.
Visual example:
[x] name=favColor [ ] name=favRed
[ ] name=favColor [x] name=favRed
[ ] name=favColor [ ] name-favRed
See also: https://developer.mozilla.org/en/HTML/Element/input
Your if statement is wrong. You ask again and again this: if (question=="yes") h1.style.display="block";
else h1.style.display="none"; and the second time if is not true, so you set the h1 to be hidden.
here is one solution:
<html>
<head>
<title>My Wizard</title>
<script language="javascript">
function Display(question, i) {
h1=document.getElementById("yes");
h2=document.getElementById("no");
h3=document.getElementById("dk");
h4=document.getElementById("yes2");
if(i==1){
if (question=="yes") h1.style.display="block";
else h1.style.display="none";
if (question=="no") h2.style.display="block";
else h2.style.display="none";
}else if(i==2){
if (question=="dk") h3.style.display="block";
else h3.style.display="none";
if (question=="yes2") h4.style.display="block";
else h4.style.display="none";
}
}
</script>
</head>
<body>
<hr>
<form name="form1">
<p>Do you like the colour blue?</p>
<input type="radio" name="type" value="yes" checked
onClick="Display('yes', 1);">
Yes
<input type="radio" name="type" value="no"
onClick="Display('no', 1);">
No
<input type="radio" name="type" value="dk"
onClick="Display('dk', 1);">
Don't know
<br>
<div ID="yes" style="display:none;">
<hr>
<p>Do you like the colour red?</p>
<input type="radio" name="type" value="yes2" checked
onClick="Display('yes2', 2)">
Yes
<input type="radio" name="type" value="no2"
onClick="Display('no2', 2);">
No
</div>
<div ID="yes2" style="display:none">
I want this to appear beneath the 2nd set of buttons, not replacing it!
</div>
<div ID="no2" style="display:none">
test2
</div>
<div ID="no" style="display:none">
<b>this is my no box:</b>
<input type="text" name="no" size="25">
</div>
<div ID="dk" style="display:none">
<b>dk:</b>
<input type="text" name="dk" size="15">
</div>
</form>
</body>
</html>

Javascript - formular - nested dynamic appendchild functions

I have a form which changes the inputfields depending on a radio-button.
for text there appears a textbox
for textarea there appear additional 2 fields for cols And rows
for select, checkbox and radio there appear additional fields with appendchild
have a look here:
http://joomla.byethost16.com/php.php
Now what i want is to let the user add more params, param2, param3, etc.
Unfortunately i made the js functions that trigger the fields according to the radio-button like this
function textarea(){
if (document.getElementById('option2').checked = true){
document.getElementById('feld').style.display = '';
document.getElementById('feld2').style.display = '';
document.getElementById('feld4').style.display = 'none';
}}
So that means i have no dynamics in my form since the id in this function is not yet dynamic and onclick will trigger anything or only always the first param1.
all params should be like this but somehow increasing numbers and the Js-function for the radio should take them too
<td>Param_1</td>
<td><p>
<input type="radio" onclick='text()' name="option0" id="option0" value="text" checked="yes">text
<input type="radio" onclick='spacer()' name="option0" id="option1" value="spacer">spacer
<input type="radio" onclick='textarea()' name="option0" id="option2" value="textarea">textarea
<input type="radio" onclick='selecta()' name="option0" id="option3" value="select">select
<input type="radio" onclick='radio()' name="option0" id="option4" value="radio">radio
<input type="radio" onclick='checkbox()' name="option0" id="option5" value="checkbox">checkbox</br>
<input type="hidden" name="fields" value="1" id="fields" />
<div id="feld">
Name <input type="text" name="param1" id="param1" size="40" maxlength="40">
Default<input type="text" name="paramdef1" id="paramdef1" size="40" maxlength="40">
<div id="feld4" style="display:none;">
<input type="text" name="param11" size="40" value="value1" style="display: inline">
<a href=# onclick='add(1)'>add</a> <a href=# onclick='reset()'>reset</a></div>
</div>
<div id="feld2" style="display:none;">
Columns<input type="text" name="cols1" size="20" maxlength="40">Rows<input type="text" name="rows1" size="20" maxlength="40"></div>
</td>
</tr>
How do i do that my form gets dynamically (like i did the "add/reset" at checkboxes) and people can add more params?
For the complete code please go here and view source:
http://joomla.byethost16.com/php.php
thx so much for help on this
i solved it by using $(this) with a "click" bind to each class which sits on the buttons.
another solution would be to use a plugin, for example http://www.mdelrosso.com/sheepit/index.php?lng=en_GB which is very good but relys on a certain structure (you have to define an index at the form, which has to be resorted in processing under most cases since some index_vars can be skipped userwise.)

Categories