disable dropdown until textbox is completed 1

[pendle666]

Hello

In my search form I have two textboxes and next to each is a dropdown for Exact Match or Like.

What I want to do is to have the dropdowns disabled until either textbox has something in it.

Can this be done?

regards
Pendle

 

[southbeach]

Given that your drop down box is id="dropdown", you could try using something like

 function ckTextBox(s) {
   if (s != '' && s != null) document.getElementById('dropdown').disabled=false;
 }

The HTML would look like this:

<textarea name="textarea" onchange="ckTextBox(this.value);"></textarea>

I am guessing you know the syntax for your select statement and have it set, initially, as disabled.



--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[pendle666]

Actually, no the select statement isn't disabled. I've not had to deal with forms at this level before. This is the current code:

<tr>
<td>Surname</td>
<td colspan="2"><input name="Surname" id="Surname" size="30" maxlength="50"/></td>

<td>
<select name="Surname-opt">
<option value="=" selected>Exact Match</option>
<option value="like">Like</option>
</select>
</td>
</tr>
<tr>
<td>Name</td>
<td colspan="2"><input name="Name" id="Name" size="30" maxlength="50" /></td>
<td>
<select name="Name-opt">
<option value="=" selected>Exact Match</option>
<option value="like">Like</option>
</select>
</td>
</tr>

Pendle

 

[southbeach]

No sweat, all you have to do is

<td>
    <select name="Name-opt" [b][COLOR=#ff0000]disabled[/color][/bold] >
        <option value="=" selected>Exact Match</option>
        <option value="like">Like</option>
        </select>
</td>

By adding disabled[/bold] to your select statement, the initial drop down will be, well, disabled.



--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[southbeach]

Oops, I mistyped the TGML tags to bold the text string, make sure you not include nor [/bold] within your code.



--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[tsuji]

[1] Start by serving the pages with select-one element disabled (same for both select's).
[tt] <select name="Surname-opt" [blue]disabled="true"[/blue]>[/tt]
[2] Then add the onblur handling (same for both input's).
[tt] <input name="Surname" id="Surname" size="30" maxlength="50"
[blue]onblur="this.parentNode.nextSibling.getElementsByTagName('select')[0].disabled=!(this.value.length)"[/blue] />[/tt]

 

[pendle666]

Oh dear, this doesn't seem to be working properly.

I've put the code in and although the two drop-downs are now disabled and the search is working-(ish), the two drop-downs are disabled permanently and don't become enabled when a field is completed.

Here is the html again - where have I gone wrong?

Pendle

<tr>
function ckTextBox(s) {
if (s != '' && s != null) document.getElementById('dropdown').disabled=false;
}
<td><label for="Surname">Surname</td>
<td colspan="2"><input name="Surname" id="Surname" size="30" maxlength="50" onchange="ckTextBox(this.value);"/></td>
<td>
<select name="Surname-opt" disabled >
<option value="=" selected>Exact Match</option>
<option value="like">Like</option>
</select>
</td>
</tr>
<tr>
<td><label for="Name">Name</td>
<td colspan="2"><input name="Name" id="Name" size="30" maxlength="50" onchange="ckTextBox(this.value);" /></td>

<td>
<select name="Name-opt" disabled >
<option value="=" selected>Exact Match</option>
<option value="like">Like</option>
</select>
</td>
</tr>

 

[southbeach]

You are missing the ID for the select tag

<td>
    <select name="Name-opt" [b]id="dropdown" [/b] disabled >
            <option value="=" selected>Exact Match</option>
            <option value="like">Like</option>
            </select>
</td>

Note that if using "disabled" by itself does not disable the dropdown box, try as suggested above disabled="true" within the select tag ...


--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[pendle666]

It's still not working for me I'm a bit of a spanner at this stuff!

The code for the surname field is at the bottom of this post, I've called the dropdown box id="dropdown" and I've done the disabled="true" bit. I can do my search as I wish, but when the surname or name bit is completed, the dropdowns don't become enabled.

Thanks for your help so far!

Pendle



<tr>
function ckTextBox(s) {
if (s != '' && s != null) document.getElementById('dropdown').disabled=false;
}
<td><label for="Surname">Surname</td>
<td colspan="2"><input name="Surname" id="Surname" size="30" maxlength="50" onchange="ckTextBox(this.value);"/></td>
<td>
<select name="Surname-opt" id="dropdown" disabled="true" >
<option value="=" selected>Exact Match</option>
<option value="like">Like</option>
</select>
</td>
</tr>

 

[trollacious]

You gotta put your Javascript inside script tags, not just drop it anywhere in the page.

<script type="text/javascript">
function ckTextBox(s) {
if (s != '' && s != null) document.getElementById('dropdown').disabled=false;
 }
</script>

Lee

 

[southbeach]

@trollacious,

I missed that all together ... :0)



--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[pendle666]

Yay at last! But...

When I put something in the surname box and tab out, the dropdown becomes enabled. When I put something in the Name box and tab out the surname's dropdown becomes enabled not the name boxes one.

so it's like

surname (___textbox here_____) Exact/Like dropdown

Name (___textbox here_____ Exact/like dropdown

Here is the code once more:

Pendle


<script type="text/javascript">
function ckTextBox(s) {
if (s != '' && s != null) document.getElementById('dropdown').disabled=false;
}
</script>
<tr>
<td><label for="Surname">Surname</td>
<td colspan="2"><input name="Surname" id="Surname" size="30" maxlength="50" onchange="ckTextBox(this.value);"/></td>
<td>
<select name="Surname-opt" id="dropdown" disabled="true" >
<option value="=" selected>Exact Match</option>
<option value="like">Like</option>
</select>
</td>
</tr>
<tr>

<td><label for="Name">Name</td>
<td colspan="2"><input name="Name" id="Name" size="30" maxlength="50" onchange="ckTextBox(this.value);" /></td>

<td>
<select name="Name-opt" id="dropdown" disabled="true" >
<option value="=" selected>Exact Match</option>
<option value="like">Like</option>
</select>
</td>
</tr>

 

[tsuji]

If the op has ever read my posting, I have been anticipated this kind of novice questions and make least dependency on id and name but solely on the structure of the table. That approach may be too advanced for the op?

 

[pendle666]

Hello Tsuji

I did read your post and thank you for taking the time to reply to my query. However, as I had received a response already from southbeach, I carried on with that as I assumed it was my inexperience with Javascript that was the problem.

However, I've used your code and it works on both textboxes and dropdowns and I'm pleased to say it worked first time.

thank you once again.

Pendle