SitePoint Sponsor

User Tag List

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

    Question Force imput field filled out

    I am setting up a form to enter a chat queue on my website for work. The form script comes from the company we are using to host the chat, but the problem is that customers don't have to fill out anything to enter the queue. I want the users to have to fill out 3 of the 5 fields before they are able to click the sumbit button.
    I've found a few scripts on the web that looked they like would work, but they were all for radio selections, and I don't have enough javascript knowledge to switch the correct paramiters to work with imput.

    This is the script I am using;
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
    <body>
    <form name="channel00000" action="https://secure.logmeinrescue.com/Customer/Download.aspx" method="post">
    <table>
    <tr><td>Please enter your name: </td><td><input type="text" name="name" maxlength="64" /></td></tr>
    <tr><td>Company: </td><td><input type="text" name="comment1" maxlength="512" /></td></tr>
    <tr><td>Phone: </td><td><input type="text" name="comment2" maxlength="512" /></td></tr>
    <tr><td>Username: </td><td><input type="text" name="comment3" maxlength="256" /></td></tr>
    <tr><td>Error: </td><td><input type="text" name="comment4" maxlength="64" /></td></tr>
    </table>
    <input type="submit" value="Submit" />
    <input type="hidden" name="EntryID" value="00000" />
    <input type="hidden" name="tracking0" maxlength="64" /> <!-- optional -->
    <input type="hidden" name="language" maxlength="5" /> <!-- optional -->
    </form></body>
    </html>

    I need the name, comment1, and comment4 sections to be filled out before the submit will go through. I don't care if the button is not available until they are filled or a popup that asks for them to be filled out, just so long as they can't enter chat without us knowing their name and whatnot. From what I understand, the bulk of the form script needs to stay the same so it directs to us and not another company, but other than that, I'm open to any suggestion.

    Thank you in advance, I need all the help I can get.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Get rid of that form name and instead replace it with a unique identifier.

    Code html4strict:
    <form id="channel00000" ...>

    Then put your script at the end of the body, so that the script can easily work with page elements. It also helps to improve the page loading speed.

    Code html4strict:
    <body>
    ...
    <script src="script.js"></script>
    </body>

    Gain a reference to the form, and take over the onsubmit event:

    Code javascript:
    var form = document.getElementById('channel00000');
    form.onsubmit = function () {
        ...
        return false;
    };

    Inside that function is where you check the name, comment1, and comment4 fields, and return true to allow the form to be submitted.

    Code javascript:
    ... = function () {
        var form = this,
            name = form.elements.name,
            comment1 = form.elements.comment1,
            comment4 = form.elements.comment4;
        if (name.value > '' && comment1.value > '' && comment4.value > '') {
            return true;
        }
        return false;
    };
    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
    Jun 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Get rid of that form name and instead replace it with a unique identifier.

    Code html4strict:
    <form id="channel00000" ...>
    The form name is going to have to stay like that, that is part of the chat program's coding to identify which channel to take the chat to. I just changed the numbers to the 00s while posting it.

    Quote Originally Posted by paul_wilkins View Post
    Then put your script at the end of the body, so that the script can easily work with page elements. It also helps to improve the page loading speed.

    Code html4strict:
    <body>
    ...
    <script src="script.js"></script>
    </body>

    Gain a reference to the form, and take over the onsubmit event:
    From here down is where I am lost. I have a limited knowledge of javascript and I understand some of what you have here, but not all. To put this code together completly, what would it look like? I think I woud be wrong just to place them one after the other and say yay script lol. Would it be best if I "plugged" this into the radio script I have been looking at or use this to start from scratch?
    I understand if you don't want to write the code for me, so if you could just guide me in the correct direction, it would be greatly appreciated
    Last edited by paul_wilkins; Jun 15, 2011 at 14:02.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Soliloquent View Post
    From here down is where I am lost. I have a limited knowledge of javascript and I understand some of what you have here, but not all. To put this code together completly, what would it look like? I think I woud be wrong just to place them one after the other and say yay script lol.
    I think if you're not keen to learn much about javascript, that would be best for you to employ someone to do the work for you.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    I think if you're not keen to learn much about javascript, that would be best for you to employ someone to do the work for you.
    Like I said previously, I'm not looking for someone to do this for me, but I would like a little more direction than your first post included. I am learning, obviously I don't know as much as someone who works with javascript everyday. It's just difficult to look at fragments of a script and know what is it doing, at least it is for me.
    I would like a little more guidance in this. If you don't want to be that person, that's cool. Maybe someone else here will.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Soliloquent View Post
    Like I said previously, I'm not looking for someone to do this for me, but I would like a little more direction than your first post included. I am learning, obviously I don't know as much as someone who works with javascript everyday. It's just difficult to look at fragments of a script and know what is it doing, at least it is for me.
    I would like a little more guidance in this. If you don't want to be that person, that's cool. Maybe someone else here will.
    With the form identifier, if there aren't going to be more than one of those types of forms on any one page then you could use a consistent identifier on them, along with the name as well.

    Code html4strict:
    <form id="rescueDetails" name="channel00000" ...>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •