This question already has an answer here:
html javascript reverts to default after javascript has run
(1 answer)
Closed 6 years ago.
I am working on client side rendering. I have a input tag where i put a number and click button. Onclick of button it should add more input tags to my page .But the problem is it adds given number of inputs and reset page for no reason.
Please explain me why it is reseting page ?
<HTML>
<script src="js/main.js"></script>
//for converting document.getelementbyid() to _()
<body>
<div id="form_place">
<form>
<input name="nos" id='nos' type="text">
<button onclick="addnos()">Enter</button>
</form>
</div>
</body>
<SCRIPT>
function addnos(){
var nos = _('nos').value;
for (i=0;i < nos;i++){
manddy = document.createElement('INPUT');
manddy.setAttribute("id", 'name'+i+1);
_('form_place').appendChild(manddy);
}
}
</SCRIPT>
</HTML>
don't forget the default behavior of a button in a form is submit. That will be triggering a reload. Change your code to this:
<HTML>
<script src="js/main.js"></script>
//for converting document.getelementbyid() to _()
<body>
<div id="form_place">
<form>
<input name="nos" id='nos' type="text">
<button type="button" onclick="addnos()">Enter</button>
</form>
</div>
</body>
<SCRIPT>
function addnos(){
var nos = _('nos').value;
for (i=0;i < nos;i++){
manddy = document.createElement('INPUT');
manddy.setAttribute("id", 'name'+i+1);
_('form_place').appendChild(manddy);
}
}
</SCRIPT>
</HTML>
1.Your onclick event act like ah form submit.
2.No return statement is there.so the page was reload.
3.If you apply within action of form form action="some.php" the page redirect with that page like http://firsthtml/some.php
4.More reference and demo of from submit
5.So apply with return false statement .Its will prevent your page resting.And apply click function into form submit see the below code
<HTML>
<script src="js/main.js"></script>
//for converting document.getelementbyid() to _()
<body>
<div id="form_place">
<form onsubmit="return addnos()"> <!--return with function-->
<input name="nos" id='nos' type="text">
<button >Enter</button>
</form>
</div>
</body>
<SCRIPT>
function addnos(){
var nos = _('nos').value;
for (i=0;i < nos;i++){
manddy = document.createElement('INPUT');
manddy.setAttribute("id", 'name'+i+1);
_('form_place').appendChild(manddy);
}
return false; //its will prevent page refresh
}
</SCRIPT>
</HTML>
<HTML>
<script src="js/main.js"></script>
//for converting document.getelementbyid() to _()
<body>
<div id="form_place">
<form>
<input name="nos" id='nos' type="text">
<button onclick="return addnos()">Enter</button>
</form>
</div>
</body>
<SCRIPT>
function addnos(){
var nos = _('nos').value;
for (i=0;i < nos;i++){
manddy = document.createElement('INPUT');
manddy.setAttribute("id", 'name'+i+1);
_('form_place').appendChild(manddy);
}
return false;
}
</SCRIPT>
</HTML>
Change your code like this. This will prevent the default behaviour because, in HTML you call return someFunc() so is going to return whatever the function returns. And the function returns a false! so in the end, it returns false to the onclick method and the default behaviour is prevented while your code is executed.
Hope it helped :)
Related
I've been attempting to grab text input from HTML and trying to output the text back into HTML but for some reason it does not seem to be working. Does putting input within a form alter the interaction with getElementById or is it possible that the second button usage of formaction is interrupting this?
$(document).ready(function(){
$("#submit").on("click",function(){
var test = document.getElementById("searchInput");
$("#text").html(test);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
<div id = "text">
<h1>test</h1>
</div>
EDIT: I have attempted to change
var test = document.getElementById("searchInput");
to
var test = document.getElementById("searchInput").value;
previously and it is still not working. Is there an interaction that is failing that I am missing? Also I would like to be able to store the input as variable i.e thats why I am purposely putting it into a variable before outputting it.
EDIT2: There wasn't anything particularly wrong about the code other than retrieving the value. I am currently using codepen.io to code and did not load jquery into the pen.
Since you're using jQuery, it will make more sense to use jQuery to obtain the elements' value:
Use this to always replace #text element contents with #searchInput value:
$("#text").html($("#searchInput").val());
Use this to append #searchInput value to #text element:
$("#text").append($("#searchInput").val());
But the whole logic does not make any sense. You are changing an elements' value that it is outside the form you are submitting. Either you should prevent submit button click event from submitting the form, or have the #text element inside the form as an input, textarea or hidden field:
$(document).ready(function(){
$("#submit").on("click",function(e) {
e.preventDefault();
$("#text").html($("#searchInput").val());
})
});
or having the #text element inside the form for submitting:
<form>
<input type="hidden" id="text" name="text">
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
You Using form element, so once you click the button , the form will be reloaded, if you want to display textbox value to the element , once remove the form element.
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
<div id ="text">
<h1 id="welc"></h1>
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#submit").on("click",function(){
var test = $('#searchInput').val();
$("h1").html(test);
});
});
</script>
Just Remove tag, and check it.
You need to find the element's value and then set it as HTML.
$("#text").html(test.value);
I have updated your question mate check this one .
$(document).ready(function(){
$("#submit").on("click",function(){
var test = document.getElementById("searchInput").value;
$("#text").html(test);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
<div id = "text">
<h1>test</h1>
</div>
I think this will work for you.
<! doctype HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form>
<input type="text" id="searchInput">
<br>
<button type="button" id="submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
<div id="text">
<h1>test</h1>
</div>
</body>
<script>
$(document).ready(function () {
$("#submit").on("click", function () {
$("#text").html($("#searchInput").val());
})
});
</script>
</html>
Edit your JS code please try:
EDIT:
$(document).ready(function(){
$("#submit").on("click",function(){
var test = $("#searchInput").val();
$("#text").html(test);
})
});
This question already has answers here:
HTML-form submit button not running the OnSubmit script associated with it
(2 answers)
Closed 6 years ago.
I am trying to submit a form on my popup html, on a chrome extension. When I submit the form, a function is called. However, the function is not being called.
Should I use a button instead of a form?
This is the HTML for the form:
<html>
<body>
<script src="contentScript.js">
</script>
<form name="myForm" onSubmit="form()">
Product: <input type="text" name="product" id="product"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
This is the contentScript.js:
function form(){
var product = document.getElementById('product').value;
alert(product);
};
Are there any mistakes??
Thanks
The code
<script>
function myForm() {
var product = document.getElementById('product').value;
alert(product);
return false;
}
</script>
<form onsubmit="return myForm();">
Product: <input type="text" name="product" id="product"><br>
<input type="submit" value="Submit">
</form>
would work just fine, the thing you are missing is that your function is maybe not find, but you don't prevent the submit to happen, you should always return false to the event "onsubmit" to prevent the form being submitted.
Note: you can't put inline scripts in chrome extensions anymore but you could back then.
function form(){
var product = document.getElementById('product').value;
alert('your some statment there');
return false;
};
and make sure your are also return true at the end of main alert statment
I have some html and some javascript code that is supposed to take input in a text box, and open a new tab with the Wikipedia page of whatever was in the text box. However, I'm using this as an extension, and google chrome doesn't allow inline javascript.
page.js
document.getElementById("search").addEventListener("click", searchPage);
function searchPage() {
console.log("test")
var temp = document.getElementById(pageName);
var temp = temp.value;
var myPage = "http://en.wikipedia.org/wiki/" + temp;
window.location.replace(myPage);
}
popup.html
<!DOCTYPE html>
<html>
<body>
Random
Enter page to lookup: <input type="text" id="pageName" /><br />
<input type="submit" value="Submit" id="search" />
<script src="./page.js></script>
</body>
</html>
Anyone have any clue why this isn't working?
what you can do instead is include your JS in your HTML <head> tag, and add an onClick attribute to your button, like so:
<!DOCTYPE html>
<html>
<body>
<a href="http://en.wikipedia.org/wiki/Special:Random/" target="_blank">$
Enter page to lookup: <input type="text" id="pageName" /><br />
<input type="submit" value="Submit" id="search" />
<script src="./page.js"></script>
</body>
</html>
I think the problem was that in your original code, you had <script src="./page.js></script> instead of <script src="./page.js"></script>
then you can change your javascript to be the following:
document.getElementById('search').addEventListener('click', searchPage);
function searchPage() {
console.log("hjabdfs");
var temp = document.getElementById('pageName');
var temp = temp.value;
var myPage = "http://en.wikipedia.org/wiki/" + temp;
window.location.replace(myPage);
}
please note that I also changed var temp = document.getElementById(pageName) to var temp = document.getElementById('pageName'), as pageName is not a variable.
Input type submit is trying to submit a form. You need to add an action to that submit button or you can change it to a button and the event will fire.
Your click event listener doesn't work because it has not been loaded yet. Or in other words, you need to make sure this line <script src="./page.js></script> is correctly pointing to page.js.
Is there any way to submit a JavaScript statement in a form, (like alert("nefvn");) and then execute it's value as a statement?
[..omitted..]
<script type="text/javascript"
function doSomething(){
//Like this?
var a = document.forms[0].elements[0].value;
a;
return;
//Or just this?
document.forms[0].elements[0].value;
}
</script>
</head>
</body>
<form>
<input type="text" id="doThis">
<input type="button" onClick="doSomething()"
</form>
[..omitted..]
eval(a) will (try to) execute the javascript code in a. Try to avoid it for any non-testing purposes.
Set OnClick to "var = 'X'; doFunction()".
HELP! I need to know for this code to pop up an alert box, but the submit button does not bring it up! What is the bug and how can I fix the code without entirely changing the all of it? Thanks!
<!DOCTYPE html>
<html>
<head>
<title>Dougie's Script</title>
<script>
var textinput;
function submitHandler(e){
alert("You entered " + textinput.value + "\n");
e.preventDefault();
}
textinput=document.getElementById("textfield");
var form = document.getElementById("theform");
form.addEventListener("submit", submitHandler, false);
</script>
</head>
<body>
<form id="theform" action="#">
<label>Enter text here...</label>
<input id="textfield" type="text" >
<input type="submit" value="Submit" >
</form>
</body>
</html>
Move this to underneath the ending form tag:
<script type="text/javascript">
textinput=document.getElementById("textfield");
var form = document.getElementById("theform");
form.addEventListener("submit", submitHandler, false);
</script>
Move your <script> tag to the bottom of your <body>:
</form>
<script>...</script>
</body>
Right now, your script is trying to look for elements that haven't been created yet. The alternative would be to listen for the document's DOMContentLoaded event, but that isn't cross-browser.
Try moving your script tag to the very bottom of the body. This way the script will execute after the document has loaded (and then your elements should be "gettable" and "listener-attachable".)
The problem is that the elements of the page have yet to load when the javascript is ran. Therefore, document.getElementById("textfield") does not return an element, and no event is tied to it.
Try encapsulating the event handling of your javascript code as follows:
var textfield;
function submitHandler(e) { ... }
// When the window loads, run this function.
window.onload = function() {
textfield = document.getElementById("textfield");
var form = document.getElementById("theform");
form.addEventListener("submit", submitHandler, false);
}
That will make sure the event is tied to the element once it is loaded.
Remember to keep things in scope; where you are grabbing the text input dynamically every time you call the function in-order to keep the value updating within the response. Also, make sure the DOM is loaded before trying to access elements within the HTML tree, and since you are using addEventListener, here is a working version of your script:
<!DOCTYPE html>
<html>
<head>
<title>Dougie's Script</title>
<script>
(function(d){
var init = function(){
var form = d.getElementById("theform"), submitHandler = function(e){
var textinput = d.getElementById("textfield");
alert("You entered " + textinput.value + "\n");
e.preventDefault();
};
form.addEventListener("submit", submitHandler, false);
};
d.addEventListener("DOMContentLoaded", init, false);
})(document);
</script>
</head>
<body>
<form id="theform" action="#">
<label for="textfield">Enter text here...</label>
<input id="textfield" type="text" >
<input type="submit" value="Submit" >
</form>
</body>
</html>