submit button refreshes the whole page

**karthkri** · 08-24-2011 04:18 AM

I have the following JS. In this, when I press the submit button, I have a JS function that will create 2 input boxes and one more submit button.

When I type the values in those input boxes and click on the newly created submit button, the addition of the above input values should display. But the entire input boxes and submit button gets lost and the old page is getting displayed.

Please let me know what is wrong.

My JS:

<html>
<head>
<title>Javascript Exercises
</title>
<script type="text/javascript">

function maxInput(){
var maxInputForm = document.createElement('form');
var maxInputA = document.createElement('input');
maxInputA.setAttribute('type','textbox');
maxInputA.setAttribute('id','maxInputA');
maxInputA.setAttribute('value',3);
var maxInputB = document.createElement('input');
maxInputB.setAttribute('type','textbox');
maxInputB.setAttribute('id','maxInputB');
maxInputForm.innerHTML+= 'A: ';
maxInputForm.appendChild(maxInputA);
maxInputForm.innerHTML+= '</br>';
maxInputForm.innerHTML+= 'B: ';
maxInputForm.appendChild(maxInputB);
maxInputForm.innerHTML+='</br>';
var addButton = document.createElement('input');
addButton.setAttribute('type','submit');
addButton.setAttribute('value','add');

var max=function (){
maxInputA.setValue(maxInputA.getValue()+maxInputB.getValue());
};

addButton.addEventListener('click',max,false);
maxInputForm.appendChild(addButton);
maxInputForm.addEventListener('submit',max,false);
var max_2_nos_doc = document.getElementById('max_2_nos');
max_2_nos_doc.parentNode.insertBefore(maxInputForm,max_2_nos_doc.nextSibling);
return;
}
</script>
</head>
<body>
<div id="title">
<h1>Javascript Exercises</h1>
</div>
<div id="contents">
<div id="max_2_nos">
<h3>Max of 2 Numbers</h3>
</div>
<div id="submit">
<input type="submit" onClick="maxInput();"/>
</div>
</div>
</body>
</html>

**donatello** · 08-24-2011 04:40 AM

I don't know about that, but wouldn't it be better to have two submit buttons or include those two boxes that could pop up with a checkbox than making a user submit a form twice?

That's annoying for users.

**karthkri** · 08-24-2011 05:06 AM

Hi,

Thanks for your reply.

User experience is one problem, I agree. But here the functionality itself is not working.

I am not able to capture the inputs entered by the user in the newly created form. Thats what I want to solve.

**donatello** · 08-24-2011 06:16 AM

Originally Posted by karthkri

Hi,

Thanks for your reply.

User experience is one problem, I agree. But here the functionality itself is not working.

I am not able to capture the inputs entered by the user in the newly created form. Thats what I want to solve.

-----------------------------------------------
If I understand your question correctly, there are two ways to do it...
I do not know java, but one of these basic methods should work. This is what I do in PHP:

PHP Code:


foreach($_POST as $key=>$value) {                                 //Captures previously sent data and enters into new form variables for HTML Generation.

    echo "<input type=\"hidden\" name=\"$key\" value=\"$value\">";

}

If you cannot find a Java equivalent to that, you can try this method:

PHP Code:


echo '<form method="post" action="http://www.YourURL.com/form/">';

echo "<input type=\"hidden\" name=\"privacy\" value=\"$privacy\">

<input type=\"hidden\" name=\"whatever\" value=\"$whatever\">

<input type=\"hidden\" name=\"something\" value=\"$something\">

</form>";

**DracoMerest** · 08-24-2011 07:00 AM

A SUBMIT button is for submitting a FORM and usually changing the page location. Since
there is no FORM tag declaring an action URL, the default action of loading the current
page is taking place. So everything is working as expected.

What you should have used was a BUTTON.

<input type="button" value="ADD">

Why have you done to the trouble of programmatically creating all the form information
and inserting it into the document? It seems the point of the script was to investigate
object creation and document insertion rather than making a form to add two numbers.

What is the main focus of this?

**karthkri** · 08-24-2011 01:30 PM

Hi Colin,

The purpose is to create a form with a set of questions. On clicking a question a form will open with a textarea, a submit and cancel button.

Once you press the submit button the content in the text area should be taken for processing and the expanded form disappears.

This is something I wanted to try out. Hence I wrote this piece of code.

Thread: submit button refreshes the whole page

Thread Tools

Display

submit button refreshes the whole page

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions