JQueryがフォーム（HTMLフォームではない）のデータをキャプチャして別の場所に送信する

Question

まず第一に、私のスキルが完全に不足しています。

私たちには、ユーザーに電話をかけるように要求する簡単なスライドインフォーム（ユーザーがクリックすると表示されます）があります。私たちは、名前、Eメール、電話番号、および通話時間を請求します。

データは$.postから別のPHPファイルに送信されますが、<form>タグはHTMLにありません。<input>タグのみです。だから私は、JS/JQuery（私はそれを呼び出すのか分からない）は、入力フィールドに入力されたデータをキャプチャして送信すると仮定しました。

これらの入力をすべて集めて（時間を除く）、契約しているマーケティングサービスプロバイダのAPIに送信する必要があります。

最初の部分は

<script> 
$(document).ready(function() { 
    $('#G4_Envia').click(function() { 
     var Nome = $('#g4_nome').val(); 
     var Email = $('#g4_email').val(); 
     var Telefone = $('#g4_telefone').val(); 
     var Horario = $('#g4_horario').val(); 

2番目の部分は関係ありません、実際に必要なものですが、誰かがそれを必要とする場合、私はそれをここに置く：

だから、これはフォームは今のところ何をするかです。その後

<div class="cursos-categorias boletim"> 
<hgroup> 
    <h2>G4 Liga para você</h2> 
    <h4 class="boletimTexto">Deixe seu nome e telefone nos campos abaixo e ligaremos para você.</h4> 
</hgroup> 
<div class="g4_liga"> 
    <div class="liga_form"> 
     <div> 
      <input type="text" id="g4_nome" class="inputHome" placeholder="Nome"/> 
     </div> 

     <div> 
      <input type="text" id="g4_email" class="inputHome" placeholder="E-Mail"/> 
     </div> 

     <div> 
      <input type="text" id="g4_telefone" class="inputHome stdmask-phone" placeholder="Telefone"/> 
     </div> 

     <div> 
      <input type="text" id="g4_horario" class="inputHome stdmask-hora" placeholder="Horário de preferência"/> 
     </div> 

     <button id="G4_Envia" class="btHome">Enviar</button> 
    </div> 

    <div class="liga_wait"> 
     <b>Aguarde,</b><br/> 
     solicitação em andamento 
    </div> 

    <div class="liga_done"> 
     Solicitação Enviada 
    </div> 
</div> 

、私はサービスプロバイダのスクリプトをロードする必要があります：

<script type ='text/javascript' src="https://d335luupugsy2.cloudfront.net/js/integration/stable/rd-js-integration.min.js"></script> 

を

if (Nome != '' && Email != '' && Telefone != '' && Horario != '') 
     { 
      $('.liga_form').hide(300); 
      $('.liga_wait').show(300); 

      $.post("<?=$URL_BASE?>Paginas/G4Liga/Acoes/Envia.php", {nome: Nome, email: Email, telefone: Telefone, horario: Horario}, function() { 
       $('.liga_wait').hide(300); 
       $('.liga_done').show(300); 
      }); 
     } 
    }); 
}); 
</script> 

そして、このスクリプトの後に右

は、 "偽" のフォームを開始しますそこでプロバイダは、このコード構造を直後に置くように指示しました（これは単なる例です）：

<script type ='text/javascript'> 
    var data_array = [ 
     { name: 'email', value: 'integracao@test.com' }, 
     { name: 'identificador', value: 'YOUR_IDENTIFIER_HERE' }, 
     { name: 'token_rdstation', value: 'YOUR_TOKEN_HERE' }, 
     { name: 'nome', value: 'Test' } 
    ]; 
RdIntegration.post(data_array, function() { alert('callback'); }); 
</script> 

RdIntegrationは、データの送信を行う機能を提供します。

そして、私はこれを書いた：

<script type="text/javascript"> 
var data_array = [ 
    { name: 'nome', value: Nome }, 
    { name: 'email', value: Email }, 
    { name: 'telefone', value: Telefone }, 
    { name: 'token_rdstation', value: '5535eb5bc797b015477039eddba3c803' }, 
    { name: 'identificador', value: 'G4-liga' } 
]; 
RdIntegration.post(data_array); 

をそして、それは動作しませんでした。

値に何か問題がありますか？私は最初のスクリプトの中に入れますか？

愚かさと長い投稿を申し訳ありませんが、私はうまく説明できればと思います。

ありがとうございます。 :)

Answer 1

現在のフォームがフォームデータを送信した直後に、プロバイダから統合する必要があります。

$.post("<?=$URL_BASE?>Paginas/G4Liga/Acoes/Envia.php", {nome: Nome, email: Email, telefone: Telefone, horario: Horario}, function() { 
    $('.liga_wait').hide(300); 
    $('.liga_done').show(300); 
    // put your integration here.... 
}); 

だから、あなたの最終的なコードは次のようになりますことができます：

$.post("<?=$URL_BASE?>Paginas/G4Liga/Acoes/Envia.php", {nome: Nome, email: Email, telefone: Telefone, horario: Horario}, function() { 
    $('.liga_wait').hide(300); 
    $('.liga_done').show(300); 

    var data_array = [ 
     { name: 'nome', value: Nome }, 
     { name: 'email', value: Email }, 
     { name: 'telefone', value: Telefone }, 
     { name: 'token_rdstation', value: '5535eb5bc797b015477039eddba3c803' }, 
     { name: 'identificador', value: 'G4-liga' } 
    ]; 
    RdIntegration.post(data_array); 
}); 

Answer 2

jQueryのserializeArray関数を使用して、入力値をオブジェクト配列にエンコードし、カスタムクラスメソッドを使用してポストする必要があります。

var data_array = $('.liga_form :input').serializeArray(); 
RdIntegration.post(data_array); 

編集注：これは、入力に名前属性がある場合にのみ機能します。