Help with Web Form upgrade

[Chrisj]

I have this Search Form that works successfully:

<form method="get" action="../search.php" name="myForm" /> 
<select size="1" name="channel" class="dropdown_box" /> 
<option value="All">All</option> 
<option value="4">Channel-2</option> 
<option value="6">Channel-4</option> 
</select> 
<select size="1" name="sub_category" class="dropdown_box" /> 
<option value="All">Sub Category</option> 
</select> 
<input type="text" autocomplete="off" id="keyword" name="keyword" value="SEARCH WORDS" onfocus="if (this.value=='SEARCH WORDS') {this.value=''; this.style.color='#696969';}" onclick="clickclear(this, 'Search [var.site_name]')" onblur="clickrecall(this,'Search [var.site_name]')" value="" /> <input type="submit" value="SUBMIT"/> 
</form>

I wanted it to look better, so I installed this JQuery drop-down menu plug-in: 

http://www.jqueryscript.net/form/Custom-Select-Dropdown-List-Plugin-For-jQuery-jQuery-UI.html1
And I'm trying to combine them. 
Here's essentially the jQuery code:

<form action="" method="get">
<table>
<tr>
<td>
<h3>1. SELECT CATEGORY</h3>
<select name="drop1" class="ui-select">
<option value="">Choose One</option>
<option value="2">ALL</option>
<option value="4">Channel-2</option>
<option value="6">Channel-4</option>
</select>
</td>
<td>
<h3>2. ENTER SEARCH WORDS</h3>
<select name="drop2" class="ui-select">
</select>
</td>
<td>
<h3>2. CHOOSE CATEGORY</h3>
<select name="drop2" class="ui-select">
</select>
</td>
</tr>
</form>

<script>
$(document).ready(function(){
$(".ui-select").selectWidget({
change       : function (changes) {
return changes;
},
effect       : "slide",
keyControl   : true,
speed        : 200,
scrollHeight : 250
});
});
</script>

I believe it's changing <select> line that I can't get correct.

I look forward to any assistance.

 

[requinix]

For future reference, it really helps if you can explain what your problem is. Like "I included this Javascript but it's not changing the dropdowns".

 

Follow the steps on that page:

1. Add the two

2. Add the

3. Copy that code they give you but change the selector (in $("select")) to match your markup. Since you have a "dropdown_box" class you can use that: $("select.dropdown_box")

4. Add the CSS.

 

That should be all. You don't even need to change the HTML markup for your form.

[Chrisj]

Thanks for that, much appreciated, very helpful.

Now, if you don't mind, I'd like be grateful for some assistance with putting the search words field into the new container, please. As you can see from the attached image, the search field is below the container. I'm stumped on what I need to do there.

 

Any help will be appreciated.

Here's that code:

<td>
<h3>2. ENTER SEARCH WORDS</h3>
<select name="channel" class="dropdown_box">
<input type="text" autocomplete="off" id="keyword" name="keyword" value="SEARCH WORDS" onfocus="if (this.value=='SEARCH WORDS') {this.value=''; this.style.color='#696969';}" onclick="clickclear(this, 'Search [var.site_name]')" onblur="clickrecall(this,'Search [var.site_name]')" value="" />
</select>
</td>

[requinix]

That kind of markup isn't allowed. It's not how s work: they take s, not any arbitrary HTML you want.

 

What are you trying to accomplish with it? Match the appearance?

[Chrisj]

Thanks again for your reply.

Yes, I'm trying to match the appearance.

[requinix]

It's likely done using CSS classes, and possibly a bit more HTML markup (which the plugin adds dynamically).

 

Use your browser to "inspect" the other elements. See what the markup looks like, then replicate that with the input: add classes, wrap with spans, whatever. But know that what they use may not work with elements, in which case you'll have to do your best to get the same appearance manually.

[Jacques1]

What is the field supposed to do? Is it just a dumb text field, or do you want an autocomplete or combobox feature as the <select> indicates?

 

jQuery UI has a large variety of different form elements which you should look at before rolling your own.

[Chrisj]

Thanks for your replies. I believe I'll have to try it manually, for just this 'dumb text field' (not autocomplete or combobox).

So, would I add this image (attached) into this line of code somehow?

<input type="text" autocomplete="off" id="keyword" name="keyword" value="SEARCH WORDS" onfocus="if (this.value=='SEARCH WORDS') {this.value=''; this.style.color='#696969';}" onclick="clickclear(this, 'Search [var.site_name]')" onblur="clickrecall(this,'Search [var.site_name]')" value="" />

[Jacques1]

It doesn't work like this. You have to actually learn CSS.

[Chrisj]

Thanks for your reply. Yes, I understand some CSS, just thought I'd ask since we're already having this conversation.

 

I created this in CSS:

.TextBox
{
    background-image:url('../img/TextBox1.png');
    background-repeat:no-repeat;
    width: 220px;
    height:50px;
}

and the code is now this:

<input class="TextBox" id="keyword" name="keyword" value="SEARCH WORDS" onfocus="if (this.value=='SEARCH WORDS') {this.value=''; this.style.color='#696969';}" onclick="clickclear(this, 'Search [var.site_name]')" onblur="clickrecall(this,'Search [var.site_name]')" value="" />

And it works successfully, but now it looks like this - see attached image -

 

Any help with removing the rectangle box that surrounds the "Search Words" text, will be appreciated.

 

[Jacques1]

The image is still nonsense. Have you considered clicking on the link I just gave you and reading the explanations? I know, it sounds crazy, but try it.

 

And then there's Google. It took me exactly 10 seconds to find a Stack Overflow thread explaining exactly how to remove the border.

[Chrisj]

Thanks again for your help...got it