I am trying to learn a little Javascript. I wrote the code below expecting to see the contents of the text box written to the page when the button is clicked. This does happen but very briefly as the page seems to redraw back to it's original values.
Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<script>
function getData() {
var x = document.getElementById("name").value;
document.getElementById("space").innerHTML = x;
}
</script>
</head>
<body>
<h1>Playing with Javascript and Forms</h1>
<form id="myForm">
Name: <input type="input" id="name">
<input type="submit" value="Submit" id="submit" onClick = "getData()">
</form>
<p id="space"></p>
</body>
</html>
It does this because the form is being fully submitted and the page reloads. To stop it, change the onclick to:
onClick = "return getData()"
and your function to return false with:
function getData() {
var x = document.getElementById("name").value;
document.getElementById("space").innerHTML = x;
return false;
}
jsFiddle example
This will prevent the form from submitting and allow your code to run.
Your form submits. To avoid it try adding return false at the end of "getData" function and change onClick = "getData()" to onClick = "return getData()"
Demo: http://jsfiddle.net/6gAkL/
Your javascript seems to be working fine.
The problem is after the JS is ran the HTML kicks in and submits the form POSTing it's data to the POST target (None as currently set).
If you don't want the form to be posted when you click that input you probably should remove the: type="submit"
Edit:
This would be most appropiate:
< input type="button" value="Submit" id="submit" onClick = "getData()" >
Related
This looks very simple but I cant get it working. Im not experianced in web design but here is the following:
I am trying to make input bar(like search box) that when entered specific text it redirects you to other page or makes somethign else.
Here is what I have so far.
<!DOCTYPE html>
<html>
<body>
<form method="post">
<input id="search" type="text"/>
<button onclick="return abc()">test</button>
</form>
<script>
function abc() {
var textt = document.getElementById("search");
if (textt.value == "test") {
window.location.assign("http://www.google.com")
}
}
</script>
</body>
</html>
http://jsfiddle.net/uvnyd8vz/1/
this just refreshes page and thats it. Any ideas? thanks!
Compare the value as string
Like
textt.value =="test";
Also inside the function write
event.preventDefault();
This will stop the submit action of submit button
Also specify the else condition i.e.
else{return false;}
Adding event.preventDefault(); to function fixed my problem! thanks
This question already has answers here:
How to cause a form to be submitted automatically on page load in JavaScript?
(3 answers)
Closed 8 years ago.
I need the button with the ID of "clickButton" to be automatically clicked or "activated" just by someone loading the page:
<html>
<head>
</head>
<body>
<center>
<form method="post" action="http://web.com/">
<input type='hidden' value="test" id="chatbox" name='content' />
<!-- The Button -->
<input id="submitButton" class="button" name="accept" type="submit" value="Send"/>
</form>
</center>
</body>
</html>
What I have tried:
<html>
<head>
<script type="text/javascript">
//In here I would use several Javascript codes,
//including all the ones I have been given
//here
</script>
</head>
<body>
<center>
<form method="post" action="http://web.com/">
<input type='hidden' value="test" id="chatbox" name='content' />
<!-- The Button -->
<input id="submitButton" class="button" name="accept" type="submit" value="Send"/>
</form>
</center>
</body>
</html>
Also if I wanted a javascript code to repeat it self, what command would I use?
Thank you for your help in advance.
I see what you really want to auto submit the form. This would do it:
window.onload = function(){
var button = document.getElementById('clickButton');
button.form.submit();
}
EDIT
If what you want is really auto submit the form automatically n times, each second, whis would do:
window.onload = function(){
var button = document.getElementById('clickButton'),
form = button.form;
form.addEventListener('submit', function(){
return false;
})
var times = 100; //Here put the number of times you want to auto submit
(function submit(){
if(times == 0) return;
form.submit();
times--;
setTimeout(submit, 1000); //Each second
})();
}
Cheers
window.onload = function(){
document.getElementById('clickButton').click();
}
I try to make a habit of explaining my code, but I think this is pretty self-explanatory. If you want it to repeat, just call the function that's set to the click listener of clickButton. Unless you mean over and over, in which case use setInterval or setTimeout (less recommended).
I think clicking without being user triggered is not so good practice, you can achieve the same without needing to triggers click, but you can try this
window.onload = function(){
var button = document.getElementById('clickButton');
setInterval(function(){
button.click();
},1000); // this will make it click again every 1000 miliseconds
};
As an alternative, you can directly send the form instead of clicking the button:
window.onload = function(){
document.forms[0].submit();
}
But my best advice would be to let the user know what you are doing... users really don't like it when a wizard is playing with their page.
<label for="accept">Click here to continue</label>
I know very little javascript. after going page to page, I created this, hoping this would work. but for some reason, I have no idea why this doesn't work.
<form onsubmit="goToPage()" method="get">
<input id="url">
<input type="submit">
</form>
<script>
function goToPage()
{
var initial = "http://www.youtube.com/embed/";
window.location.replace(initial+document.getElementById("url").value);
}
</script>
Now, I thought when I submitted the form, It would run toToPage(), and redirect me to the embedded version for youtube. However, it's not.
I found that I could do onclick="goToPage()" for the input, but I don't want to have to click the input. I want the ability to either click "enter" or click on submit.
You must return false in onsubmit function, so the page will redirect not submitted by form.
<form onsubmit="return goToPage()" method="get">
<input id="url">
<input type="submit">
</form>
<script>
function goToPage() {
var initial = "http://www.youtube.com/embed/";
window.location.replace(initial+document.getElementById("url").value);
//window.location.href = initial + document.getElementById("url").value;
return false;
}
</script>
I want to display id="text" when the button is clicked. So I tried this:
<form name="i_choose_form" action="" method="post">
<input type="submit" class="button" value="I am not sure, show me other choices..." onclick = "showText()"></br>
</form>
<span id ="text" style="display:none">First make your choice then you can see all other choices</span>
<script type = "text/javascript">
function showText() { document.getElementById("text").style.display="inline"; }
</script>
But this does not work as expected and text is not displayed. What am I doing wrong? http://jsfiddle.net/dPhUQ/
It is shown, but you are submitting the page. Change your input to type='button' instead of 'submit'
<input type="button" class="button" value="I am not sure, show me other choices..." onclick = "showText()"></br>
You are not cancelling the click event for the submit button so the page will submit the form.
onclick = "showText(); return false;"
You should really look at adding the events unobtrusively.
<input type="submit" id="showMore" class="button" value="I am not sure, show me other choices..." onclick = "showText()">
<script type="text/javascript">
function showText() {
document.getElementById("text").style.display="inline";
}
document.getElementById("showMore").click = showText;
</script>
The problem is the way you've got jsfiddle set up. On the left is a pull-down to choose how the site incorporates your JavaScript into the result page. Set it to "no wrap (head)" and it'll work. Well, it won't work, actually, but it'll call your function.
The next problem you'll have is that your "submit" button will submit the form immediately after your handler runs. To prevent that, you'll need to stop event propagation.
It looks like your FORM is interfering with your desired results, try this instead:
<div onclick = "showText()">Click me</div>
I had to take my working example here. For some reason, it does not work as easily as the initial example.
New Example
Suppose I want to see M5s every time the page loads. So how can I fire the same query for M5 every time the page load?
I copied the critical part here:
<body>
<div id="search">
<form onSubmit="makeRequest(1); return false;" style="margin: 2px; padding: 2px; font-size: 1.2em;">
<input id="searchinput" type="text" name="tags" size="20" value="">
<input id="searchbutton" type="button" onClick="makeRequest(1);" value="Create VideoWall"><br />
...
</form>
</div>
Response to the idea in MiffTheFox's and Tom's reply
So I added the command before the form above:
<body onload="document.getElementById('myform').submit();">
However, the wall stays black. It should be full of M5s.
Emerged problem to the initial Question: Why does it not work? Why does the wall stay black?
makeRequest asked by Tom
function makeRequest(page){
startrequest = 0;
for(i =1; i < 4; i++){
clearList('ul'+i);
var tags = encodeURI(document.getElementById('searchinput').value);
if(i == 1 || i == 2){
quantity = 45;
}
if(i == 3){
quantity = 36;
}
insertVideos('ul'+i,'search',tags,quantity,startrequest);
startrequest = startrequest + quantity;
}
}
Please, see the url at the top and press CTRL+U to see the code.
Well, there´s on load attribute inside the body element
<body onload = "javascript:doSubmit()">
...
</body>
<script>
function doSubmit(){
var form = document.getElementById("myform");
if (form !=null)
form.submit();
}
</script>
Also, you could add javascript at the end of your html page. This is not as portable as the first option
<html>
<body>
<form id="myForm" ...>
...
</form>
<script>
//this executes when the page finishes loading
var form = document.getElementById("myForm");
if (form!=null) form.submit();
</script>
</body>
</html>
First add an ID to the form, then add an onLoad handler that submits it.
<body onload="myForm.submit();">
<form id="myForm" name="input" action="form_action.asp" method="get">
...
Not sure what you're trying to accomplish, but you can certainly use jQuery to do
$(document).ready( function() {
$("#submitButton").click();
});
The problem is ensuring that this only happens the first time the document is submitted; you will need to keep track of that on the server-side and remove the submission code after the first time.
A better approach is probably to compose your HTML on the server side so that whatever initial state you want to display is displayed. Many web applications have a form to submit a query of some kind (say, a search) but start with some initial sample result below the form. This is just created on the server side before loading, not by "pre-submitting".