Search Bar issues

[uHeadphones.Com]

Hi All, I am currently having some issues with my Search Bar on my website (www.uHeadphones.Com). This is my first website and when I first launched it the search bar worked just fine. About a week ago I went to go use the search function and all that started to happen was the website would refresh to my index page. I am not sure what is wrong with it I have checked the code numerous times, as well as spoken to several people about it. Still I have not found a fix for it yet. I have been told that the search works perfectly fine with Internet Explorer 8 but not with Safari, Firefox, or Google Chrome. Below this I will paste in the code I have for my search bar: <div class="searcharea"> <div class="custom-search" id="ctl00_ctl02_searchBox"> <input type="text" class="textbox custom-search-field" type="text" maxlength="100" id="search-textbox" class="textbox" value="Enter keyword(s), item #, etc..." onblur="if (this.value == '') {this.value = 'Enter keyword(s), item #, etc...';}" onfocus="if (this.value == 'Enter keyword(s), item #, etc...') {this.value = '';}" /> <input type="image" class="custom-search-button" alt="Go" src="themes/default/images/btn_header_search.gif" id="search-button" name="ctl00$ctl02$go" /> </div> </div> Can somebody please help me out with this? Thank You

[uHeadphones.Com]

Here is the Script.JS coding as well, forgot to include this before: Script.JS:function loadSearch() {var searchText = document.getElementById("search-textbox");var searchButton = document.getElementById("search-button");searchButton.onclick = function() {if (searchText.value != '') {window.location = '/search.aspx?find=' + encodeURIComponent(searchText.value).replace(/%20/g, '+');return false;}};}MC.addLoadEvent(loadSearch);// Start Simple Text Popup//(function($){// $.fn.scSimpleText = function(options){// var defaults = {// popCloseTxt : ''// };//var settings = $.extend({},defaults,options);//return this.each(function(){ // var nextElm = $(this).next();// var closeElement = $(document.createElement("a")).attr("href","").text(settings.popCloseTxt).addClass("scSimpleTextClose").click(function(e){nextElm.fadeOut("slow"); e.preventDefault();});//$(this).click(function(e){ // nextElm.fadeIn("slow");//nextElm.append(closeElement);// e.preventDefault();// });// });// }// End Simple Text Popup

[Mudsaf]

http://uheadphones.com/index.aspx Searchbar just reloads page

[Ingolme]

The browser is misinterpretting your HTML because it is malformed. Ensure that your HTML is valid and it should work properly.

[uHeadphones.Com]

Thank You Foxy Mod I am new to all of this so the validator really helps, I believe that this is the error it came up with the specific HTML for the search bar. Do you know what the fix would be? IF I just delete the class attribute? I will post the code for the search bar here. <div class="searcharea"> <div class="custom-search" id="ctl00_ctl02_searchBox"> <input type="text" class="textbox custom-search-field" type="text" maxlength="100" id="search-textbox" class="textbox" value="Enter keyword(s), item #, etc..." onblur="if (this.value == '') {this.value = 'Enter keyword(s), item #, etc...';}" onfocus="if (this.value == 'Enter keyword(s), item #, etc...') {this.value = '';}" /> <input type="image" class="custom-search-button" alt="Go" src="themes/default/images/btn_header_search.gif" id="search-button" name="ctl00$ctl02$go" /> </div></div> Line 41, Column 114: duplicate specification of attribute "class"…ength="100" id="search-textbox" class="textbox" value="Enter keyword(s), item …✉You have specified an attribute more than once. Example: Using the "height" attribute twice on the same "img" tag.

[uHeadphones.Com]

Also it gave me this error for the same line Line 41, Column 65: duplicate specification of attribute "type"…ss="textbox custom-search-field" type="text" maxlength="100" id="search-textbo…✉You have specified an attribute more than once. Example: Using the "height" attribute twice on the same "img" tag.

[uHeadphones.Com]

It highlight the type="text" and class="textbox" as duplicates

[dsonesuk]

AND.... <input type="text" class="textbox custom-search-field" type="text" maxlength="100" id="search-textbox" class="textbox" value="Enter keyword(s), item #, etc..." onblur="if (this.value == '') {this.value = 'Enter keywor ALSO <input type="text" class="textbox custom-search-field" type="text" maxlength="100" id="search-textbox" class="textbox" value="Enter keyword(s), item #, etc..." onblur="if (this.value == '') {this.value = 'Enter keywor will give you a duplicate error

Edited February 13, 2013 by dsonesuk

[uHeadphones.Com]

Hey All, So I deleted the duplicate error and I no longer have an error on my HTML for my search bar. Could the index refresh be coming from another area of my index page?

[dsonesuk]

When you hover over the search box you can see it shows a link to the home page, you have a anchor link surrounding the searchbox, this is usually placed around the logo, anyway that why every-time you think you a clicking inside the text input, you a actually clicking a link to you home page instead.

Edited February 13, 2013 by dsonesuk

[uHeadphones.Com]

Hey Dsonesuk, Thank You for helping limiting the issue down. Can you highlight what I should remove or fix? Thank You <!-- START HEADER --><script type="text/javascript" src="themes/default/inc/scripts.js"></script><script type="text/javascript" src="themes/default/inc/jquery.megamenu.js"></script><script language="JavaScript" src="https://seal.networksolutions.com/siteseal/javascript/siteseal.js" type="text/javascript"></script><link rel="shortcut icon" href="/themes/default/images/favicon.ico" type="image/x-icon" /><div id="header"> <div id="header-top">Free Ground Shipping on all orders over $99</div> <div id="header-left"> <div id="logo"><a href="index.aspx" /></div></div> <div class="searcharea"> <div class="custom-search" id="ctl00_ctl02_searchBox"> <input type="text" class="textbox custom-search-field" maxlength="100" id="search-textbox" value="Enter keyword(s), item #, etc..." onblur="if (this.value == '') {this.value = 'Enter keyword(s), item #, etc...';}" onfocus="if (this.value == 'Enter keyword(s), item #, etc...') {this.value = '';}" /> <input type="image" class="custom-search-button" alt="Go" src="themes/default/images/btn_header_search.gif" id="search-button" name="ctl00$ctl02$go" /> </div></div> <div id="header-right"> <div class="headerlinks"><a href="index.aspx" title="cart">Home</a> | <a href="login.aspx">Login</a> | <a href="contact-us.aspx">Contact Us</a></div> <div class="shopbtn"> <div class="cartbtn"><a href="cart.aspx">CART</a></div> <div class="fc-cartinfo"><span class="cart_count"> <%Cart.Count%> Item(s) </span> <span class="itemtotal"> <%Cart.Total%> </span><a href="cart.aspx" title="cart"><img src="themes/default/images/arrow_black.gif" alt="View Cart" /></a></div> </div> </div></div>

[dsonesuk]

Ha, it looks like it is added by javascript/jquery code somewhere, as its not there when viewing the source. EDIT: Wait it could be this <div id="logo"><a href="index.aspx" /></div> change it to <div id="logo"><a href="index.aspx"></a></div> I think i remember this being a problem before, because it does not close with '</a>', the browser mistakenly adds another <a> after it further on.

Edited February 14, 2013 by dsonesuk

[dsonesuk]

<a href="index.aspx" />

Is definitely the problem here, when you look at code through FireBug the browser changes it to '<a href="index.aspx">< /a>' and places another around searchbox.IF you use FireBug to edit and remove the searchbox 'a' link, it works as it should, but if you were to change the logo link back to <a href="index.aspx" />, and exit edit, the link reappears around the searchbox again.