eliminar y añadir valor en campo texto según radio pulsado JavaScript

[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:

Código: [Seleccionar]

    <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:

Código: [Seleccionar]

    <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>


[César Krall]

Hola, no entiendo bien lo que quieres hacer. Ahora mismo tienes planteado el formulario de modo que el usuario tiene que elegir alguna opción entre:

- Para el color del pelo: nada, moreno o rubio.

- Para el perfil: nada, con curvas o atlética.

- Para el estilo: nada, atrevida o elegante.

La última opción elegida es la que aparece en el cuadro de texto ¿Y qué es lo que quieres hacer? ¿Puedes poner un ejemplo?

[lynxstyle]

Hola Cesar, lo que quiero es que escoja una opción de los tres grupos. ejemplo: Rubia con curvas atrevida, de esta manera se haría una busqueda de productos recomendados para estas características.

Si dejo sólo la función anadir, funciona correctamente pero si alguien quisiera cambiar rubia por morena añadiria la opción de morena pero la de rubia continuaria estando tambien, por lo que ya la busqueda no diferenciaria entre estas características.

[César Krall]

Tal y como lo veo yo tú tienes un formulario con tres campos:

Campo 1, denominado search_query1, que puede tomar valor moreno ó rubio

Campo 2, denominado search_query2, que puede tomar valor con curvas ó atlética

Campo 3, denominado search_query3, que puede tomar valor atrevida o elegante

Una vez el usuario pulsa el botón para enviar los datos, se ejecutará un código para buscar en una base de datos de acuerdo con lo que haya elegido el usuario. El usuario sólo puede elegir un valor del campo 1, un valor del campo 2 y un valor del campo 3.

No veo dónde está el problema... aunque a lo mejor estoy perdido 

[lynxstyle]

Sorry, hay algo que no expliqué, el tema es que el motor de busqueda está ya hecho y lo que estoy haciendo es una modificación sólo en el formulario para que la gente hagan la selección con los radio, una vez me funcione el campo de texto lo ocultaré ¿Por qué? porque el motor de busqueda tira directamente de este campo de texto ya que lo que reconoce para escoger el valor es en name, es decir del name=search_query que tiene el campo de texto y por ello de crear una función que me introduzca los valores de los radio en el campo de texto y así me ahorro de realizar el motor de busqueda el completo.

Espero haberme explicado bien 

[Alex Rodríguez]

Con el permiso de César voy a dar un código con el que creo se puede resolver el problema, es decir, que en el campo de texto figure en cada momento lo que haya seleccionado en los botones radio y que el campo de texto vaya cambiando a medida que el usuario hace cambios en los botones radio.

Este sería el código:

Código: [Seleccionar]

<html>

<head>
    <script type="text/javascript">
                            function anadir(obj) {

var radios = document.getElementsByTagName('input');
var value;
obj.form.search_query.value = "";
for (var i = 0; i < radios.length; i++) {
if (radios[i].type === 'radio' && radios[i].checked) {
value = radios[i].value; 
obj.form.search_query.value = obj.form.search_query.value + value;
}
}
}
</script>
</head>

    <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 " onchange="anadir(this)" />Moreno
                <input type="radio" name="search_query1" value="Rubio " onchange="anadir(this)" />Rubio
                </div>
                <div>
                <input type="radio" name="search_query2" value="con curvas " onchange="anadir(this)"/>con Curvas
                <input type="radio" name="search_query2" value="atletica " onchange="anadir(this)" />Atl&eacute;tica
                </div>
                <div>
                <input type="radio" name="search_query3" value="atrevida " onchange="anadir(this)" />Atrevida
                <input type="radio" name="search_query3" value="elegante " onchange="anadir(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>

</html>

[lynxstyle]

Muchas gracias a Cesar por su preocupación y a ti Alex "eres un Crack" funciona perfectamente. Gracias a los dos

Felices Fiestas.

[César Krall]

Gracias Alex e igualmente felices fiestas!