Turn the results of an HTML form into HASH with Jquery and Javascript

Question

Turn the results of an HTML form into HASH with Jquery and Javascript

Asked 5 years, 11 months ago

Viewed 97 times

0

I’m trying to see the credit card hash informed to test with Moip, but my Javascript does not show me on screen, returns me [Object, Object], I would like to see the full hash to pass to Moip.

PS: The link to Moip’s sample credit cards is: https://dev.moip.com.br/docs/cartoes-de-credito-para-teste

Follow the example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action="">
        <input type="text" id="number">
        <input type="text" id="cvc">
        <input type="text" id="month">
        <input type="text" id="year">
        <input type="button" id="encrypt" value="Pagar">
    </form>

    <script src="http://assets.moip.com.br/v2/moip.min.js"></script>
    <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>

    <script>
        $(document).ready(function(){
            $('#encrypt').click(function() {
                var cc = new Moip.CreditCard({
                    number: $('#number').val(),
                    cvc: $('#cvc').val(),
                    expMonth: $('#month').val(),
                    expYear: $('#year').val(),
                    pubKey: `-----BEGIN PUBLIC KEY-----
MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAvUe2JrQN+L8ZFOCNQ41k
Adnrz2nEMPG/lJoeRJedrD9T7resZ8R6T2Uhq2A8R8yyrb7Lj/4VYFkHpzqqMmau
LQgXxS0lYkHDLYmYipBC+VYpm5Yu2E3JlDjjmjkhafF44PqXLb1SncXALohWit8F
G95evAuXc3/YcKBxhLX81qBVNzFFYR12ertYE7IFLv/RogqxaB62S4Ld4IfacKGF
g3qGUX8XteOXml/497tk6EDOZPZI2C7mGFVi0SctI2nzCk/5Q0vCHlMeYp0JhVQJ
jVgxaASQlr1GjNrUMNee28O4DQxktU9sldwLLlwYpAYKYgGkH505AbkLC3jAa9qp
swIDAQAB
-----END PUBLIC KEY-----`
                });

                if (cc.isValid()) {                    
                    $('#debug').text(cc.hash());
                    var verifica = $('#debug').text(cc.hash());
                    alert(verifica);
                } else {                    
                    console.log('Cartão Inválido');
                }
            });
        });    
    </script>

</body>
</html>

1 answer

Browser other questions tagged php javascript html jquery

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

by Leandro Angelo • **9,330** points · Answer 1 · 2018-07-26T15:45:45+00:00

First, you don’t have an element with the id "debug" in your html, and even if you did you should alert for your .val(), in the case of an input, or by .text(), in the case of a <div>, <span>, <p> and etc.

$(document).ready(function() {
  $('#encrypt').click(function() {
    var cc = new Moip.CreditCard({
      number: $('#number').val(),
      cvc: $('#cvc').val(),
      expMonth: $('#month').val(),
      expYear: $('#year').val(),
      pubKey: `-----BEGIN PUBLIC KEY-----
MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAvUe2JrQN+L8ZFOCNQ41k
Adnrz2nEMPG/lJoeRJedrD9T7resZ8R6T2Uhq2A8R8yyrb7Lj/4VYFkHpzqqMmau
LQgXxS0lYkHDLYmYipBC+VYpm5Yu2E3JlDjjmjkhafF44PqXLb1SncXALohWit8F
G95evAuXc3/YcKBxhLX81qBVNzFFYR12ertYE7IFLv/RogqxaB62S4Ld4IfacKGF
g3qGUX8XteOXml/497tk6EDOZPZI2C7mGFVi0SctI2nzCk/5Q0vCHlMeYp0JhVQJ
jVgxaASQlr1GjNrUMNee28O4DQxktU9sldwLLlwYpAYKYgGkH505AbkLC3jAa9qp
swIDAQAB
-----END PUBLIC KEY-----`
    });

    if (cc.isValid()) {
      var verifica = cc.hash();
      $('#debug').text(hash);      
      console.log(hash);
    } else {
      console.log('Cartão Inválido');
    }
  });
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <form action="">
    <input type="text" id="number" placeholder="Number">
    <input type="text" id="cvc" placeholder="CVC">
    <input type="text" id="month" placeholder="month">
    <input type="text" id="year" placeholder="year">
    <input type="button" id="encrypt" value="Pagar">
  </form> 
  <span id="debug"></span>
  <script src="http://assets.moip.com.br/v2/moip.min.js"></script>
  <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>