This is my code. For some reason, the starred line is having a problem. Whenever I load the page, I get /15 like I should. However, when I submit the html form, the output replaces the /15. Is there anyway to make the output come before the /15 instead of replacing it?
<html>
<head>
</head>
<body class="mmmm">
<div class="center">
<script language="JavaScript">
function add(){
var rawScore=document.getElementById('rawScore');
var apScore=document.getElementById('apScore');
var mcPerc=document.getElementById('mcPerc');
rawScore.value = 0;
rawScore.value = Math.round(parseInt(mc.value)
+ parseInt(one.value)*1.1538
+ parseInt(two.value)*.9375
+ parseInt(three.value)*1.25);
mcPerc.value= Math.round(parseInt(mc.value)/60*1000)/10;
if (rawScore.value>=73){
apScore.value="5";
}
else if(rawScore.value>=57){
apScore.value="4";
}
else if(rawScore.value>=49){
apScore.value="3";
}
else if(rawScore.value>=38){
apScore.value="2";
}
else{
apScore.value="1";
}
}
</script>
<form class="bbbb" name="frmf">
Multiple Choice Score:
<input class="ddddd" type="number" id="mc" value="60" min="0" max="60"/>
<FONT COLOR="474747">/60</FONT>
<br/>
Free Response 1 Score:
<input class="aaaaa" type="number" id="one" value="13" min="0" max="13"/>
<FONT COLOR="474747">/13</FONT>
<br/>
Free Response 2 Score:
<input class="aaaaa" type="number" id="two" value="8" min="0" max="8"/>
<FONT COLOR="474747">/8</FONT>
<br/>
Free Response 3 Score:
<input class="aaaaa" type="number" id="three" value="6" min="0" max="6"/>
<FONT COLOR="474747">/6</FONT>
<br/>
<p>
<input type ="button" value="Calculate Score" onClick="add();"/>
<br/>
<br/>
**AP Score:
<output class="apScore" type="text" id="apScore"/> /15**
<p>
<br/>
<br/>
Raw Score:
<output class="rawScore" type="text" id="rawScore"/>
<p>
Multiple Choice Percent:
<output class="mcPerc" type="text" id="mcPerc"/>
</p>
</p>
</p>
</form>
</div>
</body>
</html>
you need to add the corresponding closing tag to your <output> elements. Otherwise, due to a bug in the browser probably, it thinks that what is following it is the value:
**AP Score: <output class="apScore" type="text" id="apScore"></output> /15**
note that IE does not support <output> tag.
what about apScore.value = "3" + apScore.value; ?
that would prepend "3" before the value which is it currently.
generally you could do apScore.value="1" + "/15"; or even apScore.value="1/15";
Related
According to my code, I want to display data form but im stuck at input element radio and select. Or there is some mistake in my js function?
Can somebody explain and fix it?
<html>
<head>
<title>Form Example</title>
<script LANGUAGE="JavaScript" type="text/javascript">
function display() {
DispWin = window.open('','NewWin', 'toolbar=no,status=no,width=300,height=200')
message = "<ul><li><b>NAME: </b>" + document.form1.yourname.value;
message += "<li><b>ADDRESS: </b>" + document.form1.address.value;
message += "<li><b>Polling: </b>" + document.form1.webpol1.value;
message += "<li><b>PHONE: </b>" + document.form1.phone.value + "</ul>";
DispWin.document.write(message);
}
</script>
</head>
<body>
<h1>saksake</h1>
hiyahiyahiyahiyahiyahiyahiyahiyahiyahiyahiyahiyahiyahiyahiya
<form name="form1">
<p><b>Name:</b> <input TYPE="TEXT" SIZE="20" NAME="yourname">
</p>
<p><b>Address:</b> <input TYPE="TEXT" SIZE="30" NAME="address">
</p>
<p><b>Phone: </b> <input TYPE="TEXT" SIZE="15" NAME="phone">
</p>
<p><b>Skala polling : </b><br/>
<input id="poll" type="radio" name="webpol1" value="bosok" />bosok<br/>
<input id="poll"type="radio" name="webpol2" value="mayan"/>mayan<br/>
<input id="poll" type="radio" name="webpol3" value="apik" />apik<br/>
</p>
<p><input TYPE="BUTTON" VALUE="Display" onClick="display();"></p>
</form>
</body>
</html>
Name for the radio group should be the same in this case.
You need to write:
<input id="poll" type="radio" name="webpol" value="bosok" />bosok<br/>
<input id="poll"type="radio" name="webpol" value="mayan"/>mayan<br/>
<input id="poll" type="radio" name="webpol" value="apik" />apik<br/>
So i can save one question but when i add more it doesnt work. I though i could just add on to postquestion function copy and paste and just change 16 to 15 but i guess that is to easy
I need to save about 16 total questions with 4 choices each question, and the selected radio is the correct answer.
Also is there a way to save selected radio buttons into session and local storage?
function postQuestion() {
var obj = {
question: document.getElementById("question16").value,
choice62: document.getElementById("choice62").value,
choice63: document.getElementById("choice63").value,
choice64: document.getElementById("choice64").value,
choice65: document.getElementById("choice65").value
}
try {
sessionStorage.setItem("data", JSON.stringify(obj));
} catch (error) {
alert("Enable Session storage");
}
return false;
}
function PreviewImage16() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadImage16").files[0]);
oFReader.onload = function (oFREvent) {
document.getElementById("uploadPreview16").src = oFREvent.target.result;
sessionStorage.setItem("image", oFREvent.target.result);
};
};
<div>
Enter Question 16:
<input type="text" id="question16" name="question16">
<br>
<br> Next, add a correct answer and several incorrect answers for your question.
<br>
<form onsubmit="return postQuestion()">
<p>
<input type="radio" name="choice62" value="62">
<label>
<input id="choice62" size="50">
</label>
</p>
<p>
<input type="radio" name="choice63" value="63">
<label>
<input id="choice63" size="50">
</label>
</p>
<p>
<input type="radio" name="choice64" value="64">
<label>
<input id="choice64" size="50">
</label>
</p>
<p>
<input type="radio" name="choice65" value="65">
<label>
<input id="choice65" size="50">
</label>
</p>
<p>
<button type="submit"> Submit</button>
</p>
<br>
<img id="uploadPreview16" style="width: 100px; height: 100px;" />
<input id="uploadImage16" type="file" name="myPhoto16" onchange="PreviewImage16();" />
</div>
I would like to create a form that based on the input values, calculation results and enter it in a div / label / bit somewhere in the web page html.
an working similar to that of the currency converters online
(insert the number for the first currency and you can see the result without the page refresh, with use of the submit button or not)
this is a little piece of my code (I can not understand the concept/mechanism to do what I want as described above)
<form id="form" class="green" method="post">
<label class="title">
<span class="titolo-riga required">Number1</span>
<input id="firstId" class="small" type="number" name="number1" required="required" value="0" />
</label>
<label class="title">
<span class="titolo-riga required">Number2</span>
<input id="secondID" class="small" type="number" name="number2" required="required" value="0" />
</label>
<div class="submit"><input type="submit" onclick="return submitForm();" value="Submit"/></div>
</form>
<div><label id="printHere" class="result"></label></div>
this a basic script inside the html:
function submitForm(){
var a = parseInt($("#firstId").val());
var b = parseInt($("#secondID").val());
result = a+ b;
try this simple script with html:
<html>
<body>
<p>Click the button to calculate x.</p>
<button onclick="myFunction()">Add it</button>
<br/>Enter first number:
<input type="text" id="txt1" name="text1">
<br/>Enter second number:
<input type="text" id="txt2" name="text2">
<p id="demo"></p>
<script>
function myFunction() {
var y = document.getElementById("txt1").value;
var z = document.getElementById("txt2").value;
var x = +y + +z;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
If I understood it correctly, you are trying to retrieve to input values, do some mathematical operations with them, and return it to the page without refreshing it, if it's so:
make a change event listener on both of inputs, in that case:
$("#firstId").change(function() {
$("#thirdId").val(calculate());
});
$("#secondID").change(function() {
$("#thirdId").val(calculate());
});
make a calculation function:
function calculate() {
var a = parseInt($("#firstId").val());
var b = parseInt($("#secondID").val());
return a+ b;
}
Good Day Sir,
I would suggest you could bind this input value a few different ways to update it on the page, without requiring a refresh. The jQuery library is probably the easiest to implement over straight javascript. Are you familiar with the following functions?
Keyup/Blur?
I created this fiddle for you. Hopefully it helps.
https://jsfiddle.net/wkdjwzfv/
<script>
$(function(){
//val for firstid
$("#firstId").keyup(function() {
//val of firstId
var total = parseInt($(this).val()) + parseInt($("#secondID").val());
console.log(total);
$("#total").empty().append(total);
});
//for keyup for second
$("#secondID").keyup(function() {
var total = parseInt($(this).val()) + parseInt($("#firstId").val());
console.log(total);
$("#total").empty().append(total);
});
})
</script>
Try this html and jquery combination:
<form id="form" class="green">
<div class="element-number column1">
<label for="avanti-testa" class="title">
<span class="titolo-riga required">Number1</span>
<input id="firstId" class="small" type="number" min="0" max="100" name="number1" required="required" value="0" />
</label>
</div>
<div class="element-number column1">
<label for="avanti-testa" class="title">
<span class="titolo-riga required">Number2</span>
<input id="secondID" class="small" type="number" min="0" max="100" name="number1" required="required" value="0" />
</label>
</div>
<div id="answer"></div>
<button id="submitForm" type="button">Submit</button>
</form>
<script>
// assuming jQuery is loaded
(function($) {
$('#submitForm').on('click', function (e) {
e.preventDefault();
var answer = parseInt($('#firstId').val(), 10) + parseInt($('#secondId').val(), 10);
$('#answer').text(answer);
});
})(jQuery);
</script>
As an alternative solution I'd like to post a simplistic answer created with AngularJS. Here is the Plunker: http://plnkr.co/edit/46Xf23jUhrmaT2x31S0K?p=preview
The code would be:
<div class="col-md-2 col-md-offset-5 form-group">
<input class="form-control" type="number" ng-model="firstValue" />
<p class="text-center">+</p>
<input class="form-control" type="number" ng-model="secondValue" />
</div>
<div class="panel panel-primary col-md-2 col-md-offset-5 text-center">
{{ firstValue + secondValue }}
</div>
The classes are from Bootstrap, just for making it little bit nicer.
My shopping cart script is intended to check if an article is already in the shopping cart; then the numbers must be filled in the survey.
I work with Javascript. I give the ID number through a position() function.
This is a part of the script where I pick list:
<input type="text" size="2" name="aantalArts_{position()}" id="aantalArts_{position()}"/>
The output:
<input type="text" size="2" value="" name="aantalArts_1" id="test" class="infoButton">
<input type="text" size="2" value="" name="aantalArts_2" id="test" class="infoButton">
<input type="text" size="2" value="" name="aantalArts_3" id="test" class="infoButton">
<input type="text" size="2" value="" name="aantalArts_4" id="test" class="infoButton">
I am just filling the numbers, but how do I deal with the positions?
<script language="javascript" type="text/javascript">
if(document.all.artNr.value = <%=artNrWW%>);{
document.all.aantalArts_??????.value = <%=aantalWW%>;
}
</script>
You are probably looking for the following syntax:
var i = 1; // or whichever
document.all["aantalArts_" + i].value = <% aantalWW %>;
I'm currently building an order form but it seems that the method I am testing to loop through the check-boxes to see if a value is ticked or not isn't working. What am I doing wrong? In logic it seems all right - I would appreciate any help. Thanks in advance :-)
<script>
function order()
{
for(i=1;i<=7;i++)
{
alert(document.orderForm.order[i].checked);
}
}
</script>
<form name='orderForm'>
<p>Basic choices:</p>
<p>
<input type='checkbox' id='order1' name='order1' value='90' />
<label for="1"> Nano 1GB (£90)</label>
<br>
<input type='checkbox' id='order2' name='order2' value='155' />
<label for="2"> Nano 4GB (£155)</label>
<br>
<input type='checkbox' id='order3' name='order3' value='200' />
<label for="3"> Video 30GB (£200)</label>
<br>
<input type='checkbox' id='order4' name='order4' value='275' />
<label for="4"> Video 60GB (£275)</label>
</p>
<p>Options:</p>
<p>
<input type='checkbox' id='order5' name='order5' value='90' />
<label for="5"> Engraving (£10)</label>
<br>
<input type='checkbox' id='order6' name='order6' value='15' />
<label for="6"> Carrying case (£15)</label>
<br>
<input type='checkbox' id='order7' name='order7' value='18' />
<label for="7"> Car power adapter (£18)</label>
</p>
<p>
<input type="button" onClick="order();">
</p>
<p>Order Total</p>
<p>
<input type="text" name="orderTotal" id="orderTotal">
</p>
<p>VAT</p>
<p>
<input type="text" name="vat" id="vat">
</p>
<p>Order Total (+VAT)</p>
<p>
<input type="text" name="orderTotal_vat" id="orderTotal_vat">
</p>
</form>
document.orderForm.order is not an array. In fact, it doesn't exist. You need to build your id like this:
function order() {
for(i=1;i<=7;i++) {
alert(document.orderForm["order" + i].checked);
}
}
Here's a working fiddle.
Your current function implementation doesnt seem to be right.. well with the solution that you have here is how your funnction should look like:
<script>
function order()
{
for(i=1;i<=7;i++)
{
alert(document.getElementById("order"+i).checked);
}
}
</script>
or you can fix your names and then get it work. The array that you are trying to work with is constructed of a name that is shared across the checkboxes.
<script>
function order()
{
with(document.orderForm)
{
for(var i = 0; i < orderName.length; i++){
alert(orderName[i].checked);
}
}
}
</script>
<form name='orderForm'>
<p>Basic choices:</p>
<p>
<input type='checkbox' id='order1' name='orderName' value='90' />
<label for="1"> Nano 1GB (£90)</label>
<br>
<input type='checkbox' id='order2' name='orderName' value='155' />
<label for="2"> Nano 4GB (£155)</label>
<br>
<input type='checkbox' id='order3' name='orderName' value='200' />
<label for="3"> Video 30GB (£200)</label>
<br>
<input type='checkbox' id='order4' name='orderName' value='275' />
<label for="4"> Video 60GB (£275)</label>
</p>
<p>Options:</p>
<p>
<input type='checkbox' id='order5' name='orderName' value='90' />
<label for="5"> Engraving (£10)</label>
<br>
<input type='checkbox' id='order6' name='orderName' value='15' />
<label for="6"> Carrying case (£15)</label>
<br>
<input type='checkbox' id='order7' name='orderName' value='18' />
<label for="7"> Car power adapter (£18)</label>
</p>
<p>
<input type="button" onClick="order();">
</p>
<p>Order Total</p>
<p>
<input type="text" name="orderTotal" id="orderTotal">
</p>
<p>VAT</p>
<p>
<input type="text" name="vat" id="vat">
</p>
<p>Order Total (+VAT)</p>
<p>
<input type="text" name="orderTotal_vat" id="orderTotal_vat">
</p>
</form>
Fiddle: http://jsfiddle.net/P7CKG/
Without using with if you think that is confusing you:
<script>
function order()
{
for(var i = 0; i < document.orderForm.orderName.length; i++){
alert(document.orderForm.orderName[i].checked);
}
}
</script>
Your function is failing because the form elements are not named order[1], order[2], etc: they are named order1, order2. Thus, the code document.orderForm.order[i] references nothing.
Also, you should avoid accessing the form through the document.formName mechanism - get the element by ID instead. Likewise, rather than form.elementName, use form.elements[elementName] instead. These are, in my experience, more consistent between user agents.
function order () {
var frm = document.getElementById('orderForm');
for(i=1;i<=7;i++) {
alert(frm.elements['order'+i].checked);
}
return false;
}
function order(){
var arrChks = document.orderForm.getElementsByTagName('input');
for(i=0;i<arrChks.length;i++){
if(arrChks[i].type=='checkbox'){
alert(arrChks[i].checked);
}
}
}
but i reccomend you to use jquery or another javascript framework!
Complete example!
http://jsbin.com/amesek/
Zolved!