HTML call a form from another form on the same page

1
 <form name="update" action="" method="post">
    Nombre de Usuario
    <input name="txtbus" type="text">
    <input name="btn1" value="Buscar" type="submit">
</form>
<form class="contacto" name='contacto' method="POST" action="">
        <div><etiqueta>Nombre de Usuario:</etiqueta><input type='text' id="usuario" name="usuario"></div>
        <div><etiqueta>Empleado:</etiqueta><input type='text' id="nombre" name="nombre" ></div>
        <div>
            <a id="botoneditarusuario" class="button green" ><i class="fa fa-save"></i> Aceptar</a>
            <a id="cancelbuscar" class="button delete" type="reset">Cancelar</a>
        </div>  
</form>

The question is: can I call the form contacto by clicking on the submit of the form update ?

    
asked by HGarcia 06.11.2017 в 18:48
source

2 answers

1

If I have not misunderstood the query, since you do not put more code apart from the HTML nor explain the complete operation, you want to show the second form since it is hidden at first.

You can do the following:

  

HTML

I have modified it by adding ID's to the forms to handle them in a simple way, adding an action to the form that will call the script where you validate that it exists. I have also removed the <etiqueta> TEXTO </etiqueta> tag that surrounded the texts, as it is not valid. I've also added a <div> responses to display messages.

<form name="update" action="script.php" method="post" id="updateU">
    Nombre de Usuario
    <input name="txtbus" type="text">
    <input name="btn1" value="Buscar" type="submit">
</form>
<form class="contacto" name='contacto' id="contactoU" method="POST" action="" style="display: none;">
    <div>Nombre de Usuario:<input type='text' id="usuario" name="usuario"></div>
    <div>Empleado:<input type='text' id="nombre" name="nombre" ></div>
    <div>
        <button id="botoneditarusuario" class="button green" ><i class="fa fa-save"></i> Aceptar</button>
        <button id="cancelbuscar" class="button delete" type="reset">Cancelar</button>
    </div>  
</form>
<div id="respuestas"></div>
  

JQuery

I have rewritten the code that I put to you, making use of Ajax to make the first request you are looking for if your user exists in the DB and collects the data.

$("#updateU").submit(function(e){
    e.preventDefault();

    var datos = $(this).serialize();
    $.ajax({
        data: datos,
        url: $(this).attr('action'),
        type: 'POST',
        beforeSend: function(){
            $('#respuestas').html(''); //Reseteamos el contenido de respuestas.
        },
        success: function(res){
            if(res){
                var resData = JSON.parse(res);

                $('#usuario').val(resData[0]);
                $('#nombre').val(resData[1]);
                $("#contactoU").show();
            } 
            else $('#respuestas').html('Usuario no encontrado.');
        }
    });
});
  

PHP

I have simply created a PHP to be able to perform my tests, as you had covered is a simple PHP that neither connects nor applies security or anything. Just keep in mind that to make it simple to handle the response that arrives through AJAX, we return the data in JSON format.

<?php
//Como el usuario indica que tiene el php cubierto, no se realizan comprobaciones de seguridad etc.
$busqueda = $_POST['txtbus'];

//Falseamos la consulta a DB etc para un ejemplo sencillo
$usuarios = array('jonilgz' => 'Jonatan', 'hgarcia' => 'H?');
if(array_key_exists($busqueda, $usuarios)){
    $res = array($busqueda, $usuarios[$busqueda]);
    echo json_encode($res);  
}else echo false;

With this you will have a basis to start from it, then you have to work on the second form to send data and others.

I hope it serves you, Regards.

    
answered by 07.11.2017 в 10:35
0

With the form attribute of the input button you can do it, without javascript.

<form name="update" id="frmUpdate" action="" method="post">
    Nombre de Usuario
    <input name="txtbus" type="text" required="required">
    <input name="btn1" value="Buscar" type="submit">
</form>
<form class="contacto" name='contacto' id="frmcontacto" method="POST" action="">
        <div><etiqueta>Nombre de Usuario:</etiqueta><input type='text' id="usuario" name="usuario"></div>
        <div><etiqueta>Empleado:</etiqueta><input type='text' id="nombre" name="nombre" ></div>
        <div>
            <button type="submit" form = "frmUpdate" id="botoneditarusuario" class="button green" ><i class="fa fa-save"></i> Aceptar</button>
            <button type="clear" id="cancelbuscar" class="button delete" type="reset">Cancelar</button>
        </div>  
</form>
    
answered by 24.11.2018 в 15:11