I made a simple html navigation list + some javascript. The thing is that i want a value to be returned when i select an option and click submit , but the value just vanishes in like 1 sec , here is the code:
<!doctype html>
<html>
<head>
<title>lol</title>
<meta charset="utf-8">
</head>
<body>
<form action="" name="form">
<input type="text" id="hp">
<select name="" id="lol">
<option value="neki1">neki1</option>
<option value="neki2">neki2</option>
<option value="neki3">neki3</option>
</select>
<input type="submit" onmousedown="radi()">
</form>
<script type="text/javascript">
function radi () {
var x = document.getElementById('lol').selectedIndex,
y = document.getElementById('lol').options,
z = Number(document.form.hp.value),
zSum = 0;
if(y[x].text === "neki1"){
zSum = z + 20;
}
else if(y[x].text === "neki2" ){
zSum = z + 35;
}
else if(y[x].text === "neki3" ){
zSum = z + 55;
}
document.form.hp.value = zSum;
}
</script>
</body>
</html>
EDIT:Also i want the old value to subtract if i change the option :)) , and yes the first question has been answered.
for 2nd Question
user parseInt() method of javascript to convert value from textbox back to integer.
and if the value is non 0 then do the substraction as needed.
parseInt(document.form.hp.value)
That's because you're not stopping the form from submitting and the page is reloading. Change the button code to:
<input type="submit" onclick="return radi()">
and at the end of your function add
return false;
jsFiddle example
Related
I am trying to loop in HTML Select in JavaScript. Below is my code. I want to display my COUNT value in option. I am getting some data from PHP end & it need to be display the count. Please advise if i am missing anything or is it wrong way ?
var cjs=$form.find('[name="cjs"]').data("cjs");
var newHtml = 'Current<br>\
<select class="form-control" id="priority" name="priority">\
'+for (var i = 1; i <= cjs; i++) {+'\
<option disabled selected value ="0" style="display:none">-CHOOSE PRIORITY-</option>\
'+}+'\
</select>\
<button class=" upr edit btn btn-sm btn-primary"> Update </button></center></div>';
$('.proo'+request).html(newHtml);
alert("Successfully Updated");
check this maybe it will helpful for you
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Date Picker</title>
</head>
<body>
<p>Click the button to loop through a block of code five times.</p>
<select id="demo">
</select>
<p id="demo"></p>
<script>
function myFunction(selector)
{
var optionList="CHOOSE PRIORITY "
var i;
for (i=1;i<=5;i++){
selector.options[i-1] = new Option(optionList+i);
}
}
//usage:
myFunction(document.getElementById("demo"));
</script>
</body>
</html>
I tried to create an online calculation form using javascript, everything is ok except radio buttons.
Scenario:
x(select list) =
item1 - value="11.2"
item2 - value="7.6"
item3 - value="7"
y=(input number)
z=(input number)
coverkind=(radio button)
if 1 selected >> coverkind = z*800
if 2 selected >> coverkind = ((y/16)+1)*8*z
totalprice= (x*y*z)+(1000*z)+coverkind
my work till now:
<html>
<head>
<script type="text/javascript">
function getselectionPrice() {
var elt = document.getElementById("selectionone");
var selectionPrice = elt.options[elt.selectedIndex].value;
var y = document.getElementById("y").value;
var z = document.getElementById("z").value;
var ser = (selectionPrice * y * z);
var dz = z*1000;
var coverkind = document.getElementById("cover").value;
if (coverkind == 'soft') {
var SizePrice = (z * 800);
} else {
var SizePrice = ((y / 16) + 1) * 8 * z;
}
var finalPrice = ser + dz;
document.getElementById("totalPrice").value = finalPrice;
}
</script>
</head>
<body>
<div>
<form action="" id="calcform" onsubmit="return false;">
<div>
<div>
<fieldset>
<label>select</label>
<select id="selectionone" name='selectionone' onChange="getselectionPrice()">
<option value="11.2">1</option>
<option value="7.6">2</option>
<option value="7">3</option>
</select>
<br/>
<p>y
<input type="text" id="y" onchange="getselectionPrice()" />
</p>
<p>z
<input type="text" id="z" onchange="getselectionPrice()" />
</p>
<label>cover</label>
<input type="radio" name="cover" value="hard" />hard
<br />
<br>
<input type="radio" name="cover" value="soft" />soft
<br>
<br>
<br/>The new calculated price:
<INPUT type="text" id="totalPrice" Size=8>
</fieldset>
</div>
<input type='submit' id='submit' value='Submit' onclick="getselectionPrice()" />
</div>
</form>
</div>
</body>
</html>
If I remove the coverkind from js, the rest works fine. I googled about getting value from radio button and nothing found very relevant to this situation.
firebug error panel :
TypeError: document.getElementById(...) is null
var coverkind = document.getElementById("cover").value;
If you can use jQuery, you can get the value of the checked radio button in one line.
var Val = $("input[name=cover]:checked").val();
Here is the solution of your problem.
First give a same id to your radio buttons.
The checked property will tell you whether the element is selected:
<input type="radio" id="cover" name="cover" value="hard" checked="checked" />hard
<br />
<br>
<input type="radio" id="cover" name="cover" value="soft" />soft
and in JavaScript function, you can get it.
var coverkind = null;
if (document.getElementById('cover').checked)
{
coverkind = document.getElementById('cover').value;
}
if (coverkind == 'soft') {
var SizePrice = (z * 800);
} else {
var SizePrice = ((y / 16) + 1) * 8 * z;
}
You can use the output tag if you want or something else for your output. (a <p> element for example). Just make sure you give anything you want to access in your Javascipt an 'id' value.
You'll need to create a new file and call it something like 'script.js'. Google how to include this script in your html document.
Some of the things you'll need to use in your script:
document.getElementById(str) Returns an object representing an html
element with an id of 'str'
parseFloat(str) Takes a string 'str' and return the float value
.value This is a read/write property of an input text box object
that contains the text value
.checked ..and a property of an input radio button object.
When you hit a wall refer to the great google ;) Put all that together and you should be on the right track.
Error:
TypeError: d.options is undefined while(i<=d.options.length){
Hi i have this javascript of mine which has the select option to choose from. and from choosing from the select options it will display to the textbox field im using this onchange and using it while loop. can someone help me how to figure this out?? using while loop code?
Here's my code below
<!DOCTYPE html>
<html>
<head>
<title>Activity 2 while loop</title>
<script type="text/javascript">
function tellMe(d){
var i = 0;
while(i<=d.options.length){
if(d.listbox1.options[i].selected == true){
d.choose.value = d.listbox1.options[i].text;
}
}
}
</script>
</head>
<body>
<form name="form1">
<p>Girl's qualities you want?</p>
<select name="listbox1" size="5" onchange="tellMe(this.form)">
<option>Pretty</option>
<option>Sexy</option>
<option>Hot</option>
<option>Intelligent</option>
<option>Funny</option>
</select>
<br />
<p>
You Choose: <input type="text" name="choose" />
</p>
</form>
</body>
</html>
any help is muchly appreciated! thanks
Fiddle
Fixed it:
<!DOCTYPE html>
<html>
<head>
<title>Activity 2 while loop</title>
<script type="text/javascript">
function tellMe(d){
document.getElementById("choose").value = d.value;
}
</script>
</head>
<body>
<form name="form1">
<p>Girl's qualities you want?</p>
<select name="listbox1" size="5" onchange="tellMe(this)">
<option>Pretty</option>
<option>Sexy</option>
<option>Hot</option>
<option>Intelligent</option>
<option>Funny</option>
</select>
<br />
<p>
You Choose: <input type="text" id="choose" name="choose" />
</p>
</form>
</body>
</html>
You were trying to get this.form but it should have been this, then the value of this (this.value).
Then, all you had to do was set the input type with name='choose', however I gave it an ID of choose to make it easier to select, then gave that value d.value, which was the value of listbox1.
You are passing the form element, which doesn't have options. Change d.options to d.listbox1.options
while(i<=d.listbox1.options.length){
After that is fixed your second problem will become apparant, whch is that you fail to increment i:
while(i<=d.listbox1.options.length){
...
i++;
}
You aren't incrementing i. You need to add i++ at the end of your while loop. You also need to target listbox1 in your while loop.
function tellMe(d){
var i = 0;
while(i<=d.listbox1.options.length){ // <-- use d.listbox1.options.length
if(d.listbox1.options[i].selected == true){
d.choose.value = d.listbox1.options[i].text;
}
i++; // <-- add increment here
}
}
I want to store the value given in the text box in a variable. I am beginner to javascript. Please help me out. Here s my code.
<!DOCTYPE html>
<html>
<body>
Days of Journey: <input type="text" id="doj" name="daysofjourney">
<input type="button" value="submit" onclick="dayscounter()">
<script language="javascript" type="text/javascript">
var travel = document.getElementById("doj").value;
function dayscounter() {
var days;
for(days = 1; days <= travel; days++) {
document.write(days);
}
}
</script>
</body>
</html>
You nearly had it already...
function dayscounter() {
var travel = document.getElementById("doj").value;
var days;
for(days=1;days<=travel;days++)
{
document.write(days);
}
}
The problem was, that your first assignment of the variable travel is made as soon as the HTML code is loaded. The user can't have made an input yet at that time, thus the variable stays empty. If you include document.getElementById("doj").value inside the function, you will get the value at that specific time you launch the function.
Just parse value to int
var travel = +(document.getElementById("doj").value;);
You can use 'value' attribute of an text input to set it's value like:
<input type="text" id="textid" value="value content" />
and you can do your function like this:
<script language="javascript" type="text/javascript">
function dayscounter()
{
var travel = document.getElementById("doj").value;
var days;
var result = "";
for (days = 1; days <= parseInt(travel); ++days)
{
document.getElementById("result").value += " " + days;
}
}
</script>
Days of Journey:
<input type="text" id="doj" name="daysofjourney" />
<input type="button" value="submit" onclick="dayscounter()" />
<p>
<input type="text" id="result" />
</p>
Beginer to javasctipt. I am trying to write a simple calculation that will display some text if the time since oil change is past 6 months, the amount of oil left in the car is less then it started and finally display if everything is ok.
Thanks for the help
JavaScript
function oil(){
var start = document.oil.start.value;
var lastOilChange = document.oil.time.value;
var totalOil = document.oil.amount.value;
var aa = "you need to change the oil";
if( lastOilChange > 6 || start < totalOil){
document.oil.result.write(aa);
}else{
document.oil.result.write("Everything Is all good");
}
}
HTML
<form name="oil">
Starting amount of oil
<input type="text" name="start">
Time since oil change
<input type="text" name="time">
Total amount of oil in car now(quarts)
<input type="text" name="amount">
<input type="submit" onclick = oil()>
<input name=result readonly>
</form>
There are a couple of problems with your code
Missing Form close tag
Your controls don't have IDs
missing quotes on the result input
Don't need to use a submit input when you're not submitting to a form. Try button
Not sure what document.oil.result.write(aa); will do. I think the correct process is to get the input using document.getElementById and then set the value of the control
I will try to answer your question with the least number of line changes. This is not the optimal answer. Comments have been added to help you understand required changes. Your HTML and JavaScript are invalid, so it was a surprise to me how they both ran on Chrome.
<!doctype>
<html>
<head>
<title>Personal</title>
<meta charset="utf-8">
<script type="text/javascript">
function _oil(){ // oil() conflicts with your form's name
var start = document.oil.start.value;
var lastOilChange = document.oil.time.value;
var totalOil = document.oil.amount.value;
var aa = "you need to change the oil";
if( lastOilChange > 6 || start < totalOil){
document.write(aa); // you can't .write() to an element
}else{
document.write("Everything Is all good");
}
window.event.preventDefault(); // so your window does not load the same page when you submit
return false;
}
</script>
<style>
form input {
display: block;
}
</style>
</head>
<body>
<form name="oil">
Starting amount of oil
<input type="text" name="start">
Time since oil change
<input type="text" name="time">
Total amount of oil in car now(quarts)
<input type="text" name="amount">
<input type="submit" onclick ="_oil()"> <!-- you must enclose the onclick attribute, even if both work -->
<input name=result readonly>
</body>
</html>
May be like this:
<!doctype>
<html>
<head>
<title>Personal</title>
<meta charset="utf-8">
<script type="text/javascript">
function oil(){
var start = document.getElementsByName("start")[0].value;
var lastOilChange = document.getElementsByName("time")[0].value;
var totalOil = document.getElementsByName("amount")[0].value;
var aa = "you need to change the oil";
if( lastOilChange > 6 || start < totalOil){
document.getElementsByName("result")[0].value = aa;
}else{
document.getElementsByName("result")[0].value = "Everything Is all good";
}
}
</script>
<style>
form input {
display: block;
}
</style>
</head>
<body>
<form name="thisform">
Starting amount of oil
<input type="text" name="start">
Time since oil change
<input type="text" name="time">
Total amount of oil in car now(quarts)
<input type="text" name="amount">
<input type="button" value="go" onclick = oil()>
<input name=result readonly>
</form>
</body>
</html>
！！！ The form name can not use oil
What you want is to set the value of the form field rather than trying to use write:
if( lastOilChange > 6 || start < totalOil){
document.oil.result.value = aa;
} else {
document.oil.result.value = "Everything Is all good";
}
As pointed out in other answers, though, you also need to prevent the form from trying to submit information to the server and reload the page. There are several ways of doing this (see e.g. JavaScript code to stop form submission). One is to replace the submit button with an ordinary button (<input type="button" value="Calculate" />).
Another is to attach your function to the form as an event handler, and return false at the end of it.
document.oil.onsubmit = function () {
...
return false;
}
(JSFiddle)