Force imput field filled out

JavaScript
1

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

Get rid of that form name and instead replace it with a unique identifier.


<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.


<body>
...
<script src="script.js"></script>
</body>

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


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.


... = 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;
};
3

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.

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 :slight_smile:

4

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.

5

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

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.


<form id="rescueDetails" name="channel00000" ...>