jQuery Form Serialize does not work

Asked

Viewed 108 times

0

I got the following jQuery

function doPay(event){
    console.log('submetendo pagamento....');
    event.preventDefault();
    if(!doSubmit){
        var $form = document.querySelector('#pay');

        console.log('criando token....');

        var dados = JSON.stringify( $form.serializeArray() );
        console.log(dados);


       // window.Mercadopago.createToken($form, sdkResponseHandler);

        return false;
    }
};

But when sending the form, I cannot report it to the console. The following mercadopago.js:110 Uncaught TypeError: $form.serializeArray is not a function

HTML

<form id="pay" name="pay" action="<?php echo base_url('inicial/validartransascao'); ?>" enctype="multipart/form-data">
 <div class="column three-fifth">
        <h6 style="">Vamos começar?</h6>
    </div>      
    <div class="column one">
        <select class="form-control" style="width: 100% !important;" id="transaction_amount" name="transaction_amount">
            <option value="21.9">BLUE TV 30 DIAS - R$ 21,90</option>
            <option value="61.90">BLUE TV 90 DIAS - R$ 61,90</option>
            <option value="169.90">BLUE TV ANUAL - R$ 169,90</option>
        </select>
    </div>

    <div id="retornos">
        <div id="cardType"></div>
    </div>
    
    <div class="column one">
        <input placeholder="Nome Completo" type="text" id="cardholderName" data-checkout="cardholderName" size="40" aria-required="true" aria-invalid="false" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off />
    </div>
    <!--
    <div class="column one-second">
      <input placeholder="Sobrenome" type="text" name="sobrenome" id="sobrenome" size="40" aria-invalid="false" />                                                            
    </div>
    -->
    <div class="column one-second">
        <input placeholder="Telefone" type="text" name="telefone" id="telefone" style="width:100%;" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off aria-invalid="false"/>
    </div>
     <div class="column one-second">
        <input placeholder="E-mail" type="email" name="email" id="email" size="40" aria-required="true" aria-invalid="false" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off />
    </div>

    <div class="column one">
        <input placeholder="Número do Cartão" type="text" id="cardNumber" data-checkout="cardNumber" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off  size="40" aria-required="true" aria-invalid="false" />
    </div>

    <div class="column one-third">
        <input placeholder="Mês" type="text" id="cardExpirationMonth" data-checkout="cardExpirationMonth" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off aria-invalid="false"/>
    </div>

    <div class="column one-third">
        <input placeholder="Ano" type="text" id="cardExpirationYear" data-checkout="cardExpirationYear" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off aria-invalid="false"/>
    </div>
    
    <div class="column one-third">
        <input placeholder="CVV" type="text" id="securityCode" data-checkout="securityCode" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off  size="40" aria-required="true" aria-invalid="false" />
    </div>

    <div class="column one">
        <select id="installments" class="form-control" name="installments" placeholder="Parcelas"></select>
    </div>    

    <input type="hidden" name="payment_method_id" id="payment_method_id"/>

    <div class="column one">
        <input type="submit" value="Pagar"/>
        <!--<input type="submit" value="Receber meu código AGORA!" id="submit">-->
    </div>
</form>

The library I’m using as a reference is Mercadopago’s:

https://github.com/MercadoPagoDevelopers/api-frontend-sample/

jquery

1 answer

1

  • That way, it says that my $form does not exist.. Alleys, the "$" is not valid as an argument

  • Then try jQuery instead of $, if the same error then jQuery library is missing

Browser other questions tagged jquery

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