Problem during form submission

JavaScript
1

I have a html form that is submitted with a submit button

<form>
	your name: <input type="text" name="name" id="name" class="input" /><br /><br />
	your address: <input type="text" name="address" id="address" class="input" /><br /><br />
    what do you want?: <input type="text" name="want" id="want" class="input" /><br />
    
    <input type="submit" value="Submit" id="sub_btn" />
</form>

[B]<div id="output"> </div>[/B]

after the form there’s a div with id of output.

the form data is processed by the following javascript code:

function initialize() {
var enter =	document.getElementById("sub_btn");
enter.addEventListener("click", processForm, false);
}
function processForm() {
var string1 = document.getElementById('name').value;
processElement(string1);

var string2 = document.getElementById('address').value;
processElement(string2);

var string3 = document.getElementById('want').value;
processElement(string3);
}

function processElement(string) {
var words = string.split(' ').length;
var characters = string.split(/[A-Za-z0-9_.!?\\-]/g).length - 1;
[B]document.getElementById('output').innerHTML = 'WTF';[/B]
//alert("There are "+characters+ " characters in the string");
//alert("There are "+words+ " words in the string");
}

if I display the output using the alert methods(now commented out) they work fine. I was hoping to display my messages in the div with id of output.
When that didn’t work I tried to see if I could send anything to the div.
When I click the submit button the message “WTF” appears for at most half a second. I’m hoping to get it to stick around. I’m sure it has something to do with how form submission works. Maybe I need to submit to the same page? can I do that with JS?

2

Don’t use the submit button to process the form. When people press enter the button won’t be triggered either.

Instead, attach the process function to the onsubmit event of the form itself. That way, you can return false from the function to prevent the form from being submitted.

3

I found a way around it by creating my own button. Your way sounds better and I did try it but putting return false at the processForm function didn’t prevent it from submitting. Maybe I’ll try it again on my next homework assignment. Thanks for the help.