HTML JS error logging input - javascript

<p>Enter some text</p>
<form>
<input type="text" id="userInput">
<button onclick="log();">Go!</button>
</form>
<script>
function log() {
var input = document.getElementById("userInput").value;
console.log(input);
}
</script>
When I click the button, it refreshes the page, clearing the log. I originally tried using <input type="submit"> but when I click any type of button, it refreshes. How would I stop this?

try with:
<p>Enter some text</p>
<form action="" method="">
<input name="userInput" type="text" id="userInput" />
<button type="button" onclick="log()">Go!</button>
</form>
<script>
function log() {
var input = document.getElementById("userInput").value;
console.log(input);
return false;
}
</script>
only add return false to you js.
Learn about stopPropagation.

<p>Enter some text</p>
<form>
<input type="text" id="userInput">
<button type="button" onclick="log();">Go!</button>
</form>
<script>
function log() {
var input = document.getElementById("userInput").value;
console.log(input);
}
</script>
So just add type="button"

Difficult to say with your example, but generally if you are trying to prevent an action that would do something like a page refresh from carrying out that default behavior, you would use the preventDefault method on the event handler. So your function would become
function log(e) { // passing in the event to the handler as "e"
var input = document.getElementById("userInput").value;
console.log(input);
e.preventDefault();
}
edit:
Updated with Patrick's notes in mind, although I still don't see an attempt to page refresh in the snippet, even with no type attribute, or type of button or submit.
<p>Enter some text</p>
<form action="" method="">
<input name="userInput" type="text" id="userInput" />
<button onclick="log(event)">Go!</button>
</form>
<script>
function log(e) {
var input = document.getElementById("userInput").value;
console.log(input);
e.preventDefault()
}
</script>

Related

fill and submit form using javascript from console

Here is my form:
<form id="myForm">
<input id="htmlString" type="text" name="htmlField" ><br>
<input type="Submit" value="Submit" >
</form>
And need to fill it from console.
just to use it in my app,
Will inject javascript with data to local html file.
I tried to make the form without a submit button like so:
<body>
<form id="myForm">
<input id="htmlString" type="text" name="htmlField" ><br>
</form>
<script>
htmlString.oninput = function(){
///do some stuff
}
</script>
</body>
Expecting that :
document.getElementById('htmlString').value="moo" ;
It automatically submit the form, because here oninput used.
But it just stayed filled with inputs and not proceed further.
Tried with other solution:
form = document.getElementById("myForm")
form.submit()
But it just refreshed the page and not submitted the form.
The need is just one filed without else, and inject my string to it with javascript to run functions embedded in the html.
Try making the input button hidden.
<body>
<form id="myForm">
<input id="htmlString" type="text" name="htmlField" ><br>
<input type="Submit" value="Submit" style="display: none" >
</form>
<button onclick="simulateConsole()">Try it</button>
<script>
htmlString.oninput = function(){
if(this.value === "moo") {
myForm.submit();
}
}
// This event will be triggered even if you use console
htmlString.onsubmit = function(){
if(this.value === "moo") {
// do something onSubmit
}
}
function simulateConsole() {
// you can simulate this in console
htmlString.value = "moo";
myForm.submit();
}
</script>
</body>
I hope it helps.
You need to supply an action to the form, otherwise it will just reload the page.
See more here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form

Without form tag, I am getting the ans for sum of 2 nos using JavaScript

Friends,
Plz check out my code and tell me why am not getting the result if I use form tag.
When I remove the form tag, I get the result. why can't I get the expected result if I use form tag ? Your suggestions can help me understand this better !! thank u ..
CODE :
<html>
<head>
<title>ADDITION OF 2 NOS</title>
<script type="text/javascript">
function add() {
var x=document.getElementById("value1").value;
var y=document.getElementById("value2").value;
var z=x+y;
document.getElementById("result").innerHTML=z;
}
</script>
</head>
<body>
<center>
<form name="form1" id="form1_id">
ENTER NO 1 : <input type="text" name="value1" id="value1"><br>
ENTER NO 2 : <input type="text" name="value2" id="value2"><br>
<input type="submit" value="SUBMIT" onclick="add()">
<p id="result"></p>
</form>
</center>
</body>
</html>
You need numerical values. document.getElementById("value1").value returns a string.
var x = +document.getElementById("value1").value;
// ^ cast to number
To prevent submitting, you need to include
<form onsubmit="return false;">
as well.
function add() {
var x = +document.getElementById("value1").value;
var y = +document.getElementById("value2").value;
var z = x + y;
document.getElementById("result").innerHTML = z;
}
<form name="form1" id="form1_id" onsubmit="return false;">
ENTER NO 1 : <input type="text" name="value1" id="value1"><br>
ENTER NO 2 : <input type="text" name="value2" id="value2"><br>
<input type="submit" value="SUBMIT" onclick="add()">
<p id="result"></p>
</form>
First of all, your submit element is causing the form to submit. It does the add() then submits the form. To prevent that, use onsubmit="return false;" like so:
<script type="text/javascript">
function add()
{
var x=document.getElementById("value1").value;
var y=document.getElementById("value2").value;
var z=x+y;
document.getElementById("result").innerHTML=z;
}
</script>
<body>
<center>
<form name="form1" id="form1_id" onsubmit="return false;">
ENTER NO 1 : <input type="text" name="value1" id="value1"><br>
ENTER NO 2 : <input type="text" name="value2" id="value2"><br>
<input type="submit" value="SUBMIT" onclick="add()">
<p id="result"></p>
</form>
Second of all, you're doing concatenation in your add() function. If you want to really add the numbers, use
var z = parseInt(x) + parseInt(y);
in your add() function. If you expect decimals use parseFloat() instead.
Okay, when that submit button is clicked and it's present in one (or more) form(s) a redirect happens. This redirect happens because the form will be submitted after that click.
So, to stop this redirect you need to prevent the default action of the browser to this form at its submit event, e.g., give it a callback, then return exact false at this function, or call [Event]#preventDefault.
form1 = document.form1
var form1
form1.addEventListener('submit', function (event) {
event.preventDefault()
}, false)
Done. Note: your sum actually concatenates strings. I'd also note that the HTMLFormElement#submit method wouldn't trigger this submit event, and that's good.

Changing div content with Javascript onClick

I'm trying to use a textbox and a submit button to change a div on the page. I want to take the text that has been typed in the textbox and put it in the div when the button is clicked. I have this code:
function myfunction() {
var myText = document.getElementById("textbox").value;
document.getElementById('myDiv').innerHTML = myText;
}
<form>
<input type="text" name="textbox" id="textbox" />
<input type="submit" name="button" id="button" onclick="myfunction()" />
</form>
<br/>
<div id="myDiv"></div>
But nothing happens. When I try it in the browser it just refreshes the page and adds ?textbox=someValueHere to the end of the URL. How can I get the div to display the textbox value?
The problem is that the submit button is posting the form, so you are not seeing the change - If you change your submit button to a normal button it will work
<input type="button"name="button" id="button" onclick="myfunction()" />
The form is submitting. You need to stop that by adding return false; (if you are using Jquery) Or remove the form entirely it is not required.
function myfunction() {
var myText = document.getElementById("textbox").value;
document.getElementById('myDiv').innerHTML = myText;
return false;
}
Nothing happens because the form is being submitted. You need to prevent the default action from happening, which is the form submission. See preventDefault() or return false in the MDN for more details on how to prevent an events default action from occurring.
Call event.preventDefault() to prevent the normal form submission.
function myfunction(e) {
e.preventDefault();
var myText = document.getElementById("textbox").value;
document.getElementById('myDiv').innerHTML = myText;
}
<form>
<input type="text" name="textbox" id="textbox" />
<input type="submit" name="button" id="button" onclick="myfunction(event)" />
</form>
<br/>
<div id="myDiv"></div>

call function after filling form and pressing enter

In script below
<html>
<body>
<form>
First Name: <input type="text" id="myText" maxlength="30" >
</form>
<button onclick="procesText()">get name</button>
<script>
function procesText()
{
var y = document.getElementById("myText");
alert(y.value);
y.value="";
}
</script>
</body>
</html>
i want to call function procesText Not by clicking get name button, but by clicking enter when i fill input with text. How to achieve that?
HTML:
<form id="myform">
First Name: <input type="text" id="myText" maxlength="30" >
</form>
JS: (If you want to send the form to te server) (Demo)
document.getElementById('myform').onsubmit = procesText;
JS: (If you don't want to send the form to te server) (Demo)
document.getElementById('myform').onsubmit = function(e) {
procesText();
e && e.preventDefault && e.preventDefault();
return false;
}
Just remove the button, call the function onsubmit, and prevent it from submitting:
<form onsubmit="return procesText()">
First Name: <input type="text" id="myText" maxlength="30" />
</form>
<script>
function procesText() {
var y = document.getElementById("myText");
alert(y.value);
y.value = "";
return false;
}
</script>
Fiddle: Fiddle

When working with a form element how would you access what was input into the element to display a message?

I have a form
<form>
<input id="input" type="number">
<input type="submit">
</form>
I want to be able to input a number into the number and click the submit button and javascript displays a number based on the number submitted.
(My Guess is that this question is very basic but I am pretty knew to javascript.)
Here is a very simple (jquery-less) example of what you might be after:
<script type="text/javascript">
function ShowANumber() {
var currentNumber = document.getElementById("input").value;
var newNumber = currentNumber * 10 // Do something with input
document.getElementById("result").innerHTML = newNumber;
return false; // Stop form submit
}
</script>
<form onsubmit="return ShowANumber();">
<input id="input" type="text"/>
<input type="submit"/>
</form>
<div>Result: <span id="result"></span></div>

Categories