This question already has answers here:
Stop form refreshing page on submit
(20 answers)
Closed 6 years ago.
I am trying to add two numbers.Taking input from the user but I am not able to find that where I am going wrong. Every time I click on submit it just refreshes the page.
<!--Html -->
<html>
<body>
<div class="container-fluid">
<header>
<h1>Business Registration Address Setup</h1>
</header>
<form>
<label>number 1</label>
<input type="text" name="number1" id="number1" placeholder="enter single digit number"> <br>
+<br>
<label>number 2</label>
<input type="text" name="number2" id="number2" placeholder="enter single digit number"><br>
<button type="submit" class="btn btn-info" onclick="submit1()">submit</button><br><br>
<div class="screen" id="screen1"></div>
</form>
</div> <!-- End Container-->
<footer>
</footer>
<script type="text/javascript">
function submit1(){
var a = document.getElementByID("number1").value;
var b = document.getElementByID("number2").value;
var c = a + b;
document.getElementByID("screen1").innerHTML=c;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<div class="container-fluid">
<header>
<h1>Business Registration Address Setup</h1>
</header>
<label>number 1</label>
<input type="text" name="number1" id="number1" placeholder="enter single digit number"> <br>
+<br>
<label>number 2</label>
<input type="text" name="number2" id="number2" placeholder="enter single digit number"><br>
<button type="button" class="btn btn-info" onclick="submit1()">submit</button><br><br>
<div class="screen" id="screen1"></div>
</div> <!-- End Container-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$( document ).ready(function() {
});
function submit1(){
var a = document.getElementById("number1").value;
var b = document.getElementById("number2").value;
var c = parseInt(a) + parseInt(b);
document.getElementById("screen1").innerHTML=c;
}
</script>
</body>
</html>
Edit
document.getElementByID -------> document.getElementById
var c=a+b ----------------------> var c = parseInt(a) + parseInt(b)
button type="submit" -----------> button type="button"
You are using type="submit" that's why page is refreshed.
You need to use type="button" to call your javascript function when button is clicked.
<button type="button" class="btn btn-info" onclick="submit1()">submit</button><br><br>
Also you are using document.getElementByID which is not a function it is document.getElementById.
And you also need to parse the values to int to be added otherwise values will be just concatenated and not added.
var c = parseInt(a) + parseInt(b);
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
What is the difference between 'remove' and 'removeChild' method in JavaScript?
(2 answers)
Closed 10 days ago.
The following code shows a group of input fields, and it adds a group of fields when "Add new group" is clicked. However, the "Remove group" button wouldn't remove the group that the button clicked belongs to.
var _counter = 0;
function Add() {
_counter++;
var oClone = document.getElementById("template").cloneNode(true);
oClone.id += (_counter + "");
document.getElementById("placeholder").appendChild(oClone);
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<form action="" method="post" autocomplete="off">
<fieldset id="fieldset">
<legend id="legend">Professional development</legend>
<div id="placeholder">
<div id="template">
<fieldset>
<legend>Group</legend>
<p>Item <input type="text" name="prof_item[]" /><br /></p>
<p>Duration <input type="text" name="prof_duration[]" /><br /></p>
<!-- =========================== -->
<!-- the following has no effect -->
<!-- =========================== -->
<p><button type="button" name="prof_remove[]" onclick="document.body.removeChild(this.parentNode.parentNode)">Remove group</button><br /></p>
</fieldset>
</div>
<!-- template -->
</div>
<!-- placeholder -->
<p><button type="button" name="add" onclick="Add();">Add new group</button></p>
</fieldset>
<p><button type="submit" name="Submit">Submit</button></p>
</form>
let me start by saying that I'm a freshman. I would like to create a form with a button that, when pressed, will generate a page written in an inputa. How to do it? example:
<form action="" method="post">
<!-- a hidden input -->
<input type="hidden" name="a_hidden_input"/>
<!-- a text input -->
<input type="text" name="a_text_input"/>
<!-- submit button -->
<input type="submit" value="Submit"/>
</form>
This is the basic example for getting your data and displaying in the page .
<head>
<script>
function generate() {
debugger
var strText = document.getElementById("txtName").value;
var strText1 = document.getElementById("txtEmail").value;
document.getElementById("p1").innerHTML = strText;
document.getElementById("p2").innerHTML = strText1;
window.location.href = "http://mywebsite.com/home.html";
}
</script>
</head>
<body>
<form>
<input type="text" name="Name" id="txtName" placeholder="Name">
<input type="text" name="Email" id="txtEmail" placeholder="Email">
<input type="button" value="Submit" id="btnSubmit" onclick="generate()">
</form>
<div>
<h1>New Page</h1>
<p id="p1"></p>
<p id="p2"></p>
</div>
</body>
If u use any library like react js or framework like angular with backend technologies like php,nodejs, with databases as sql , mongodb or firebase it will be super easy for u .
I have a JavaScript function that reads from a form where integers are input. For some reason the function isn't executing. I know this since I have a console.log("hello") call outside the function that prints but a console.log() call inside the function isn't printing. I'm not sure what I'm doing wrong. I read input from the table using getElementByID and then use parseInt to make them integers.
HTML
<body>
<div class="container">
<div class="well">
<h1 class="text-center">Multiplication Table</h1>
<p class="text-center">Enter the lowest and highest values to be displayed in
the multiplication table and the table will generate</p>
</div>
<form class="form-inline">
<label for="row_min" class="mr-sm-2">Row Min</label>
<input type="number" class="form-control mb-2 mr-sm-2" placeholder="row min" id="row_min">
<label for="row_max" class="mr-sm-2">Row Max</label>
<input type="number" class="form-control mb-2 mr-sm-2" placeholder="row max" id="row_max">
<label for="col_min" class="mr-sm-2">Col Min</label>
<input type="number" class="form-control mb-2 mr-sm-2" placeholder="col min" id="col_min">
<label for="col_max" class="mr-sm-2">Col Max</label>
<input type="number" class="form-control mb-2 mr-sm-2" placeholder="col max" id="col_max">
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<br>
<!-- Temoprary placeholder for the table before user input comes in -->
<div class="container">
<div class="well" id="table-placeholder">
<h3 class="text-center">Multiplication Table Will Appear Here</h3>
</div>
</div>
<!-- include the JavaScript at the bottom of the body to laod faster -->
<script type="text/JavaScript" src="js/javascript.js"></script>
</body>
Javascript
var row_min, row_max, column_min, column_max;
console.log("hello");
function getUserInput() {
row_min = parseInt(document.getElementById("row_min").value);
row_max = parseInt(document.getElementById("row_max").value);
col_min = parseInt(document.getElementById("col_min").value);
col_max = parseInt(document.getElementById("col_max").value);
input = document.getElementById("row_max").value;
row_max = parseInt(userInput);
input = document.getElementById("col_min").value;
column_min = parseInt(userInput);
input = document.getElementById("col_max").value;
column_max = parseInt(userInput);
console.log(row_min, row_max, column_min, column_max);
}
I want to add multiple textarea using Javascript as a user input number of description in no_of_description input HTML tags.
Here is my code:
<div class="container">
<label for="no_of_description">No of Description</label>
<input type="number" id="no_of_description" name="no_of_description" value="1">
<hr/>
<form class="form" action="" method="POST">
<!-- if no_of_description is 1 (default)-->
<div class="form-group">
<label for="description_1">Description 1</label>
<textarea class="form-control" id="description_1" rows="3" cols="8"></textarea>
</div>
<!-- if no_of_description is 2, another description be added using javascript-->
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
Follo Below way to create html form field dynamically.
<html>
<head>
<script type='text/javascript'>
function addFields(){
var number = document.getElementById("member").value;
var container = document.getElementById("container");
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i=0;i<number;i++){
container.appendChild(document.createTextNode("TextBox " + (i+1)));
var input = document.createElement("input");
input.type = "text";
input.name = "member" + i;
container.appendChild(input);
container.appendChild(document.createElement("br"));
}
}
</script>
</head>
<body>
<input type="text" id="member" name="member" value="">Number of TextBox:<br />
Add
<div id="container"/>
</body>
</html>
Hi all i have this 3 forms:
<label for="color1" style="color: yellow;">1° colore:</label>
<input type="text" class="form-control" id="color1" placeholder="Insert color">
<label for="color2" style="color: yellow;">2° colore:</label>
<input type="text" class="form-control" id="color2" placeholder="Insert color">
<label for="result" style="color: red;">Risultato:</label>
<input type="text" class="form-control" id="result" >
and a button
<button type="button" onclick="merge()">merge</button>
Now i want that the function merge() takes the text inserted in the first 2 forms and put the append of the 2 string in the 3rd form.
i tried something like:
<script>
function merge(){
var r1= $('#idform1').val();
var r2= $('#idform2').val();
$('#idform3').val('r1+r2');}
</script>
idform1 , idform2 and idform3 are not the correct id's but it's just to be more clear.
Of course it's not working , can anyone help me out ? thanks
replace your code with this
<!DOCTYPE html>
<html>
<script src="put your path to jquery.js"></script>
<body>
<label for="color1" style="color: yellow;">1° colore:</label>
<input type="text" class="form-control" id="color1" placeholder="Insert color">
<label for="color2" style="color: yellow;">2° colore:</label>
<input type="text" class="form-control" id="color2" placeholder="Insert color">
<label for="result" style="color: red;">Risultato:</label>
<input type="text" class="form-control" id="result" >
<button type="button" onclick="merge()">merge</button>
<script>
function merge(){
var r1= $('#color1').val();
var r2= $('#color2').val();
$('#result').val(r1+r2);}
</script>
</body>
</html>
You got every thing Just change this
<script>
function merge(){
var r1= $('#idform1').val();
var r2= $('#idform2').val();
$('#idform3').val('r1+r2');}// this line
</script>
to
<script>
function merge(){
var r1= $('#idform1').val();
var r2= $('#idform2').val();
$('#result').val(r1+r2);}// to this
</script>
and if you have for more specification you can use String(yourValue) function like this $('#result').val(String(r1)+String(r2)) but here we don't really need this.
first you know you use wrong input tag id change correct ids then change val("r1+r2") to val(r1+r2). if you use variable there not string " " quote String Quote only for when normal text you set.
and finally you use jQuery under JavaScript so add in Head tag jQuery library
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
here your full code :
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function merge(){
var r1= $('#color1').val();
var r2= $('#color2').val();
$('#result').val(r1+r2);}
</script>
</body>
<label for="color1" style="color: yellow;">1° colore:</label>
<input type="text" class="form-control" id="color1" placeholder="Insert color">
<br>
<label for="color2" style="color: yellow;">2° colore:</label>
<input type="text" class="form-control" id="color2" placeholder="Insert color">
<br>
<label for="result" style="color: red;" >Risultato:</label>
<input type="text" class="form-control" id="result" >
<br>
<button type="button" onclick="merge()">merge</button>
</body>
</html>