I don't know what is happening. I'm inputting value for the operation to solve but when it displays the result it displays but in a brief time only.
function add(){
var num1 = document.getElementById('fnum').value;
var num2 = document.getElementById('snum').value;
var ans = parseFloat(num1) + parseFloat(num2);
document.getElementById('res').value = ans;
}
<form>
1st Number:<input type="text" id="fnum" name="Num1" /><br>
2nd Number:<input type="text" id="snum" name="Num2" /><br><br>
<input type="submit" value="Add" id="button1" name="button" onclick="add()"/>
The result is:<input type="text" id="res" name="res" readonly="true" /><br>
</form>
Because you are using the <form> tag with a <button type="submit">, the form is submitted.
So what's happening is that your onclick event is handled, but when that's done, the form is still submitted. You have multiple ways of fixing this:
Don't use <form>
Change the <button> type to button
Handle the form submit in JavaScript
Cancel the click event
Here's a working version without a <form> tag and <button type="button">:
function add() {
var num1 = document.getElementById('fnum').value;
var num2 = document.getElementById('snum').value;
var ans = parseFloat(num1) + parseFloat(num2);
document.getElementById('res').value = ans;
}
1st Number:<input type="text" id="fnum" name="Num1" /><br>
2nd Number:<input type="text" id="snum" name="Num2" /><br><br>
<input type="button" value="Add" id="button1" name="button" onclick="add()" />
The result is:<input type="text" id="res" name="res" readonly="true" /><br>
it's because your button is a submit component,
change :
<input type="submit" value="Add" id="button1" name="button" onclick="add()"/>
to
<button type="button" value="Add" id="button1" name="button" onclick="add()">add</button>
a submit component used to submit your form so you'll need a valid action in your form for that.
or you can use onsubmit event for your form to prevent default form action
Related
this is my code.jsp file and I've written javascript in it to enable/disable textbox name=uinp when toggling checkbox name=input but it is not working!
<html>
<body>
<form action="compile.jsp" method="get">
Custom Input: <input type="checkbox" name="input" onchange="toggle('input','uinp')"><br><br>
<textarea rows="5" cols="15" name="uinp" style="display: none"></textarea><br><br>
<br><input type="submit" value="Submit">
<input type="reset" value="Cancel">
</form>
<script>
function toggle(chk,txt)
{
if(document.getElementById(chk).checked)
document.getElementById(txt).style.display='';
else
document.getElementById(txt).style.display='none';
}
</script>
</body>
</html>
Please anyone help me with this!
You need to set id for textarea otherwise getElementById() returns null, since there is no element with that id. Also you can pass this context to refer the checkbox.
<form action="compile.jsp" method="get">
Custom Input:
<input type="checkbox" name="input" onchange="toggle(this,'uinp')">
<br>
<br>
<textarea rows="5" cols="15" id="uinp" style="display: none"></textarea>
<br>
<br>
<br>
<input type="submit" value="Submit">
<input type="reset" value="Cancel">
</form>
<script>
function toggle(ele, txt) {
if (ele.checked)
document.getElementById(txt).style.display = '';
else
document.getElementById(txt).style.display = 'none';
}
</script>
I have multiple forms as below. The page is dynamic, I cannot say how many forms will be presented inside.
<form name="f1" action="submit.php" method=POST>
<input type="hidden" name="approve1" value="93545" />
<input type="submit" value="Submit/>
</form>
<form name="f2" action="submit.php" method=POST>
<input type="hidden" name="approve2" value="93545" />
<input type="submit" value="Submit/>
</form>
.....
<input type="button" value="Submit All"/>
When i click "Submit All" the values of all the forms - approve1, approve2, in the example - should be submitted in the page.
Any help with Jquery or Javascript is appreciated!
To submit all the inputs at once, you'll have to create a new <form>.
This can be done dynamically using jQuery:
$(function() {
$("#submitAll").click(function(ev) {
ev.preventDefault();
var newForm = $("<form action='/echo/html/' method='POST'></form>");
$("form input[type='hidden']").each(function(i, e) {
newForm.append(
$("<input type='hidden' />")
.attr("name", e.name)
.attr("value", e.value)
);
});
$(document.body).append(newForm);
newForm.submit();
});
});
Here's a jsFiddle
However, I'd recommend a different approach. Your submit buttons can carry all the information you need in a single form.
<form name="f1" action="submit.php" method="POST">
<button type="submit" name="approve" value="93545">
Approve 1
</button>
<button type="submit" name="approve" value="12345">
Approve 2
</button>
<button type="submit" name="approve" value="93545,12345">
Approve All
</button>
</form>
I have a form with input fields.
Once,I clicked on submit button I want to generate 2 input fields with a "plus / +" icon. So, when I click on "+" icon it will generate input fields.
Here is the html part:
<label>Name</label>
<input type="text" value="Jim" id="demo_1" name="demo_name" class="input-medium"/>
<label>Id</label>
<input type="text" value="123" id="demo_1" name="demo_name" class="input-medium">
<button id="demo_submit" class="btn" name="demo_submit" type="button">Submit</button>
I suggest to have a look at existing plugins (For example - Jquery SheepIt! Plugin) and see how that is coded.
To add dynamically form elements this can be done with the clone() method and DocumentFragment - http://ejohn.org/blog/dom-documentfragments/
Working example at http://plnkr.co/edit/szYoU4GCeLWX8b9DcsYT
<script type="text/javascript">
function addFields () {
var newNode1 = document.createElement('input'),
newNode2 = document.createElement('input');
newNode1.type = newNode2.type = "text"; document.forms[0].appendChild(newNode1);
document.forms[0].appendChild(newNode2);
}
</script>
<form>
<label>Name</label>
<input type="text" value="Jim" id="demo_1" name="demo_name" class="input-medium"/>
<label>Id</label>
<input type="text" value="123" id="demo_1" name="demo_name" class="input-medium">
<button id="demo_submit" class="btn" name="demo_submit" type="button" onclick="addFields()">Submit</button>
</form>
$(".addInput").click(function {
$("form").append( PUT INPUT ELEMNT HERE);
});
Check this out.
HTML
<label>Name</label>
<input type="text" value="Jim" id="demo_1" name="demo_name" class="input-medium" />
<label>Id</label>
<input type="text" value="123" id="demo_1" name="demo_name" class="input-medium">
<button id="demo_submit" class="btn" name="demo_submit" type="button">Submit</button>
<button id="demo_add" class="btn" name="demo_add" type="button">Add more</button>
<div id='add'></div>
jQuery
$('#demo_add').click(function () {
$inputName = "<input type='text' placeholder='Name'/>";
$inputId = "<input type='text' placeholder='Id'/>";
$br = "<br/>";
$('#add').append($inputName);
$('#add').append($inputId);
$('#add').append($br);
});
Hopefully it helps.
I need to create a radio button form where the selection would redirect you to a different index.html link when a Continue button is pressed. I cant seem to find an easy way to do this. Help!!
Basically as follows:
<form>
<input type="RADIO" name="button" value="^button1^" checked>this button goes to index1.html (Default)<BR></BR>
<input type="RADIO" name="button" value="^button2^">this button goes to index2.html<BR> </BR>
<input type="RADIO" name="button" value="^button3^">this button goes to index3.html<BR> </BR>
<input type="submit" value="Continue">
</form>
In html add a data-href attribute for each button and ID to submit button
<form>
<input type="RADIO" name="button" value="^button1^" data-href="index1.html" checked>this button goes to index1.html (Default)<BR></BR>
<input type="RADIO" name="button" value="^button2^" data-href="index2.html">this button goes to index2.html<BR> </BR>
<input type="RADIO" name="button" value="^button3^" data-href="index3.html">this button goes to index3.html<BR> </BR>
<input type="submit" value="Continue" id="btnFormSubmit">
</form>
Javascript:
var submit = document.getElementById('btnFormSubmit');
submit.addEventListener('click', submitForm);
function submitForm(event){
event.preventDefault();
event.stopPropagation();
var href = '',
inputs = this.parentNode.getElementsByTagName('input')
for(var i=0;i<inputs.length;i++){
if(inputs[i].getAttribute('name') == 'button' && inputs[i].checked){
href = inputs[i].getAttribute('data-href');
window.location = href;
}
}
}
Using jQuery will be like that, add the url to the value field of the radio.
<form method="post">
<input type="RADIO" name="button" value="index1.html" checked>this button goes to index1.html (Default)<BR>
<input type="RADIO" name="button" value="index2.html">this button goes to index2.html<BR>
<input type="RADIO" name="button" value="index3.html">this button goes to index3.html<BR>
<input type="submit" value="Continue">
</form>
jQuery code:
$(function(){
$("form").submit(function(e) {
e.preventDefault();
window.location = $(this).find('input[type="radio"]:checked').val();
});
});
Live example:
http://jsfiddle.net/nnEny/
This might be too obvious but
<form>
<input type="RADIO" name="button" value="^button1^" checked>this button goes to index1.html (Default)<BR></BR>
</form>
<form>
<input type="RADIO" name="button" value="^button2^">this button goes to index2.html<BR> </BR>
</form>
<form>
<input type="RADIO" name="button" value="^button3^">this button goes to index3.html<BR> </BR>
<input type="submit" value="Continue">
</form>
Is there a way to get a javascript calculator to calculate an answer as a user types instead of having to press a "calculate" button like in this example?
<form name="form" id="form">
<input type="Text" name="weight" size="4"> Weight (in Kilos)
<input type="Text" name="height" size="4"> Height (in Centimeters)<br>
<input type="Text" name="BodyMassIndex" id="BodyMassIndex" size="4"> BMI
<input type="button" style="font-size: 8pt" value="Calculate" onClick="calculateBMI()" name="button">
</form>
Using onblur is an improvement but you still have to click out of the text box to blur the input to get the answer. Like I say, I'd prefer the answer to update in real time. Any suggestions? Thanks!
If the user is typing, you can use the keyup event. So basically, everytime the user types a key, your event handler fires and can update the view/display.
Use onkeyup.
e.g.
<form name="form" id="form">
<input type="Text" name="weight" size="4" onkeyup="calculateBMI()"> Weight (in Kilos)
<input type="Text" name="height" size="4" onkeyup="calculateBMI()"> Height (in Centimeters)<br>
<input type="Text" name="BodyMassIndex" id="BodyMassIndex" size="4"> BMI
<input type="button" style="font-size: 8pt" value="Calculate" onClick="calculateBMI()" name="button">
</form>
jsFiddle example.
EDIT: Changed to onkeyup after finding onkeypress didn't work for me in Chrome.
HTML
<form name="form" id="form">
<input class="bmi_input" type="Text" name="weight" size="4"/> Weight (in Kilos)
<input class="bmi_input" type="Text" name="height" size="4"/> Height (in Centimeters)
<input class="bmi_input" type="Text" name="BodyMassIndex" id="BodyMassIndex" size="4"/> BMI
</form>
Javascript
function calculateBMI() {
console.log("I'm here");
}
var els = document.getElementsByClassName("bmi_input");
var sz = els.length;
for(var n = 0; n < sz; ++n) {
els[n].onkeyup = calculateBMI;
}
http://jsfiddle.net/dbrecht/94hxS/
You could handle the onChange event in each of the input text boxes, calling your calculate function:
<form name="form" id="form">
<input type="Text" name="weight" size="4" onChange="calculateBMI()"> Weight (in Kilos)
<input type="Text" name="height" size="4" onChange="calculateBMI()"> Height (in Centimeters)<br>
<input type="Text" name="BodyMassIndex" id="BodyMassIndex" size="4"> BMI
</form>
Here is a simple example of two user text inputs, which "instantly" calculate the answer based on the called JavaScript function (The functions are also included). In addition, this code provides the option to also use a button (it is currently commented out). Hope this helps!
HTML:
<body>
<div id="form-main">
<div id="form-div">
<form class="form" id="form1" method="post">
<p class="celcius"><h2 style="color:#FFF">Input:</h2>
<input name="celsius" type="text" class="feedback-input" placeholder="Temperature (Celsius)" onkeyup="Conversion()" id="celsius" />
</p>
<hr>
<h2 style="color:#FFF">Result:</h2>
<p class="fahrenheit">
<input name="fahrenheit" type="text" class="feedback-input" id="fahrenheit" onkeyup="Conversion2()" placeholder="Temperature (Fahrenheit)" />
</p>
<!--
<div class="submit">
<input type="button" value="CONVERT" id="button-blue" onClick="Conversion()"/>
<div class="ease"></div>
</div>
-->
</form>
</div>
</body>
JavaScript:
function Conversion() {
var tempCels = parseFloat(document.getElementById('celsius').value);
tempFarh =(tempCels)*(1.8)+(32);
document.getElementById('fahrenheit').value= tempFarh;
}
function Conversion2() {
var tempFarh = parseFloat(document.getElementById('fahrenheit').value);
tempCels =(tempFarh - 32)/(1.8);
document.getElementById('celsius').value= tempCels;
}