How to transform pin code into PHP variable?

Asked

Viewed 30 times

0

It’s an automated keyboard that once I type the 6 digits it executes the form taking the numbers typed in a php variable to another page, but when I click on the first number it already executes the form..

<form id="Form" action="action.php" method="post">

      <div id="fields">
        <div class="grid">
          <div contenteditable="true" name="textBox" class="grid__col grid__col--1-of-6 numberfield"><span></span></div>
          <div contenteditable="true" name="textBox" class="grid__col grid__col--1-of-6 numberfield"><span></span></div>
          <div contenteditable="true" name="textBox" class="grid__col grid__col--1-of-6 numberfield"><span></span></div>
          <div contenteditable="true" name="textBox" class="grid__col grid__col--1-of-6 numberfield"><span></span></div>
          <div contenteditable="true" name="textBox" class="grid__col grid__col--1-of-6 numberfield"><span></span></div>
          <div contenteditable="true" name="textBox" class="grid__col grid__col--1-of-6 numberfield"><span></span></div>
        </div>
      </div>

      <div id="numbers">
        <div class="grid">
          <div class="grid__col grid__col--1-of-3"><button>1</button></div>
          <div class="grid__col grid__col--1-of-3"><button>2</button></div>
          <div class="grid__col grid__col--1-of-3"><button>3</button></div>
          <div class="grid__col grid__col--1-of-3"><button>4</button></div>
          <div class="grid__col grid__col--1-of-3"><button>5</button></div>
          <div class="grid__col grid__col--1-of-3"><button>6</button></div>
          <div class="grid__col grid__col--1-of-3"><button>7</button></div>
          <div class="grid__col grid__col--1-of-3"><button>8</button></div>
          <div class="grid__col grid__col--1-of-3"><button>9</button></div>
          <div class="grid__col grid__col--1-of-3"></div>
          <div class="grid__col grid__col--1-of-3"><button>0</button></div>
          <div class="grid__col grid__col--1-of-3"></div>
        </div>
      </div>
    </form>
  </div>
</div>


jQuery(document).ready(function($) {
  $(document).ready(function() {

    var enterCode = "";
    enterCode.toString();

    $("#numbers button").click(function() {

      var clickedNumber = $(this).text().toString();
      enterCode = enterCode + clickedNumber;
      var lengthCode = parseInt(enterCode.length);
      lengthCode--;
      $("#fields .numberfield:eq(" + lengthCode + ")").addClass("active");

    });
  });
});


$(function() {
  $('#textBox').bind('change keyup', function() {
    if ($(this).val().length >= 6) {
      $('#Form').submit();
    }
  })

});
javascript html

  • already its click Function, passes to it the event: $("#numbers button").click(function(event) { and and within the method cancel the event to avoid Submit with the command event.preventDefault();. See if you solve, want I can post a reply explaining

  • Please, I’m a beginner if you could make an example would be really good @Ricardopunctual

  • I can do it, but in the meantime test those changes I commented on

  • beauty, I will test, but I wanted to take the value too and send it as variable php in the form for action.php

  • I tested it and it still continues, when I click it makes the Submit

  • take a look at this example with your code, it does not Ubmit by clicking the https://jsfiddle.net/c2tp4hmsbuttons/

  • But there in the div grid, I type 6 numbers until he runs the Ubmit, that’s what I wanted, and take these numbers typed in a variable for the next page

Show 2 more comments

1 answer

1

the default tag button, is to be type=Submit, change to type button:

<button type="button">1</button>

so the form will not be sent by clicking the button.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.