I came across something weird that is making me realize I do not know JS stuff as well as i should. And so I thought I would ask a question about what is going on to see if that will help. I have a simple form with three "textarea" inputs and i have a "save" button. the save button triggers a js function that gathers the what is on the inputs and the does an alert showing them...
very simple application but what I was not expecting was that when you "close" the alert box; all the data entered on the form is erased...
here is my code:
<form>
<strong>Make</strong><br/>
<textarea id="make_notes" rows="4" cols="50">
</textarea><br/><br/>
<strong>Model</strong><br/>
<textarea id="model_notes" rows="4" cols="50">
</textarea><br/><br/>
<strong>Features</strong><br/>
<textarea id="features_notes" rows="4" cols="50">
</textarea>
<br/><br/>
<button onclick="side_form_js2()">Save2</button>
</form>
<script>
function side_form_js2() {
var element1 = document.getElementById("make_notes");
var make_notes_var = element1.value;
var element2 = document.getElementById("model_notes");
var model_notes_var = element2.value;
var element3 = document.getElementById("features_notes");
var features_notes_var = element3.value;
alert(make_notes_var + "I am an alert box!22222" + model_notes_var + features_notes_var);
}
</script>
So I am really uncertain what is making the form input be erased. It is almost like the page is being reloaded but I dont think that is the case. Can anyone shed any light on this? Thanks...
P.S. dont know if this makes any difference but just running this locally using Xampp on my PC...
the default is reload, change your code to this and it should work
<button onclick="return side_form_js2()">Save2</button>
and then in your function add return false after the alert like this:
alert(make_notes_var + "I am an alert box!22222" + model_notes_var + features_notes_var);
return false;
A button element with no type attribute specified represents the same thing as a button element with its type attribute set to "submit".
If you want to use a button in a form without it submitting use type="button".
Related
To be honest, I am very new to Html/javascript. I am trying to create a website from (http://www.wix.com) and it'll contain only a text box and a button.
Wix.com is just a site builder and not supporting the whole website html editing. So I've to use html/javascript to set input textbox and a button.
The main point I would like to know is How to set config on button to go a link(http://www.example.com/)+inputtext(myroom) ... | example:
http://www.example.com/myroom
.....
I set my textbox id to "email" and trying with many code. But still not working.
Please kindly suggest for me . Thank you in advance.
<button onclick="window.location.href='http://www.example.com/'+document.getEelementById("email").value;">Continue</button>
Try this way..
<button id="btntest">Continue</button>
$(document).ready(function(){
$("#btntest").click(function(){
var emailVal = $("#email").val();
window.location.href="http://www.example.com/"+emailVal;
});
});
There's a typo in your javascript (getEelementById), and you use double quotes inside a double quoted string, that's why it does not work.
A simple correction would be :
<button onclick="window.location.href = 'http://www.example.com/' + document.getElementById('email').value;">Continue</button>
Let us know whether your input type is text or email with id="email"
if its type="text" you can go up with written down code
var email_val;
function load() {
email_val = document.getElementById('email').value;
window.location.href = 'http://www.example.com/'+email_val };
<input type="text" id="email">
<button onClick="load()" >Click Here</button>
Hello Guys i was trying dynamic addition of text box and other controls in Classic ASP through JavaScript but encountered some problem up there.
Though i was able to add new textboxes but was no able to retain their data.
Eg : If i have a button and on click i want to add textboxes to the html page on first click a textbox is added and i enter data in that textbox like STACKOVERFLOW but when again i hit button new textbox2 is also added but textbox1 data goes away.
I changed my ASP code for simple HTML so that it will be easy. Here is the code.
<!DOCTYPE html>
<html>
<body>
<div id ='div1' style="margin-bottom:6px;"></div>
<button onclick="myFunction()">Change link</button>
<script>
function myFunction() {
var p_strContents = '<input name="cust_name_0" id="cust_name_0" value="" type="text" size="0" class="FormTextField" maxlength="6" title="">';
document.getElementById('div1').innerHTML = document.getElementById('div1').innerHTML + p_strContents ;
//document.getElementById('div1').appendChild(p_strContents);
}
</script>
</body>
</html>
I tried using even appendchild but it will throw some error.
If you want to try it directly online use this link and just paste my code will be easy for u guys to check.
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_elmnt_innerhtml
I am using JavaScript.
Could you guys help me. Regards...
Please check with this:
function myFunction() {
var textBx = document.createElement('input');
textBx.setAttribute('type', 'textbox');
textBx.setAttribute('class', 'FormTextField');
textBx.setAttribute('maxlength', '6');
document.getElementById('div1').appendChild(textBx);
textBx = null;
}
Please check working code here
i am a newbie to js.
i am trying to grab the value of the textbox and display in new page.
but somehow when i click the button it shows the value for a second then redirects to the same form page.
Please tell me where am i doing it wrong? Thanks.
Here is my code
HTML
<div id="myDiv">
<strong>Enter your name in the box below, then click
the button to see a personalized page!</strong>
<br>
<form id="newp" onsubmit="newpage();">
Name: <input type="text" id="yourname" size="25">
<br><br>
<input type="submit" onclick="pressedbutton()" value="Submit">
</form>
<script type="text/javascript" src="main.js"></script>
</div>
JS
function pressedbutton()
{
var thename = document.getElementById("yourname").value;
document.open();
document.write("<h1>Welcome!</h1>");
document.write("Hello, " + thename + ", and welcome to my page!");
document.close();
}
Thanks.
When you call document.open() and then document.write() on an already loaded document, it will clear the current document and replace it with a new empty document.
If you just want to add some content to the current document, then you should use DOM manipulation. Create new elements and add them to the current document.
For example, you could do this:
function pressedbutton() {
var thename = document.getElementById("yourname").value;
var div = document.createElement("div");
div.innerHTML = "<h1>Welcome!</h1>Hello, " + thename + ", and welcome to my page!";
document.body.appendChild(div);
// prevent form submission
return false;
}
In addition, your form is being submitted back to your server which is causing a page reload. You can prevent that by either changing your button to a regular button, not a submit button or by preventing the default behavior of the submit button.
If you don't intend to submit your form, then just change the button from this:
<input type="submit" onclick="pressedbutton()" value="Submit">
to this:
<input type="button" onclick="pressedbutton()" value="Submit">
Please tell me where am i doing it wrong?
You are not preventing the default action of the submit event. When a form is submitted, the browser will load the URL defined in action, or reload the page if none is provided.
If you don't want the browser to do this, you have to prevent it. There are a couple of ways to do this.
You could return false; from the event handler:
onsubmit="return pressedbutton()"
and
function pressedbutton() {
// ...
return false;
}
Or you could call the preventDefault method of the event object:
onsubmit="pressedbutton(event)"
and
function pressedbutton(event) {
event.preventDefault();
// ...
}
Have a look at the excellent articles at quirksmode.org to learn more about event handling. It also describes the differences between browsers.
There's a few issues I see with your code. The one that stuck out to me the most was:
document.open();
document.write("<h1>Welcome!</h1>");
document.write("Hello, " + thename + ", and welcome to my page!");
document.close();
I personally think that anything involving document. is terrible because it overwrites much of the preset code you already had in place in the HTML file.
Instead, you can use:
location.replace(url)
This keeps everything in place, but instead TRULY loads a new page.
On the page that has url, you could either have the same document.write() script (which I do not recomment), OR you can have preset HTML on that page that would have what you're trying to accomplish, which I think is the better method.
Also, this was kind of bugging me:
Change
</form>
<script type="text/javascript" src="main.js"></script>
</div>
to
</form>
</div>
<script type="text/javascript" src="main.js"></script>
It is good practice to keep your scripts at the end of the document, not inside elements.
Regarding storing the value, I would use the following code:
On the first page:
function pressedbutton(){
var thename = document.getElementById("yourname").value;
localStorage.setItem("Name", thename);
location.replace("Page2.html");
}
In Page2.html (same folder), place similar code to what you had (in the javascript):
<script>
var div = document.createElement("div");
div.innerHTML = "`<h1>`Welcome!`</h1>`Hello, " +
localStorage.getItem("Name") +
", and welcome to my page!";
document.body.appendChild(div);
</script>
so far I have this jsfiddle
<p>Click the button to remove http:// and www. from input box belove below:</p>
<textarea id="demo" name="comments" cols="25" rows="5">
http://www.google.com
</textarea><br>
<input type="submit" value="Submit" button onclick="myFunction(),myFunction2()" />
</form>
<script>
function myFunction()
{
var str=document.getElementById("demo").innerHTML;
var n=str.replace("http://","");
document.getElementById("demo").innerHTML=n;
}
function myFunction2()
{
var str=document.getElementById("demo").innerHTML;
var m=str.replace("www.","");
document.getElementById("demo").innerHTML=m;
}
</script>
It works fine with the text pre input but it will not change submitted text.
I'm sure there's a simple answer, I'm just new to this and cannot work it out or find an answer.
You need to use .value of the textarea, not .innerHTML.
.innerHTML only looks at the generated HTML in an element. If the user types in something new, the source doesn't change.
But, the value does:
document.getElementById("demo").value = ...
Fixed in your fiddle:
http://jsfiddle.net/AbSh2/12/
A couple other pointers:
You don't need two functions to do that operation, as you can see it can be done in one.
You could use type='button' instead of a submit, since Javascript doesn't care about form submits (that only matters on the server, which receives POST and GET data. Javascript can't)
You can streamline your function even further without saving strings all over the place:
function myFunction() {
var str=document.getElementById("demo").value;
var n=str.replace("http://","");
var m=n.replace("www.","");
document.getElementById("demo").value=m;
}
works fine. You could even do
function myFunction() {
document.getElementById("demo").value =
document.getElementById("demo").value.replace("http://","").replace("www.","");
}
but that gets a little jumbled IMO, so should be for learning purposes only :)
I am inexperienced so sorry if this is a dumb question but I'm looking around and I haven't found an answer that works for me. I am using JavaScript and I have an html form with one text input. When someone enters a value for that input and submits the form I want to return to the same HTML page but with what they entered displayed elsewhere on the page. Here is my form:
<form name="chatInput" action="index.html" method="get">
chat:<input type="text" name="chat"/>
</form>
I saw something about having:
var chatText = document.forms[0].elements[0];
But when I try to use this I get [object HTMLInputElement]
Also I would only want to create that variable if the form has been entered once already but not initially. How would I check for this?
Thanks for any info.
var chatText = document.forms[0]['chat'].value;
http://jsfiddle.net/XLeAn/
If you don't want to re-update the html, I'd recommend not using the form tag.
Instead, I'd create a button with the onclick attribute.
<input type="button" value="Update" onclick="someFunction()">
Then in the JS portion, have something like this.
var someFunction = function(){
var chatText = document.getElementById("this-is-the-element-I-want").value;
}
Of course, make sure that the element you are trying to retrieve info from has an id.
<input type="text" name="chat" id="this-is-the-element-I-want">
EDIT: Code indents and clarity
Try this:
var chatText = document.forms[0].elements[0].value;