Problema de javascript

[asantos3]

Boas,

estou com um problema em javascript, o qual ainda não domino bem...

Problema é o seguinte... tenho este formulário de pesquisa:

Código:

<FORM id="search_form" name="searchform" onsubmit="return dosearch();">

<a tabindex="0" href="#" class="fg-button fg-button-icon-right ui-widget ui-corner-all ui-state-default" id="flat">
<span class="ui-icon ui-icon-triangle-1-s" style="visibility: visible"></span>Pesquisas:</a>
<div id="search-engines" name="sengines" class="hidden" style="visibility: visible">
<ul>
    <li><a value="http://www.google.com/search?q=" style="text-decoration: none"><img border="0" src="http://www.google.com/favicon.ico"> Google</a></li>
    <li><a value="http://www.bing.com/search?q=" style="text-decoration: none"><img border="0" src="http://www.bing.com/favicon.ico"> Bing</a></li>
    <li><a value="http://br.search.yahoo.com/search?p=" style="text-decoration: none"><img border="0" src="http://www.yahoo.com/favicon.ico"> Yahoo</a></li>
</ul>
</div>

<INPUT id="text" name="searchterms" value="Pesquisar..." onfocus="if (this.value == 'Pesquisar...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Pesquisar...';}" size="35" style="height: 25px font-family: arial, sans-serif; font-size: 16px;">

<a id="menuLog">Vai Pesquisar: <span id="menuSelection"></span></a>
</div>

<INPUT value="     Pesquisa     " type="image" src="go.png" value="     Pesquisa     " name="btnG" width="46" height="41" ></td>
</form>

e queria que isto fizesse uma pesquisa com este script:

Código:

<SCRIPT type="text/javascript">
function dosearch() {
var sf=document.searchform;
var submitto = sf.sengines.a[sf.sengines.selectedIndex].value + escape(sf.searchterms.value);
window.location.href=(submitto);
return false;
}
</SCRIPT>

Antes o formulário tinha como base isto:

Código:

        <FORM name="searchform" onsubmit="return dosearch();">
        
        <select id="drop" name="sengines">
        <option selected value="http://www.google.com.br/search?q=">Google</option>
        <option value="http://www.bing.com/search?q=">Bing</option>
        <option value="http://br.search.yahoo.com/search?p=">Yahoo!</option>
        <option value="http://www.ask.com/web?q=">Ask.com</option>
        <option value="http://www.cuil.com/search?q=">Cuil</option>
        </select>
        
        <INPUT id="text" name="searchterms" value="Pesquisar..." onfocus="if (this.value == 'Pesquisar...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Pesquisar...';}" size="35" style="height: 25px font-family: arial, sans-serif; font-size: 16px;">
        <INPUT name="btnG" value="     Pesquisa     " type="image" src="images/go.png" value="     Pesquisa     " name="btnG" width="46" height="41" ></form>

O problema é que alterei a lista select option para ul li e como ainda estou a inicar programação em javascript não sei como saio daqui ... alguém me consegue "encaixilhar" isto?

Dou 2 pontos de reputação e venero a pessoa que me resolver isto... Por Favor preciso mesmo de ajuda...

[Bruno Bernardino]

1º O teu código não é de todo minimamente optimizado nem recente.

2º O teu código é vocacionado para o IE e não Firefox, logo, não segue standards.

3º O teu problema existe exactamente pelo facto de teres alterado o select para div e ul li. Esses elementos não têm a propriedade "selectedIndex", que só existe no "select".

Tens de utilizar o código anterior ou então aprender um pouco mais e utilizar um campo escondido que seja preenchido ao clicar num link (o link terá de ter javascript para preencher o tal valor).

[asantos3]

não ha mesmo nenhuma hipotese???
lá vou eu para o antigo código -.-
já agora...
vou aplicar este código: http://technology.amis.nl/blog/994/html-...on-element
para por favicon na list select option... como posso por o icon que selecionei ao lado da caixa? eu já fiz isso mas agora não me lembro

[ruicosta]

Para quem em tempos idos gostava de javascript e quer voltar ao mesmo, aconselho vivamente utilizar frameworks, actualmente muito leves, dinamicas e fáceis de implementar:

Extjs - http://www.extjs.com/ (não tão fácil)
Jquery - http://jquery.com/ - http://www.visualjquery.com (minha favorita)
Mootools - http://mootools.net/

Todas estão optimizadas para IE, FF, opera (pelo menos)

Cumprimentos,
Rui Costa

[avlisrotiv]

Também gosto muita da jQuery, para mim é das mais fáceis e personalizadas "bibliotecas"...
Embora o alguma diferenças, em que o jQuery é para DOM, já o Mootools é mesmo para facilitar a programação do mesmo...
Já a Extjs, não conheço mas não parece mesmo o adequado...

[ruicosta]

(23-02-2010 23:40)avlisrotiv Escreveu:  Também gosto muita da jQuery, para mim é das mais fáceis e personalizadas "bibliotecas"...
Embora o alguma diferenças, em que o jQuery é para DOM, já o Mootools é mesmo para facilitar a programação do mesmo...
Já a Extjs, não conheço mas não parece mesmo o adequado...

A questão do Extjs, não foi propriamente para a questão em epígrafe, mas sim para dar a conhecer esta bela ferramenta. Permite criar objectos (grids, scrollpanels, dialogs, forms) muito bons, equiparadamente até com componentes existentes para vb.net.