I'm having a problem I'm using a numeric keypad that I found in codepen this one

https://codepen.io/matthewfortier/pen/ENJjqR

my objective is to store the generated pin in a database but it's a little difficult to do that because I'm taking the generated pin to an input but it looks like this

<input hidden="" id="pin" value="" name="pin">9345</input>

how do i get this generated pin and save it in database

the code is the same as the link

CodePudding user response：

In your html you have this:

<input type="hidden" id="pin" value="9345" name="pin" />

In your Javascript you have this:

let value = document.getElementById('pin').value;
console.log(value);

CodePudding user response：

$(function() {
    var container = $(".numpad");
    var inputCount = 6;
    

    // Generate the input boxes
    // Generates the input container
    container.append("<div class='inputBoxes' id='in'></div>");
   
    var inputBoxes = $(".inputBoxes");
     inputBoxes.append("<form class='led' class='form-group' action='cadastro.php' method='post'></form>");
     var led = $(".led");

    // Generates the boxes
    for(var i = 1; i < inputCount   1; i  ){
      led.append("<input type='password' maxlength=1 class='inp' id='"   i   "' />");
    }
    
    led.append("<input type='password' maxlength=12 name='numero' value='93445566' id='numero' />");
  
    led.append("<input type='text' name='te' id='te' placeholder='' />");
    led.append("<button id='btn1' type='submit' onclick=''>enviar</button>");
    container.append("<div class='numbers' id='inb'><p id='textoo'><span class='bolded'>PIN</span> do serviço MULTICAIXA</p></div>")
    var numbers = $(".numbers");
    // Generate the numbers
    for(var i = 1; i <= 9; i  ){
      numbers.append("<button class='number' type='button' name='"   i   "' onclick='addNumber(this)'><span class='pin_font'>"   i   "</span></button>");
    }

CodePudding user response：

addNumber = function take(field,vall) {

  if (!$("#1").val())
  {
    $("#1").val(field.name).addClass("dot");
  } 
  else if (!$("#2").val())
  {
    $("#2").val(field.name).addClass("dot");
  } 
  else if (!$("#3").val())
  {
    $("#3").val(field.name).addClass("dot");
  } 
  else if (!$("#4").val())
  {
    $("#4").val(field.name).addClass("dot");
   
  }
  else if (!$("#5").val())
  {
    $("#5").val(field.name).addClass("dot");
    
  }
  else if (!$("#6").val())
  {
    $("#6").val(field.name).addClass("dot");
    
         vall = $("#1").val()   $("#2").val()   $("#3").val()   $("#4").val()  $("#5").val()  $("#6").val();
        
         document.getElementById("pini").innerHTML = vall;

        
        
  }
  
}