crear boton dentro de form y que actue por ajax ignorandolo

[arcanisgk122]

Hola amigos vengo por haca con una super duda(no se si se puede hacer) no he encontrado documentación al respecto, lo que pasa es que tengo un diseño HTML ya terminado, en el una serie de botones para enviar formularios, pero sucede de que ahora me doy cuenta de que dichos botones actuan sobre el form.

la idea de estos botones es de enviar a los usuarios a diferentes lugares dentro de la pagina web. pero el metodo es POST

formulario de login:

Código HTML:

<form method="post" action="" class="loging">
                                 Contenido del formulario es required
            <div><button type="submit" class="lbutton">Login &raquo;</button></div>
            <div><button type="submit" name="visita" value="3" class="lbutton">Registrarse &raquo;</button></div>
            <div><button type="submit" name="visita" value="4" class="lbutton">Visitar Web &raquo;</button></div>
        </form>
 

intente solucionarlo con un eventoo OnClick:

Código PHP:

<input type="button" onClick="location.href='?visita=3'" name="button" class="button" value="Perfil de Usuario">
 

pero no me trabaja por que sigue estando dentro del mismo form y por que esto lo envia por URL y no porPOST.

Como conocerán del tema en un formulario login el usuario y contraseña es required, entonces al pulsar en : Registrarse o Visitar Web, se bloqueara y dira que no se puede por que los campos estan vacios aunque no tienen nada que ver con el redireccionamiento.

mi pregunta:

Es posible hacer que estos botones mediante AJAX, creen un form diferente he ignoren el form padre al que pertenece. envien por POST sus name values para ser procesados ???

gracias por su ayuda.

[Alexis88]

Claro. Con un ejemplo se entenderá mejor.

Código HTML:

<button class = "enviar" value = 1>UNO</button>
<button class = "enviar" value = 2>DOS</button>
<button class = "enviar" value = 3>TRES</button>
 
<div id = "salida"></div>
 

Código Javascript:

var botones = document.getElementsByClassName("enviar"),
    total = botones.length,
    salida = document.getElementById("salida");
 
for (i = 0; i < total; i++) {
    botones[i].addEventListener("click", function(){
        var ajax = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP") || new ActiveXObject("Msxml2.XMLHTTP");
 
        ajax.open("POST", "ejemplo.php", true);
        ajax.onreadystatechange = function(){
            if (ajax.readyState == 4) {
                switch (ajax.status) {
                    case 200:
                        salida.innerHTML = ajax.responseText;    
                    break;
 
                    case 404:
                        salida.innerHTML = "La dirección brindada no existe";
                    break;
 
                    default:
                        salida.innerHTML = ajax.status;
                    break;
                }
            }    
        };
 
        ajax.send(this.value);
    }, false);
}
 

Cada vez que se pulse uno de los botones, se ejecutará la petición asíncrona (AJAX), enviando el valor del botón pulsado hacia ejemplo.php. La respuesta de dicha petición se mostrará en el Div de Id "salida".

Saludos

[arcanisgk122]

gracias amigo pero no se como implementar tu codigo en lo que necesito hacer.

el detalles esta en que no necesito re-escribir nada del DOM de forma asincrona...

necesito que un boton en un form hijo se ejecute ignorando al form padre y al final refreque la pagina neviado el valor del boton por POST

algo como

Código HTML:

<form padre>
    Contenido del Form campos required
    Boton 1 enviar form padre
    <form hijo>
        Boton 2 y boton 3 que ignoren el form padre en evento Onclick  refrescar y envia por POST valor numerico = 3
    </form>
</form>
 

Gracias por tu ayuda pero ando en el rumbo siquiente:

Código Javascript:

<input type="button" onClick="ignora form padre, refrescar y enviar por post variable visita=3";>
 

[Alexis88]

Te puse el ejemplo con Ajax porque dijiste esto:

Iniciado por arcanisgk122

Es posible hacer que estos botones mediante AJAX...

No me parece adecuado lo que buscas hacer, pues si ya tienes un botón en el formulario padre para realizar el envío de los datos, el formulario hijo está de más, debes tenerlo fuera del formulario padre y enviarlo por su cuenta.

Código HTML:

<form padre method = "post">
    Contenido del Form campos required
    Boton enviar form padre
</form>
 
<form hijo1 method = "post">
    <input oculto con valor 2 />
    Boton enviar form hijo 1
</form>
 
<form hijo2 method = "post">
    <input oculto con valor 3 />
    Boton enviar form hijo 2
</form>
 

Saludos

[arcanisgk122]

gracias tenias razon en algo y tube que separalo ya que por ajax no le encontr solucion lo que si tube que hacer fue ocultar en un Div el contenido del form y sus botones y hacer aparecer otro div con el boton que necesitaba... gracias de todas formas...

[Alexis88]

En realidad no era necesario que ocultes el form, bastaba con que el campo que contuviera el valor a enviar fuera de tipo hidden.

Código HTML:

<form method = "post">
    <input type = "hidden" name = "visita" value = "3" />
    <input type = "submit" value = "Enviar" />
</form>
 

Así es como se vería: http://jsbin.com/xixevage/1

Pero si dices que ya resolviste tu problema, pues enhorabuena.

Saludos

[arcanisgk122]

es lo mismo jajaja si le palico mendiante un scrip el hiden en ciertas ocaciones