SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problem during form submission

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

    Code:
    <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>
    
    <div id="output"> </div>
    after the form there's a div with id of output.

    the form data is processed by the following javascript code:

    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;
    document.getElementById('output').innerHTML = 'WTF';
    //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. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by attaboy View Post
    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?
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •