Home / Questions / 506190
Accepted
ALDO56
Asked: 2022-05-28 09:57:54 +0800 CST 2022-05-28 09:57:54 +0800 CST

How to get a value from the database with onclick and then send via post doing submit?

  • 772

I have a form in php which obtains a value from the database when clicking on the confirm button the button has a value which sends it to the showcustomer function so that through that value it obtains a data through the onclick event this showcustomer function returns a value in a txtHint div and at the same time does submit and should send the value to the form output.php which should receive the value that txtHint has that contains the variable of the return text field td4 the problem I have is that the output form appears in null, I have realized that if I change the type of button to button it gets the value but I don't know how to send doing onclick and submit at the same time 

 <!DOCTYPE html>

<html>

<style>

table,th,td {

  border : 1px solid black;

  border-collapse: collapse;
}
th,td {
  padding: 5px;

}
</style>
<body>

<h1>Obtener Datos</h1>

<form action="salida.php" method="post" id="myform" name="myform"> 


<button   onclick="showCustomer(this.value)" type="submit" name="submit" id="submit"  

value="1" class="btn btn-lg" style="background-color:#6820c6 !important; color:#ffffff 

!important;">Confirmar</button>

<div   class="input-group input-group-lg m-b-10 col-lg-4">


<p type="text" id="txtHint"> </p>

</div>

</form>

<script>

function showCustomer(str) {
 
  var xhttp; 
   
  if (str == "") {

    document.getElementById("txtHint").innerHTML = "";
    return;
  }

  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("txtHint").innerHTML = this.responseText;
    }
  };

  xhttp.open("GET", "getcta2.php?codigo="+str, true);
  xhttp.send().submit();

}

</script>

</body>

</html>


este el el archivo get2.php el cual retorna un valor en un campo de texto y lo regresa a la función 

<?php

error_reporting(0);

    if(!isset($_SESSION)){ 

        session_start(); 

    }
    
    ob_start();

    
    require '../class/function/curl_api.php';


    require '../class/function/function.php';

    $codigo  = trim($_GET['codigo']);

  
  
    $dataJSON = json_encode(
        array(
            'codigo'            => $codigo
          
        ));
        
if (isset($_GET['codigo'])) {
    $codigo = $_GET['codigo'];

 
    $solicitudJSON2 = get_curl('operacion/obtenercuentas/' . $codigo);


}

if ($solicitudJSON2 != null || $solicitudJSON2 != "") {


  foreach ($solicitudJSON2['data'] as $key => $value) {


    if (isset($value['codigo'])) {
?>

<?php
    }
  }
}


if($solicitudJSON2 = json_encode($solicitudJSON2)) {
 
}

echo "<input type='text' id='td4' name='td4' value='" . $value['CUENTA'] . "'>" . $value['CUENTA'] . "</input>";

if($solicitudJSON2 = json_encode($solicitudJSON2)) {
  error_reporting(0);
}
  
?>

this is the output form which should receive the value that the get2.php file had returned through the function

<?php
  $myboxes = $_POST['td4'];

 var_dump($myboxes)
?>

javascript

1 Answers

  1. Best Answer

    The method .submit()is a form method, but you are using it in the AJAX request xhttp.send().submit();, you will surely get an error in the browser console.

    To fix it, just leave xhttp.send();and, when the request is successful, apply the method to the form to send it.

    <!DOCTYPE html>

<html>

<style>

table,th,td {

  border : 1px solid black;

  border-collapse: collapse;
}
th,td {
  padding: 5px;

}
</style>
<body>

<h1>Obtener Datos</h1>

<form action="salida.php" method="post" id="myform" name="myform"> 


<button onclick="showCustomer(this.value)" type="button" name="submit" value="1" class="btn btn-lg" style="background-color:#6820c6 !important; color:#ffffff 

!important;">Confirmar</button>

<div   class="input-group input-group-lg m-b-10 col-lg-4">


<p type="text" id="txtHint"> </p>

</div>

</form>

<script>

function showCustomer(str) {
  var xhttp; 
  if(str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  }

  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("txtHint").innerHTML = this.responseText;
      // Enviar formulario
      document.getElementById('myform').submit();
    }
  };

  xhttp.open("GET", "getcta2.php?codigo="+str, true);
  xhttp.send();
}
</script>
</body>
</html>

    Note: Remove id="submit"from the button to prevent it from interfering with or overriding the .submit()form method. I can't find the documentation, but Javascript automatically creates variables for elements that have IDs defined and so using reserved words or function/method names for this attribute is not recommended.

    Example:

    // Se puede acceder sin usar document.getElementById() o similares
console.log(campo.value);
// El botón sobrescribe el método submit
console.log(formulario1.submit);
// El segundo formulario conserva el método submit
console.log(formulario2.submit);
    <form id="formulario1">
    <input id="campo" value="Lorem ipsum">
    <button id="submit">Enviar</button>
</form>

<form id="formulario2">
    <input id="otro_campo" value="Lorem ipsum 2">
    <button id="btn_submit">Enviar</button>
</form>

    • 0