I'm working on project. I want to pass value of textbox1 to form 1 and form 3, but it passes value only to that form which comes first(here form1).
< script type = "text/javascript" >
submitForms = function() {
var answer = document.getElementById("textbox1").value;
var q = document.getElementById('q');
q.value = answer;
var q1 = document.getElementById('q1');
q1.value=answer;
document.forms["form1"].submit();
document.forms["form3"].submit();
}
< /script>
<body background="a.jpg">
<p>
</br>
<input type="text" name="textbox1" id="textbox1" style="width:600px;height:30px;border:3px solid white" placeholder="Search..." required/>
<input type="submit" name="button1" id="button1" value="go" style="width:50px;height:30px;color:black;background-color:white" onclick="submitForms()" />
</br>
</br>
<iframe width="100%" height="500px" name="myIframe" frameborder='0'></iframe>
<iframe width="100%" height="1700px" name="myIframe1" frameBorder="0"></iframe>
<form method="get" action="http://bing.com//search" target="myIframe1" name="form1">
<input type="text" name="q" id="q" size="25" maxlength="255" value="" style="display: none" />
</form>
<form method="get" action="http://duckduckgo.com/" target="myIframe" name="form3">
<input type="text" name="q1" id="q1" size="25" maxlength="255" value="" style="display: none" />
</form>
</p>
</body>
try this :
var q1 = document.getElementById('q1');
q1.value=answer;
you forgot to fill the 2 forms.
Forgot another id q1
`
<script type = "text/javascript">
submitForms = function() {
var answer = document.getElementById("textbox1").value;
var q = document.getElementById('q');
var qq = document.getElementById('q1');
q.value = answer;
qq.value = answer;
document.forms["form1"].submit();
document.forms["form3"].submit();
}
</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 would like for every different item inputted to be outputted in a new box.
<!DOCTYPE html>
<html>
<body>
Form to get the input
<form id="form1">
<input name="item" type="text" size="20">
</form>
Box that should be duplicated to hold the new input.
<div class="box">
<p class="output"></p>
<div>
<button onclick="outputItem()">Add</button>
javascript:
<script>
function outputItem() {
var x = document.getElementById("form1");
item = x.elements.namedItem("item").value;
document.getElementById("output").innerHTML=item;
</script>
</body>
</html>
I am not sure if this is even close to what you want, but give this a try:
function outputItem() {
var els = document.querySelectorAll("#form1 input");
var box = document.querySelector('.box');
box.innerHTML = '';
els.forEach(
function(el) {
var newEl = document.createElement('div');
newEl.innerHTML = el.value;
box.appendChild(newEl);
}
);
}
<form id="form1">
<input name="item" type="text" size="20" value="item"><br/>
<input name="eggs" type="text" size="20" value="eggs"><br/>
<input name="milk" type="text" size="20" value="milk"><br/>
<input name="grains" type="text" size="20" value="grains"><br/>
<input name="legumes" type="text" size="20" value="legumes"><br/>
</form>
<button onclick="outputItem()">Add</button>
<hr/>
<div class="box"></div>
This creates a new <div> for every input and copies the .value from the <input> into the new <div>. Then it adds the <div> into the output area.
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>
This is the script:
<HTML>
<HEAD>
<SCRIPT type="javascript">
function goToPage(var url = '')
{
var initial = "http://www.blossompromotions.com/-p-";
var extension = "html";
window.location(initial+url+extension);
}
</SCRIPT>
<TITLE>Redirect 1</TITLE>
<BASE HREF="http://www.blossompromotions.com/">
</HEAD>
<BODY>
<P></P>
<FORM name="something" action="#">Label
<INPUT type="text" name="url" value="" onSubmit="goToPage(this.value)" />
<INPUT type="submit" value="GO" />
</FORM>
</BODY>
</HTML>
This redirects to the url but I want the user to be able to see and copy the url. Please tell a command instead of goToPage which will display the url on screen for the user to copy.
function goToPage(url){
var initial = "http://www.blossompromotions.com/-p-";
var extension = ".html";
var link = document.getElementById('gotoURL');
link.innerHTML = url ? initial+url+extension : '' ;
link.href = initial+url+extension;
}
<FORM name="something" action="#">
Label
<INPUT type="text" name="url" value="" onkeyup="goToPage(this.value)">
<INPUT type="submit" value="GO">
</FORM>
You can do it with JavaScript, and add an ID to your input text
function goToPage(var url = '')
{
var initial = "http://www.blossompromotions.com/-p-";
var extension = "html";
document.getElementById('url').value=initial+url+extension ;
}
<FORM name="something" action="#">
Label
<INPUT id="url" type="text" name="url" value="" onSubmit="goToPage(this.value)">
<INPUT type="submit" value="GO">
</FORM>