Weird Problem in Javascript in creating and appending elements!

Question

5.00/5 (1 vote)

See more:

Hey,
Am creating a Script for taking input from the Input Text Box and posting it in the webpage. What I am doing in Javascript is creating a new Element , adding the input value as the text node of the element , appending the text node to the element and then appending the element to another div. Here is the code :

HTML

<html>
<body>
<input type="text" id="typs" />
<input type="submit" value ="post " onclick="postf();">
<div id="container">
Posts
</div>
<script> 
function postf() {
var postEle = document.createElement("p");
var postCon = document.getElementById("typs").value;
var postTxt = document.createTextNode(postCon);
var con = document.getElementById("container");
postEle.appendChild(postTxt);
con.appendChild(postEle);
}
</script>
</body>
</html>

This code works perfectly taking the input and posting it to the webpage!
But when we put the <input> tags in a form tags :

HTML

<form name="input_form">
<input type="text" name="input_text" id="typs" />
<input type="submit" value ="post "  önclick="postf();">
</form>

This doesnt work properly.
When we click the Submit Button
The input is taken and the elemented is created, But it just flashes and goes! Just Flashes and goes! It just weird!
Why is this happening only when we insert the <form> tag?
Can anyone help me?

Thanking You,
digi0ps

Posted 25-May-13 4:45am

digi0ps

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2013-05-25T08:59:00

Solution 1

There are two types of Button. One is Submit Button and another is Normal Button.

You have used Submit Button as you have specified type="submit". And the behaviour of Submit Button is to GET/POST data (submit data) to server side if you have used inside the form tags.

As you are saying it is flashing, it is actually posts back and tries to send data of the page to the specified page in action attribute of form tag.

Refer - HTML form Tag[^].

In the example given in W3Schools, it is posting data to demo_form.asp page as it is mentioned inside the action attribute of form tag.

So, to avoid this, just use Normal Button, your issue will be resolved. Like below...

XML

<input type="button" value="post"  önclick="postf();"></input>

Posted 25-May-13 8:59am

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Updated 25-May-13 9:03am

v3

Comments

digi0ps 27-May-13 13:56pm

Thanks Tadit!
That helped! :)

I have this one one thing in my mind.
Cant the DOM Changes ( like creating or modifying elements) be there even if the web page reloads?

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 27-May-13 14:05pm

No. Think logically.

You are creating them dynamically on client side and when page loads it goes to server and fetches the new page again which don't have those elements. As you have created them on client side using javaScript, so how come the server will know them.

One way is to store that elements data in Session and check Session on PageLoad.
If Session exists, then fetch that and create element from code.

Is it understood ?
Please feel free to ask any doubts...

digi0ps 30-May-13 8:40am

Okay ok! I havent yet gone into Session in Javascript ! :)

And one more thing, this isnt about JS.
How do you get this reputation points???

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 30-May-13 8:56am

Sessions are server side concepts, although we can handle them on client side. But that is basically server side concept.

To check how reputation system works follow - http://www.codeproject.com/script/Membership/Reputation.aspx.

digi0ps 30-May-13 9:13am

Hmmm...
And your points 25.6K --- thats WOW!
How did you earn that much points dude?
Are you in this forum for years?

digi0ps 30-May-13 9:18am

And btw can you please vote this question!

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 30-May-13 9:43am

Ok... :) :P
Voted 5 stars...

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 30-May-13 9:43am

I am here for 1 yr 5 months.

I just earn it through answering questions and other activities.

digi0ps 30-May-13 11:20am

Haha... Thanks! :) :D

digi0ps 30-May-13 11:33am

Hey Tadit Dash,
I have asked a new question ( its kinda silly )!
Can you help me in that?
Here is the link:
My Question

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 30-May-13 12:59pm

I have added a question. Take a look at it. :)

And thanks for giving me the link to see it. Anyway, that will help me as well with my knowledge and reputation.

Thanks,
Tadit

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 30-May-13 13:12pm

You can also accept multiple solutions, there is no problem.
Please accept my answer as well on that question.