eliminar y añadir valor según radio pulsado

[lynxstyle]

Tengo un formulario que en el campo de texto incluyo el valor del botón radio que está seleccionado, el problema es que si en el mismo grupo de radio selecciono otra opción tengo que eliminar el valor de su compañero y sustituirlo por el nuevo valor. El añadir valor no tengo problema, pero el problema es eliminar valores ya que elimina cualquier valor y sólo incluye el ultimo seleccionado.

Código Javascript:

<script type="text/javascript">
                        function anadir(obj) {
                        if (obj.focus)
                        obj.form.search_query.value += obj.value;
                        }
                    </script>
                    <script type="text/javascript">
                        function eliminar(obj) {
                        if (obj.blur)
                        obj.form.search_query.value ="";
                        }
                    </script>
 

Código HTML:

<div id="search_block_left" class="block exclusive">
    <form name="formulario" method="post" action="{$link->getPageLink('search', true)}" id="searchbox">
        <p class="block_content">
            <label for="search_query_block">{l s='Enter a product name or description.' mod='blocksearch'}</label>
            <input type="hidden" name="orderby" value="position" />
            <input type="hidden" name="controller" value="search" />
            <input type="hidden" name="orderway" value="desc" />
            
            <!-- Selectores Personal Shoppers -->   
            <div>
            <input type="radio" name="search_query1" value="moreno " onfocus="anadir(this)" onblur="eliminar(this)" />Moreno
            <input type="radio" name="search_query1" value="Rubio " onfocus="anadir(this)" onblur="eliminar(this)"/>Rubio
            </div>
            <div>
            <input type="radio" name="search_query2" value="con curvas " onfocus="anadir(this)" onblur="eliminar(this)"/>con Curvas
            <input type="radio" name="search_query2" value="atletica " onfocus="anadir(this)" onblur="eliminar(this)"/>Atl&eacute;tica
            </div>
            <div>
            <input type="radio" name="search_query3" value="atrevida " onfocus="anadir(this)" onblur="eliminar(this)"/>Atrevida
            <input type="radio" name="search_query3" value="elegante " onfocus="anadir(this)" onblur="eliminar(this)"/>Elegante
            </div>
                       
            <input class="search_query" type="text" id="search_query_block" name="search_query" value="" />
            <input type="submit" id="search_button" class="button_mini" value="{l s='Go!' mod='blocksearch'}" />
        </p>
    </form>
</div>
 

Como puedo conseguir que sólo me elimine el valor del compañero de grupo y no los de otros grupos?

[Perr0]

hice unos cambios, la idea es que con cada clic, recorra el arreglo completo:

Código Javascript:

<script type="text/javascript">
var i
window.onload = function(){
    f = document.forms.item("formulario");
    for ( i = 0 ; i < f.length ; i++ ){
        if ( f.elements.item(i).type=="radio" ) f.elements.item(i).onclick = function(){recorrer();}
    }
}
 
function recorrer(){
    texto = document.getElementById("search_query_block")
    texto.value = ""
    sep = ""
    for ( i = 0 ; i < f.length ; i++ ){
        if ( f.elements.item(i).type=="radio" && f.elements.item(i).checked==true)
        {
            var nombre = f.elements.item(i).value
            texto.value = texto.value + sep + nombre
            if ( sep == "" ) sep = " ";
        }
    }
}
</script>
 
<div id="search_block_left" class="block exclusive">
    <form name="formulario" method="post" action="{$link->getPageLink('search', true)}" id="searchbox">
        <p class="block_content">
            <label for="search_query_block">{l s='Enter a product name or description.' mod='blocksearch'}</label>
            <input type="hidden" name="orderby" value="position" />
            <input type="hidden" name="controller" value="search" />
            <input type="hidden" name="orderway" value="desc" />
            
            <!-- Selectores Personal Shoppers -->   
            <div>
            <label><input type="radio" name="search_query1" value="moreno" />Moreno</label>
            <label><input type="radio" name="search_query1" value="Rubio"/>Rubio</label>
            </div>
            <div>
            <label><input type="radio" name="search_query2" value="con curvas"/>con Curvas</label>
            <label><input type="radio" name="search_query2" value="atletica"/>Atl&eacute;tica</label>
            </div>
            <div>
            <label><input type="radio" name="search_query3" value="atrevida"/>Atrevida</label>
            <label><input type="radio" name="search_query3" value="elegante"/>Elegante</label>
            </div>
                       
            <label><input class="search_query" type="text" id="search_query_block" name="search_query" value=""  size="120"/>
            <label><input type="submit" id="search_button" class="button_mini" value="{l s='Go!' mod='blocksearch'}" />
        </p>
    </form>
</div>
 

[lynxstyle]

Me ilusioné al verlo, pero peta la página con este código

[Perr0]

No entiendo eso de "peta", lo único que hace es que ya no usa los eventos "onfocus" o "onblur" sino el "onclick" y lo coloca automáticamente en todos los radios dentro del form "formulario" y al momento de hacer click recorre todo para capturar el las opciones elegidas.

allá tu si te "peta" o no

[lynxstyle]

la web se queda en blanco es a lo que me refiero que peta, si voy a ver el código fuente que está cargando, está totalmente en blanco.

[Perr0]

mira, subí el archivo llamado radios.htm

https://www.mediafire.com/?997bimnx4e5a4xw

me funciona en Chrome y IE

salu2

[lynxstyle]

:( ya veo

Bueno este código va incrustado en una web en prestashop, igual algo está entrando en conflicto.

gracias de todos modos.

Miraré los otros script que carga el sistema a ver si por nombre de variable o algo estan en conflicto.

[Perr0]

creo que debe ser el onload, lo importante es que la función recorrer() corra al terminar de cargarse la página para que inserte la función onclick en los radio buttons, luego es pan comido !!!

[lynxstyle]

Si elimino está linea cargar correctamente, aunque no funciona :(((

Código Javascript:

if ( f.elements.item(i).type=="radio" ) f.elements.item(i).onclick = function(){recorrer();}
 

[Perr0]

Esa línea es la que da la función a los radio buttons en el onclick, valida que dentro del formulario sea un input type "radio" y le agrega la funcion recorrer()

lo que puedes hacer, es a cada input escribir de forma manual el onclick="recorrer()" y no cargar el window.onload ya que estaría listo.

salu2

[lynxstyle]

Lo he probado, pero no carga las selecciones.