//this is a part of html code
<form>
<b>user:</b> <input type="text" name="user" size="25"/>
<input type="button" name ="submit" value="confirm" onclick= "mehdi(this.form)"/>
</form>
<script type="text/javascript">
function mehdi(rno){
rno.user.value = 2 * Math.PI ;//this is error line user is unknown
alert(rno);
return rno;
}
</script>
what can i do?
Try This
<form>
<b>user:</b> <input type="text" name="user" size="25"/>
<input type="button" name ="submit" value="confirm" onclick= "mehdi(this.form)">
</form>
<script type="text/javascript">
function mehdi(rno)
{
rno.user.value = 2 * Math.PI ;//this is error line user is unknown
alert(rno.user.value);
return rno.user.value;
}
</script>
Related
<script>
function myFunction(val) {
const ele = document.querySelectorAll('input');
let sum = 0;
ele.forEach(input => {
sum += input.value ? parseFloat(input.value) : 0;
});
document.getElementById('result').textContent = sum.toFixed(2);
}
</script>
<form action="test.php" method="POST" enctype="multipart/form-data">
<input type="text" id="array[]" class="input" oninput="myFunction(this.value)">
<input type="text" id="array[]" class="input" oninput="myFunction(this.value)">
<p id="result"></p>
<br>
<p><input type="submit" name= "submit" id="submit" value="Submit"/></p>
</form>
Why the result is NaN? But if I remove the value="Submit" in the last 5th line, then everything working fine. Why? and what should I do to solve this problem?
Your
const ele = document.querySelectorAll('input');
will iterate over all inputs, including the <input type="submit" name= "submit" id="submit" value="Submit"/>.
When you don't use value="Submit", that element doesn't have a real .value, so it defaults to the empty string:
console.log(submit.value);
console.log(submit.value.length);
<input type="submit" name="submit" id="submit">
In contrast, <input value="Submit"/> will have a .value of Submit, which can't be turned into a number.
Select only your inputs with input classes instead:
function myFunction() {
const ele = document.querySelectorAll('input.input');
let sum = 0;
ele.forEach(input => {
sum += input.value ? parseFloat(input.value) : 0;
});
document.getElementById('result').textContent = sum.toFixed(2);
}
<form action="test.php" method="POST" enctype="multipart/form-data">
<input type="text" id="array[]" class="input" oninput="myFunction(this.value)">
<input type="text" id="array[]" class="input" oninput="myFunction(this.value)">
<p id="result"></p>
<br>
<p><input type="submit" name="submit" id="submit" value="Submit" /></p>
Also note that duplicate IDs are invalid HTML, and event handlers should be attached properly using Javascript instead of using inline handlers:
const inputs = document.querySelectorAll('input.input');
inputs.forEach((input) => {
input.addEventListener('keydown', () => {
const sum = [...inputs].reduce((a, input) => a + Number(input.value), 0);
document.getElementById('result').textContent = sum.toFixed(2);
});
});
<form action="test.php" method="POST" enctype="multipart/form-data">
<input type="text" class="input">
<input type="text" class="input">
<p id="result"></p>
<br>
<p><input type="submit" value="Submit"></p>
</form>
Because you are selecting all the input tag, you should be specific on selecting like querySelectorAll('input[type="text"]'). so it will select only text input tags. Try this one
<!DOCTYPE html>
<html>
<body>
<script>
function myFunction(val) {
const ele = document.querySelectorAll('input[type="text"]');
let sum = 0;
ele.forEach(input => {
sum += input.value ? parseFloat(input.value) : 0;
});
document.getElementById('result').textContent = sum.toFixed(2);
}
</script>
<form action="test.php" method="POST" enctype="multipart/form-data">
<input type="text" id="array[]" class="input" oninput="myFunction(this.value)">
<input type="text" id="array[]" class="input" oninput="myFunction(this.value)">
<p id="result"></p>
<br>
<p><input type="submit" name= "submit" id="submit" value="Submit"/></p>
</form>
</body>
</html>
Because document.querySelectorAll('input'); selecting all inputs including submit button as well which has value='submit' and value submit is not a number (NAN). When you remove value attribute from the submit button it returns nothing.
I would like to add some text before the onchange="input()" function.
anyone knows the trick? cheers
<head>
<script type="text/javascript">
function input(){
var input_taker = document.getElementById('email').value;
document.getElementById('display').innerHTML = input_taker;
}
</script>
</head>
<form method="post" action="#">
<input type="text" name="email" placeholder="email#example.com" id="email" onchange="input()">
<input type="submit" name="save" value="save">
I have a error from link , when i click to submit a word
<form id="searchf" target="_blank" method="get" action="http://www.example.com/aa/bb/#/">
<input type="text" placeholder="free" name="url">
<input type="submit" value="send" />
</form>
The Result :
http://www.example.com/aa/bb/?url=free#/
I want like this :
http://www.example.com/aa/bb/#/free/
You can use window.location.replace to redirect. Like:
$('#searchf').submit(function(e){
e.preventDefault();
window.location.replace( $(this).attr('action') + $('[name="url"]').val() );
});
Here is a fiddle:
$(function() {
$('#searchf').submit(function(e){
e.preventDefault();
window.location.replace( $(this).attr('action') + $('[name="url"]').val() );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="searchf" target="_blank" method="get" action="http://www.example.com/aa/bb/#/">
<input type="text" placeholder="free" name="url">
<input type="submit" value="send" />
</form>
I have a input field that is readonly that shows the user the money they have left over after spending. They first have to enter their income and in the spending field, it will show the value from the database. My problem is after calculating the money left over in javascript, the value does not show in the leftOver field. I am not sure what I am doing wrong. Here is my code:
<script type="text/javascript">
$(document).ready(function(){
$("#addRecord").hide();
$("#btnAdd").click(function(){
$("#addRecord").show();
});
});
</script>
<script type="text/javascript">
function getTotalIncome(){
var income = parseFloat(document.getElementById("income").value);
var otherIncome = parseFloat(document.getElementById("otherIncome").value);
var totalIncome = income + otherIncome;
document.getElementById("totalIncome").value = '$' + totalIncome;
}
</script>
<script type="text/javascript">
function getLeftOver(){
var totalIncome = parseFloat(document.getElementById("totalIncome").value);
var totalSpending = parseFloat(document.getElementById("totalSpending").value);
var leftOver = totalIncome - totalSpending;
document.getElementById("leftOver").value = '$' + leftOver;
}
</script>
</head>
<body>
<button id="btnAdd" type="button" name="btnAdd">Create A Budget</button>
<form id="addRecord" name="addRecord" action="Budget" method="post">
<h3>Income</h3>
<label>Income:</label>
<input type="text" name="income" id="income" onchange="getTotalIncome()"> <br>
<label>Other Income:</label>
<input type="text" name="otherIncome" id="otherIncome" onchange="getTotalIncome()"><br>
<hr>
<h3>Spending</h3>
<label>Total Amount Of Spending</label>
<input type="text" name="totalSpending" value="$${totalSpending}" disabled=disabled>
<hr>
<h4>You've budgeted</h4>
<label>Income</label>
<input type="text" name="totalIncome" id="totalIncome" readonly="readonly" onchange="getLeftOver()">
<label>Spending</label>
<input type="text" name="totalSpending" id="totalSpending" value="$${totalSpending}" readonly="readonly" onchange="getLeftOver()">
<label>Left Over</label>
<input type="text" name="leftOver" id="leftOver" readonly="readonly">
</form>
</body>
Basically I have this.. but I want the BUTTON to generate the random number.. which currently only happens when I run the html file, which I don't want that to happen. Thanks!
<body>
<form name="rn">
<input type="text" id="tb" name="tb" /></br>
<input type="button" value="Random Number!" onclick="doFunction(Random);" />
</form>
<script type="text/javascript">
function Random() {
return Math.floor(Math.random() * 1000000000);
}
document.getElementById('tb').value = Random()
</script>
Try changing your HTML to this
<form name="rn">
<input type="text" id="tb" name="tb" />
<input type="button" value="Random Number!" onclick="Random();" />
</form>
and your javascript to this
function Random() {
var rnd = Math.floor(Math.random() * 1000000000);
document.getElementById('tb').value = rnd;
}
Working fiddle
Put the code that sets .value in a function, and call that from the onclick
function Random() {
return Math.floor(Math.random() * 1000000000);
}
function randomValue() {
document.getElementById('tb').value = Random();
}
<form name="rn">
<input type="text" id="tb" name="tb" />
</br>
<input type="button" value="Random Number!" onclick="randomValue();" />
</form>
It is firing this on page load:
document.getElementById('tb').value = Random()
To prevent that from happening, wrap it the onclick function thike this:
function doFunction(){
document.getElementById('tb').value = Random()
}
See fiddle: https://jsfiddle.net/t33rdra6/1/