Jump to content

Help with Web Form upgrade


Recommended Posts

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.

 

Link to post
Share on other sites

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.

Link to post
Share on other sites

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>

post-20454-0-09829000-1470879406_thumb.png

Link to post
Share on other sites

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.

Link to post
Share on other sites

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="" />

post-20454-0-11186200-1470924230_thumb.png

Link to post
Share on other sites

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.

 

post-20454-0-55203800-1470930263_thumb.png

Link to post
Share on other sites

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.

Link to post
Share on other sites
This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.