I'm trying to make a very basic calculator, and I want to have checkboxes to choose what operation to perform to the numbers. I am trying to make sure that when a box is checked all of the other boxes are unchecked. I am only testing this first, so thats's why Only one checkbox has the code for it. the function calculate is something I am not worried about, as I already tested it and it works. Thanks!
<form>
<input type="text" id="num1">
<input type="checkbox" value="+" onClick="calculate0();
document.getElementById("subtract").checked = "false"; ">
<input type="checkbox" value="-" id="subtract" onClick="calculate1()" checked="false">
<input type="checkbox" value="*" onClick="calculate2()">
<input type="checkbox" value="/" onClick="calculate3()">
<input type="text" id="num2">
<input type="text" id="answer" readonly>
</form>
Use radio buttons to choose the calculation mode and calculate it only with a "submit" button, or use submit - buttons instead. This is much more logical and looks better!
EDIT:
Use radio buttons like this:
<form>
<input type="radio" name="method" onclick="selectMethod('+');" />+ <br />
<input type="radio" name="method" onclick="selectMethod('-');" />- <br />
<input type="radio" name="method" onclick="selectMethod('*');" />* <br />
<input type="radio" name="method" onclick="selectMethod('/');" />/ <br />
</form>
<script>
var method = "+";
function selectMethod(m) {
method = m;
}
</script>
Or use submit-buttons like this (it's the easiest way):
<input type="submit" value="+" onclick="calculate0;" />
<input type="submit" value="-" onclick="calculate1;" />
<input type="submit" value="*" onclick="calculate2;" />
<input type="submit" value="/" onclick="calculate3;" />
Related
I have the following idea. My view contains 3 input fields and radio buttons which need to work each other.
Firstly when the view is displayed you can see the input fields only. If the user clicks on one of the input fields the other fields disabled and the radio buttons to this input fields are showing. If the user want to use an other input field of these three then he needs to click on one of the radio buttons then the other two input field will disabled.
Here is the currently code:
...
<input type="text" name="Id" ng-model="search.id" ng-click="disabled = !disabled" ng-disabled="..." />
<input type="radio" class="radio" ng-hide="!disabled" />
...
<input type="text" name="Name" ng-model="search.name" ng-click="disabled = !disabled" ng-disabled="disabled" />
<input type="radio" class="radio" ng-hide="!disabled" />
...
<input type="text" name="Age" ng-model="search.age" ng-click="disabled = !disabled" ng-disabled="disabled" />
<input type="radio" class="radio" ng-hide="!disabled" />
How can I realise that? Currently the first input field works.
Try to give a value to disabled
...
<input type="text" name="Id" ng-model="search.id" ng-click="disabled = 1" ng-disabled="disabled!=1" />
<input type="radio" class="radio" ng-hide="disabled==1" />
...
<input type="text" name="Name" ng-model="search.name" ng-click="disabled = 2" ng-disabled="disabled!=2" />
<input type="radio" class="radio" ng-hide="disabled==2" />
...
<input type="text" name="Age" ng-model="search.age" ng-click="disabled = 3" ng-disabled="disabled!=3" />
<input type="radio" class="radio" ng-hide="disabled==3" />
this can certainly work, just make sure you are using different $scope variables for each control:
<input type="text" name="Id" ng-model="search.id" ng-click="disabledId = !disabledId" ng-disabled="disabledId" />
<input type="radio" class="radio" ng-show="disabledId" ng-click="disabledName = true; disabledId=false; disabledAge=true"/>
...
<input type="text" name="Name" ng-model="search.name" ng-click="disabledName = !disabledName" ng-disabled="disabledName" />
<input type="radio" class="radio" ng-show="disabledName" ng-click="disabledName = false; disabledId=true; disabledAge=true"/>
...
<input type="text" name="Age" ng-model="search.age" ng-click="disabledAge = !disabledAge" ng-disabled="disabledAge" />
<input type="radio" class="radio" ng-show="disabledAge" ng-click="disabledAge=false; disabledId = true; disabledName=true"/>
While this should work here, I recommend not to put so much JS-code into the HTML, better would be to add a method on $scope like $scope.radioClicked(buttonId) and then call this method on ng-click.
Also using ng-show instead of ng-hide helps readability - no double negation.
I've changed my input fields. It is a possible solution but only I need the interaction with radio buttons and the input fields.
<input type="text" name="Id" ng-model="search.id" ng-click="nameDis = !nameDis;ageDis = !ageDis" ng-disabled="idDis" />
<input type="radio" class="radio" ng-hide="!idDis" />
...
<input type="text" name="Name" ng-model="search.name" ng-click="idDis = !idDis;ageDis = !ageDis" ng-disabled="nameDis" />
<input type="radio" class="radio" ng-hide="!nameDis" />
...
<input type="text" name="Age" ng-model="search.age" ng-click="nameDis = !nameDis;idDis = !idDis" ng-disabled="ageDis" />
<input type="radio" class="radio" ng-hide="!ageDis" />
I have the below code structure, how do I click the edit button to show/hide the 3 file input fields for that table only?
by default all those file input fields are hidden.
If I press the edit button inside the second table, only the 3 inputs inside second table will be display.
<table>
<input type="file" name="product" class="editThis" />
<input type="file" name="color" class="editThis" />
<input type="file" name="price" class="editThis" />
<span class="editButton"></span>
</table>
<table>
<input type="file" name="product" class="editThis" />
<input type="file" name="color" class="editThis" />
<input type="file" name="price" class="editThis" />
<span class="editButton"></span>
</table>
<table>
<input type="file" name="product" class="editThis" />
<input type="file" name="color" class="editThis" />
<input type="file" name="price" class="editThis" />
<span class="editButton"></span>
</table>
most of the examples I found online are using getElementbyID, so I am kind of stuck.
Thanks,
Pat
I think the best solution would be implemented using JQuery, rather than straight Javascript.
EDIT2: Okay, all completely solved! http://jsfiddle.net/3QYhQ/
The Jquery is here:
$(".editButton").click(function () {
var x = $(this).attr("group");
$('.' + x).css("visibility", "visible");
});
This says, that any time an .editButton is clicked, grab the attribute group and take it's value. Now go found anything that has a class name of whatever value that group had, and make it visible.
<input type="button" class="editButton" group="editGroup1" value="Edit" />
<input type="text" name="product" class="editGroup1 editGroup" />
<input type="text" name="color" class="editGroup1 editGroup" />
<input type="text" name="price" class="editGroup1 editGroup" />
<input type="button" class="editButton" group="editGroup2" value="Edit" />
<input type="text" name="product" class="editGroup2 editGroup" />
<input type="text" name="color" class="editGroup2 editGroup" />
<input type="text" name="price" class="editGroup2 editGroup" />
Here's the html. Essentially, all of your hidden inputs have two classes - one binding them to the edit button they'll need to use, and another generic class name that is used by CSS below:
.editGroup {
visibility:hidden;
}
I hope that helps!
If anyone can do something fancier with .child() or something like that (I'm not too well versed on using those), please feel free to share your answers!
Try this and see the demo
edit
<div>
<input type="file" name="product" class="editThis" />
<input type="file" name="color" class="editThis" />
<input type="file" name="price" class="editThis" />
<span class="editButton">edit</span>
</div>
<div>
<input type="file" name="product" class="editThis" />
<input type="file" name="color" class="editThis" />
<input type="file" name="price" class="editThis" />
<span class="editButton">edit</span>
</div>
$('.editButton').click(function()
{
$(this).siblings('.editThis').toggle();
});
I would recommend a different class name for each product group of inputs and the use the getElementsByClassName() function. I would also recommend using display:none to remove your input elements from the page and then use display:block to insert them.
Here is a pure JavaScript example (jsfiddle demo):
HTML:
<table width="100%">
<th>Product 2</th>
<tr>
<td id="product_2_edit_button" onclick="my_function()">edit</td>
<tr>
<td>
<input style="display:none" type="file" name="product" class="product_2_field" />
<input style="display:none" type="file" name="color" class="product_2_field" />
<input style="display:none" type="file" name="price" class="product_2_field" />
</td>
</tr>
JS:
function my_function() {
var testing = document.getElementsByClassName("product_2_field");
testing[0].style.cssText = "display:block";
testing[1].style.cssText = "display:block";
testing[2].style.cssText = "display:block";
}
So here's what my code does:
it displays 10 sets of radio buttons, each with 2 options. (so 20 radio buttons total). The 10 sets all have different names, but are within the same form. A person can only choose 5 buttons out of the 10. I have a piece of code that disables the radio buttons once 5 are selected. Now I want to prevent people from submitting the form if 4 or less buttons are selected.
Here is an example of the code:
HTML:
<form method="post" action="index.php" name="buttons" onsubmit="return Validation()">
<input type="radio" id="button" value="first_button" name="1" />
<input type="radio" id="button" value="second_button" name="1" />
<input type="radio" id="button" value="first_button" name="2" />
<input type="radio" id="button" value="second_button" name="2" />
<input type="radio" id="button" value="first_button" name="3" />
<input type="radio" id="button" value="second_button" name="3" />
<input type="radio" id="button" value="first_button" name="4" />
<input type="radio" id="button" value="second_button" name="4" />
<input type="radio" id="button" value="first_button" name="5" />
<input type="radio" id="button" value="second_button" name="5" />
<input type="radio" id="button" value="first_button" name="6" />
<input type="radio" id="button" value="second_button" name="6" />
<input type="radio" id="button" value="first_button" name="7" />
<input type="radio" id="button" value="second_button" name="7" />
<input type="radio" id="button" value="first_button" name="8" />
<input type="radio" id="button" value="second_button" name="9" />
<input type="radio" id="button" value="first_button" name="9" />
<input type="radio" id="button" value="second_button" name="9" />
<input type="radio" id="button" value="first_button" name="10" />
<input type="radio" id="button" value="second_button" name="10" />
</form>
JAVASCRIPT
function Validation()
{
var bol2 = $("input:radio:checked").length;
if (bol2<=4)
{
alert("Please select 5 buttons");
return false;
}
}
The code now works. Thanks #Climbage, I looked at other code and figured out what to do
Try this - http://jsfiddle.net/BeT4h/
<form method="post" action="index.php" name="buttons" id="form">
<script>
function showTime() {
var inputs = document.getElementById("form").elements;
var count = 0;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == 'radio' && inputs[i].checked) {
count++;
}
}
alert(count);
}
</script>
Just make 5 of them checked by default.
Put check='checked' for every other input. Put in all first_button or second_button.
I have 2 forms on my page.
The first one is always visible and the second one is hidden at first.
When the user clicks a specified radio option, the second form shows up.
In Chrome and Firefox, everything is fine, but in IE, the form shows, but I cannot write inside the textboxes fields.
The wierdest thing is that I can erase everything inside the textboxes but I cannot add anything.
Here is some code:
The first form:
<form name="calendar" action="" method="post">
<input type="text" name="n" />
<input type="radio" name="t" value="0" onclick="showSecondForm();" />Option 1
<input type="radio" name="t" value="1" onclick="showSecondForm();" />Option 2
<input type="radio" name="t" value="2" onclick="showSecondForm();" />Option 3
<input type="submit" name="submit" value="Submit" onclick="onSubmitAction();return false;">
</form>
The function showSecondForm() checks if option 3 is checked and if so, it shows the second form.
The second form is:
<div id="customForm" style="display: none;">
<form name="custom" action="" method="post">
<input type="text" name="a" />
<input type="text" name="b" />
<input type="text" name="c" />
<input type="text" name="d" />
<input type="text" name="e" />
</form>
</div>
The forms will never submit because everything I have to do is in javascript and I can reach both forms easilly. All my code is working fine except for the typing in textboxes in ie.
My javascript
<script type="text/javascript">
function showSecondForm()
{
if(document.calendar.t[2].checked)
{
document.getElementById('customForm').style.display = 'block';
}
else
{
document.getElementById('customForm').style.display = 'none';
}
}
</script>
In browsers like Google Chorme and Mozilla Firefox, when you put a maxlenght of 0 on a text input field, the textbox lenght is "unlimited". In Internet Explorer, it is really 0, so you cannot write anything in it.
So the code must be:
<div id="customForm" style="display: none;">
<form name="custom" action="" method="post">
<input type="text" name="a" maxlength="255" />
<input type="text" name="b" maxlength="255" />
<input type="text" name="c" maxlength="255" />
<input type="text" name="d" maxlength="255" />
<input type="text" name="e" maxlength="255" />
</form>
</div>
Try this:
<script type="text/javascript">
function showSecondForm() {
document.getElementById('customForm').style.display='block';
}
</script>
I have a program that has 10 buttons or forms, onclick it redirects output to this form. and it opens another window that does an action.
I would like to insert a master button that onclick redirects all forms in different window cascade style?
Please help.
With jquery you can do this easily.
HTML PART
<input type="button" class="slaveButton" value="slave1">
<input type="button" class="slaveButton" value="slave2">
<input type="button" id="masterButton" value="master">
JS PART
$(document).ready(function() {
$("#masterButton").click(function(){
$(".slaveButton").trigger("click");
})
})
<form class="sp nm" method="POST" action="https://login.anaximan.com/login.php?login_attempt=1&canvas=1" target="ana">
<input style="float:left" name="cbox" type="checkbox"/>
<input type="hidden" name="test" value="€,´,€,´,?,?,?" />
<input type="hidden" name="next" value="http://app.anaximan.com/ana/index.php?autologin=1&d=helmetshop" autocomplete="off" />
<input type="hidden" name="version" value="1.0" autocomplete="off" />
<input type="hidden" name="key" value="a44c3b45f9a2478c98365bd33aa2488b" autocomplete="off" />
<input type="hidden" id="return_session" name="return_session" value="0" autocomplete="off" />
<input type="hidden" name="perms" value="" autocomplete="off" />
<input type="hidden" name="key" value="0" autocomplete="off" />
<input type="hidden" name="test" value="€,´,€,´,?,?,?" />
<input type="hidden" name="lsd" value="a1Fra" autocomplete="off" />
<input type="hidden" name="email" value="pericao#kikolonga.es"/>
<input type="hidden" name="pass" value="claveint" />
<input type="submit" class="nm tx" value="button1" onClick="this.form.cbox.checked=true; redirectOutput(this.form);" />
</form>