I know this is continuously asked anew, and I've checked out different answers and tried different solutions but to no avail.
I just have to build a form that takes as input the cylinder ray and it height and then find the volume when we click a button.After finding it, shuold be cleared all fields with another button .The function to calculate volume it is working fine, but not the function that clear inputs.
Here is the code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<script type="text/javascript">
function llogarit() {
var rreze = parseInt(document.getElementById("val1").value);
var lartesi = parseInt(document.getElementById("val2").value);
var rez = document.getElementById("llogarit");
rez.value = (Math.PI * Math.pow(rreze, 2) * lartesi);
}
function fshij() {
document.getElementById("val1").value.clear();
document.getElementById("val2").value.clear();
document.getElementById("llogarit").value.clear();
}
</script>
</head>
<body>
<form>
<p>Vendos 2 vlera</p>
<p>rreze
<input type="text" name="rreze" id="val1" value="2" /></p>
<p> lartesi
<input type="text" name="lartesi" id="val2" value="2" /></p>
<p> Vellimi
<input type="text" name="vellimi" id="llogarit" value="" /></p>
<input type="button" onclick="llogarit()" value="llogarit" />
<input type="reset" value="fshij" onclick="fshij()" />
</body>
</html>
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset
You can reset all form controls in one form with reset method.
// <form name="FORM_NAME">
document.forms["FORM_NAME"].reset();
Try the following:
document.getElementById('myInput').value = ''
Try the follow and add a div tag to the code
<div class="yourClass">
<button onclick="cdClear();" class="yourClass">Clear</button>
</div>
Note: In HTM, you can replace the class with id if you have already coded.
<script type="text/javascript">
function cdClear(){var a=document.getElementById("codes");a.value="",a.focus(),</script>
Related
If i had a button and an input field. How would i alert whatever is in the input field to the user, when the button is clicked.
Explain your code please.
Make it as simple as possible.
<input type="text" id="input" />
<button onclick="displayEnteredText()">Display</button>
<script>
function displayEnteredText() {
var inputText = document.getElementById("input"); // get the element with id "input" which is the textField
alert(inputText.value); // show the value of the input in alert message
}
</script>
One possible approach:
<!DOCTYPE html>
<html>
<head></head>
<body>
<input id="name" value="">
<input type="button" value="show me the name" onclick="alert(document.getElementById('name').value)">
</body>
</html>
Another possible approach:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var buttonElement = document.getElementById('button');
buttonElement.addEventListener('click', function() {
alert(document.getElementById('name').value);
});
}
</script>
</head>
<body>
<input id="name" value="">
<input id="button" type="button" value="show me the name">
</body>
</html>
With the second approach you can separate responsabilities, one person can create de html, and another person can focus in create javascript code.
Exists several ways to do this, but with two examples i think is enough in the current context
<body>
<input type="text" name="basicText" id="alertInput">
<button class="alertButton">Click me!</button>
</body>
<script type="text/javascript">
$(".alertButton").click(function(){
var value = $("#alertInput").val();
alert(value + " was entered");
});
</script>
In order to show what you typed in your alert, you need to reference the value inside the textbox. Since jquery is tagged in the post, I used it to get what's in the text box.
You can also try this one
HTML
<input type="button" id="btnclick" style="width:100px" value="Click Me" />
<input type="text" id="txtbox">
JS
$("#btnclick").click(function(){
var txtvalue = $("#txtbox").val();
alert("User enter " + txtvalue);
})
FIDDLE
Hi I'm new in javascript so I'm sorry if I my question is silly
I am suppodsed to make a dive where there would be two input fields and a button. When you press the button the text that is written in first field must move to the second one. This is what I have done:
<script>
function myfunction(){
var fp= document.forms["fora"];
fp.elements[1].innerHTML=fp.element[0].value;
fp.elements[0].value="";
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>Project 2 </title>
</head>
<body>
<div>
<form id=fora>
First phrase:<br>
<input type="text" name="first phrase" >
<br>
Second phase:<br>
<input type="text" name="second phrase">
</form>
<button type="button" onclick="myfunction()">push me
</button>
<buttom>
</button>
</div>
<p id="intro"></p>
</body>
</html>
Has anyone any idea what i am doing wrong??
You need to change innerHTML to value. And there is a typo fp.element (missing s , should be fp.elements)
var fp= document.forms["fora"];
fp.elements[1].value=fp.elements[0].value;
fp.elements[0].value="";
Change your javascript to read and set the values of the inputs based on the names:
function myfunction(){
document.getElementsByName("second phrase")[0].value = document.getElementsByName("first phrase")[0].value;
document.getElementsByName("first phrase")[0].value = "";
}
Change
fp.elements[1].innerHTML=fp.element[0].value;
to
fp.elements[1].value = fp.elements[0].value;
function myfunction(){
var fp= document.forms["fora"];
fp.elements[1].value = fp.elements[0].value;
fp.elements[0].value = "";
}
<form name="fora">
First phrase:<br>
<input type="text" name="firstPhrase" ><br>
Second phase:<br>
<input type="text" name="secondPhrase">
</form>
<button type="button" onclick="myfunction()">push me</button>
<html>
<body>
<form class="totalpayment">
<input class="paid" type="text" name="numberOne" />
<input class="due" type="text" name="numberTwo" />
<button>Add</button>
</form>
<p class="total"></p>
<script src="jquery.min.js"></script>
<script>
// Sum the value when submitting the form
$(".totalpayment").submit(function(e){
e.preventDefault();
var paid = parseInt($('.paid').val());
var due = parseInt($('.due').val());
$(".total").html(paid + due);
});
</script>
</body>
</html>
I have a form that adds two numbers together. My issue is, it only has one button, the add button. Let's say I wanted to add the handler for a cancel button which will clear the two boxes, how would I implement this?
Just add one more button to reset the form. Read more about Reset button
There is no need to add any handler for resetting the form.
<button type="reset" value="Cancel">Cancel</button>
Sample code:
<html>
<body>
<form class="totalpayment">
<input class="paid" type="text" name="numberOne" />
<input class="due" type="text" name="numberTwo" />
<button>Add</button>
<button type="reset" value="Cancel">Cancel</button>
</form>
<p class="total"></p>
<script src="jquery.min.js"></script>
<script>
// Sum the value when submitting the form
$(".totalpayment").submit(function(e){
e.preventDefault();
var paid = parseInt($('.paid').val());
var due = parseInt($('.due').val());
$(".total").html(paid + due);
});
</script>
</body>
</html>
I am trying to create a very simple HTML site for my co-workers to use for calculating cellular phone pricing based on a formula. I have a form with user inputs to declare the full price of the phone, amount of down payment, etc. Basically everything seems to be working, however the returned answer from my formula in my JavaScript function only displays on the screen for a fraction of a second and the JavaScript seems to reload. Have I unintentionally caused a loop?
I am very new to JavaScript please let me know if I am leaving out any pertinent information to helping to solve this issue. I will include my code below.
<body>
<div id="container">
<form id ="formula">
<fieldset>
<legend> Finance Formula</legend>
<div id="label">
<label for="fullPrice">Full Price:</label>
<br />
<br />
<label for="downPay">Down Payment:</label>
<br />
<br />
<label for="discount">Discount:</label>
</div>
<div id="input">
<input type="text" id="fullPrice" name="fullPrice" />
<br />
<br />
<input type="text" id="downPay" name="downPay" />
<br />
<br />
<input type="text" id="discount" name="discount" />
</div>
</fieldset>
<input type="submit" id="submit" name="submit" onclick="financed();"/>
</form>
</div>
<div class="resultsBox">
<p id="result"></p>
</div>
<script type="text/javascript" language="javascript" charset="utf-8">
function financed(){
var fullPrice = document.getElementById('fullPrice').value;
var downPay = document.getElementById('downPay').value;
var discount = document.getElementById('discount').value;
console.log("The Total Amount Paid for Phone is:" +(((parseInt(fullPrice) - parseInt(downPay)) / 24) - parseInt(discount)) * 24);
};
</script>
</body>
</html>
I have also tried this script instead which is what I found when researching online.
<script type="text/javascript" language="javascript" charset="utf-8">
function financed(){
var fullPrice = document.getElementById('fullPrice').value;
var downPay = document.getElementById('downPay').value;
var discount = document.getElementById('discount').value;
document.getElementById('result').innerHTML = (((parseInt(fullPrice) - parseInt(downPay)) / 24) - parseInt(discount)) * 24;
};
</script>
Basically the end result I am looking for is the answer for the equation within the function to "print" onto the browser and stay there.
HTML elements have default behaviors when they're used-- forms, for instance, will refresh the page on submit. Fortunately, there is a preventDefault method that will stop this behavior. You can read more about it here and here.
You just need to add an event listener to your submit tag, like this:
document.getElementById("submit").addEventListener("submit", function(event){
event.preventDefault();
}
Normally form submit will navigate to the action attribute url, if there is no action attribute, navigate to same page. if you want to avoid this default behaviour you have to modify the tag or submit button like mentioned below.
<form id ="formula" action="javascript:void(0)">
or
<input type="button" id="submit" name="submit" value="clickme" onclick="financed();"/>
It is because your submit input reloads the page by default. Try removing the onClick from submit and calling this instead:
document.getElementById("submit").addEventListener("click", function(event){
event.preventDefault(); // preventing the default submit action
financed();
});
Trying to change text color and background color of the text according to what I write in the textbox. Seems to work briefly; it shows me the color for a split second, like a quick snap and that's it.
<!DOCTYPE html>
<html>
<head>
<title>Prelab5 Ex1</title>
<style>
</style>
</head>
<body>
<h2>Prelab5 Ex1</h2>
<form method="post">
<input type="text" name="background" id="background"/><input type="submit" value="Background" onclick="changeBack();"/>
<br/>
<input type="text" name="text" id="text"/><input type="submit" onclick="changeText();" value="Text"/>
<br/>
<div id="content">Some text</div>
</form>
<script>
var DivText = document.getElementById("content");
function changeBack(){
var backColor = (document.getElementById("background").value);
DivText.style.backgroundColor= backColor;
}
function changeText(){
var textColor = (document.getElementById("text").value);
DivText.style.color = textColor;
}
</script>
</body>
</html>
Your onclick handlers for your submit buttons don't return false so your form is submitted resetting the page. You could add return false like
var DivText = document.getElementById("content");
function changeBack() {
var backColor = (document.getElementById("background").value);
DivText.style.backgroundColor = backColor;
}
function changeText() {
var textColor = (document.getElementById("text").value);
DivText.style.color = textColor;
}
<!DOCTYPE html>
<html>
<head>
<title>Prelab5 Ex1</title>
</head>
<body>
<h2>Prelab5 Ex1</h2>
<form method="post">
<input type="text" name="background" id="background" />
<input type="submit" value="Background" onclick="changeBack(); return false" />
<br/>
<input type="text" name="text" id="text" />
<input type="submit" onclick="changeText(); return false" value="Text" />
<br/>
<div id="content">Some text</div>
</form>
</body>
</html>
Your "submit" input performs the action on the form, which is currently set to "post". This will post the form to the same page (and cause a refresh).
You can override the default functionality by adding return false; to the ONCLICK attribute on all input type= "submit" elements.
In other words, this:
needs to become this:
<input type="submit" onclick="changeText();" value="Text"/>
but why use input type = submit at all?
You can just as easily use a link or button without the form:
<a href="#" onclick="changeText();"/>Test</a>
or
Click me!
which will do the same thing without needing to override the a forum action :)