2016-07-08 15 views
0

アイテムのチェックボックスを含むカスタムフォームを作成しました。ユーザーがチェックボックスをオンにすると、総額が表示され、名前、電子メール、住所、メッセージの重力フォームも表示されます。 ユーザーがカスタムフォームと重力フォームを記入して、重力フォームのセクションに合計額と書式で記入された項目を含む電子メールを受信したいとします。重力の形で問題はありません。私は、重力フォームのセクションのメールを受信できますが、私はチェックされているアイテムを知りたいと重力フォームフォームの値を非表示の重力フォームに送信

Heres the custom form that i have made

によって送信されているのと同じ電子メールでも総和が値を解析するためにとにかくあり、私の隠された重力のフォームにカスタムメイドのフォーム?重力から私にメールを送るほうがはるかに良いでしょう。 ローカルホストにすべてのファイルがあるので、サイトへのリンクはできませんが、フォームを見ることができます。私はそれに使用している

のJsがある場合、私は隠しフィールドの合計がチェックされた項目と合計 HTML形式の値を取得する必要があり

var inputs = document.getElementsByClassName('immer'), 
     total = document.getElementById('immer-total'); 

for (var i=0; i < inputs.length; i++) { 
     inputs[i].onchange = function() { 
      var add = this.value * (this.checked ? 1 : -1); 
      total.innerHTML = parseFloat(total.innerHTML) + add 
     } 
    } 

var dazuinputs = document.getElementsByClassName('dazu'), 
     totalDazu = document.getElementById('dazu-total'); 
for (var i=0; i < dazuinputs.length; i++) { 
     dazuinputs[i].onchange = function() { 
      var add = this.value * (this.checked ? 1 : -1); 
      totalDazu.innerHTML = parseFloat(totalDazu.innerHTML) + add 
     } 
    }  

<input name="input_6" id="input_1_6" type="hidden" class="gform_hidden" aria-invalid="false" value="template-calculator"> 

ですユーザーがサブミットボタンをクリックしている間に#immer-totalの値を隠しフィールド名input_6に取得する方法。

いくつかの研究の後、私はJS

var counter = 0; 
    $('.gform_button').click(function(event){ 
    event.preventDefault(); 
    counter++; 

    ... 
    $('#immer-total').attr('input_3', counter); 
    } 

を得たが、結果を得ませんでした。

+0

あなたのカスタムフォームのセッションやクッキーにデータを保存することができ、その後、適切な方法WordPressのフックアクションを使用して隠しフィールドを埋めますあなたのフォームの値で隠しフィールドを埋めるためにjavascriptを使用してフィルタまたは高速メソッド –

答えて

3

jQueryが本当にお手伝いします。あなたの隠されたフィールドの値にその数を設定することができます

counter = $('input:checkbox:checked').length 

その後:

$('#input_1_6').val(counter) 

それが良いでしょう、あなたが必要なときだけ、それらを数える - 代わりの誰かがそれをクリックするたびに入力を数えますフォームが送信されたときに実行します。

$(function() { 
    $('#frm1').submit(function() { 
     counter = $('input:checkbox:checked').length; 
     alert('Total number of checked checkboxes: '+counter); 
     $('#input_1_6').val(counter); 
    }); 
}); 

注 - あなたがないではないを提供されたリンクには<form>タグがあり、非表示の入力フィールドはありません。ここで

あなたのコードに基づいて実施例である:

$(function() { 
 
     $('#frm1').submit(function() { 
 
      counter = $('input:checkbox:checked').length; 
 
      alert('Total number of checked checkboxes: '+counter); 
 
      $('#input_1_6').val(counter); 
 
     }); 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="frm1" action="" method="post"> 
 
    <section id="template-calculator-wrap"> 
 
\t <div class="calculator-margin"> 
 
\t \t <h1>Paket-Konfigurator für Ihren Hotel oder Restaurant Webauftritt</h1> 
 
\t \t <div class="red-bar"></div> 
 
\t \t <h2>We create a unique process for each client to ensure that business objectives are met, success is achieved and users are happy.</h2> 
 

 
\t \t <div class="calculator-total-wrap"> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-md-6 col-sm-6 col-xs-6 calc-total1"> 
 
\t \t \t \t \t <h1><span>CHF</span> 4’850.-</h1> 
 
\t \t \t \t \t <h3>Erstellung einmalig</h3> 
 
\t \t \t \t </div> 
 

 
\t \t \t \t <div class="col-md-6 col-sm-6 col-xs-6 calc-total2"> 
 
\t \t \t \t \t <h1><span>CHF</span> 2’975.-</h1> 
 
\t \t \t \t \t <h3>Unterhalt jährlich</h3> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="row"> 
 
\t \t \t <div class="col-md-6 col-sm-6"> 
 
\t \t \t \t <div class="price-col-title-wrap"> 
 
\t \t \t \t \t <h4>Immer enthalten</h4> 
 
\t \t \t \t \t <h3><span>CHF</span> <span id="immer-total">0</span>.-</h3> 
 
\t \t \t \t \t <input type="checkbox" id="c1" class="immer" value="50" name="cc" onclick="return false" checked=""> 
 
\t \t \t \t  <label for="c1"><span> </span> Installation Wordpress</label> <br> 
 
\t \t \t \t  
 
\t \t \t \t  <input type="checkbox" id="c2" class="immer" value="50" name="cc"> 
 
\t \t \t \t  <label for="c2"><span> </span> Basis SEO und Dynamic Sitemap</label> <br> 
 

 
\t \t \t \t  <input type="checkbox" id="c3" class="immer" value="50" name="cc"> 
 
\t \t \t \t  <label for="c3"><span> </span> Adresse, Öffungszeiten, Telefon mit Call-Funktion für mobil</label> <br> 
 

 
\t \t \t \t  <input type="checkbox" id="c4" class="immer" value="50" name="cc"> 
 
\t \t \t \t  <label for="c4"><span> </span> Seite für Datenschutz und Impressum</label> <br> 
 

 
\t \t \t \t  <input type="checkbox" id="c5" class="immer" value="50" name="cc"> 
 
\t \t \t \t  <label for="c5"><span> </span> Social Media Follow (FB, G+, Twitter)</label> <br> 
 

 
\t \t \t \t  <input type="checkbox" id="c6" class="immer" value="50" name="cc"> 
 
\t \t \t \t  <label for="c6"><span> </span> Kontaktformular + Google Map API</label> <br> 
 
\t \t  </div> 
 

 
\t \t  <div class="price-col-title-wrap"> 
 
\t \t \t \t \t <h4>Dazu Module für Funktionalität</h4> 
 
\t \t \t \t \t <h3><span>CHF</span> <span id="dazu-total">0</span>.-</h3> 
 
\t \t \t \t \t <input value="50" class="dazu" type="checkbox" id="d1" name="cc"> 
 
\t \t \t \t  <label for="d1"><span> </span> Installation Wordpress</label> <br> 
 
\t \t \t \t  
 
\t \t \t \t  <input value="50" class="dazu" type="checkbox" id="d2" name="cc"> 
 
\t \t \t \t  <label for="d2"><span> </span> Basis SEO und Dynamic Sitemap</label> <br> 
 

 
\t \t \t \t  <input value="50" class="dazu" type="checkbox" id="d3" name="cc"> 
 
\t \t \t \t  <label for="d3"><span> </span> Adresse, Öffungszeiten, Telefon mit Call-Funktion für mobil</label> <br> 
 

 
\t \t \t \t  <input value="50" class="dazu" type="checkbox" id="d4" name="cc"> 
 
\t \t \t \t  <label for="d4"><span> </span> Seite für Datenschutz und Impressum</label> <br> 
 

 
\t \t \t \t  <input value="50" class="dazu" type="checkbox" id="d5" name="cc"> 
 
\t \t \t \t  <label for="d5"><span> </span> Social Media Follow (FB, G+, Twitter)</label> <br> 
 

 
\t \t \t \t  <input class="dazu" type="checkbox" id="c6" name="cc"> 
 
\t \t \t \t  <label for="c6"><span> </span> Kontaktformular + Google Map API</label> <br> 
 

 
\t \t \t \t  <input class="dazu" type="checkbox" id="c1" name="cc"> 
 
\t \t \t \t  <label for="c1"><span> </span> Installation Wordpress</label> <br> 
 
\t \t \t \t  
 
\t \t \t \t  <input class="dazu" type="checkbox" id="c2" name="cc"> 
 
\t \t \t \t  <label for="c2"><span> </span> Basis SEO und Dynamic Sitemap</label> <br> 
 

 
\t \t \t \t  <input class="dazu" type="checkbox" id="c3" name="cc"> 
 
\t \t \t \t  <label for="c3"><span> </span> Adresse, Öffungszeiten, Telefon mit Call-Funktion für mobil</label> <br> 
 

 
\t \t \t \t  <input class="dazu" type="checkbox" id="c4" name="cc"> 
 
\t \t \t \t  <label for="c4"><span> </span> Seite für Datenschutz und Impressum</label> <br> 
 

 
\t \t \t \t  <input class="dazu" type="checkbox" id="c5" name="cc"> 
 
\t \t \t \t  <label for="c5"><span> </span> Social Media Follow (FB, G+, Twitter)</label> <br> 
 

 
\t \t \t \t  <input class="dazu" type="checkbox" id="c6" name="cc"> 
 
\t \t \t \t  <label for="c6"><span> </span> Kontaktformular + Google Map API</label> <br> 
 

 
\t \t \t \t  <input class="dazu" type="checkbox" id="c1" name="cc"> 
 
\t \t \t \t  <label for="c1"><span> </span> Installation Wordpress</label> <br> 
 
\t \t \t \t  
 
\t \t \t \t  <input class="dazu" type="checkbox" id="c2" name="cc"> 
 
\t \t \t \t  <label for="c2"><span> </span> Basis SEO und Dynamic Sitemap</label> <br> 
 

 
\t \t \t \t  <input class="dazu" type="checkbox" id="c3" name="cc"> 
 
\t \t \t \t  <label for="c3"><span> </span> Adresse, Öffungszeiten, Telefon mit Call-Funktion für mobil</label> <br> 
 

 
\t \t \t \t  <input class="dazu" type="checkbox" id="c4" name="cc"> 
 
\t \t \t \t  <label for="c4"><span> </span> Seite für Datenschutz und Impressum</label> <br> 
 

 

 
\t \t \t \t  <input class="dazu" type="checkbox" id="c6" name="cc"> 
 
\t \t \t \t  <label for="c6"><span> </span> Kontaktformular + Google Map API</label> <br> 
 
\t \t  </div> 
 

 
\t  </div> 
 

 
\t  <div class="col-md-6 col-sm-6"> 
 
\t \t \t \t <div class="price-col-title-wrap"> 
 
\t \t \t \t \t <h4>Immer enthalten</h4> 
 
\t \t \t \t \t <h3><span>CHF</span> 1’600.-</h3> 
 
\t \t \t \t \t <input type="checkbox" id="c1" name="cc"> 
 
\t \t \t \t  <label for="c1"><span> </span> Installation Wordpress</label> <br> 
 
\t \t \t \t  
 
\t \t \t \t  <input type="checkbox" id="c2" name="cc"> 
 
\t \t \t \t  <label for="c2"><span> </span> Basis SEO und Dynamic Sitemap</label> <br> 
 

 
\t \t \t \t  <input type="checkbox" id="c3" name="cc"> 
 
\t \t \t \t  <label for="c3"><span> </span> Adresse, Öffungszeiten, Telefon mit Call-Funktion für mobil</label> <br> 
 

 
\t \t \t \t  <input type="checkbox" id="c4" name="cc"> 
 
\t \t \t \t  <label for="c4"><span> </span> Seite für Datenschutz und Impressum</label> <br> 
 

 
\t \t \t \t  <input type="checkbox" id="c5" name="cc"> 
 
\t \t \t \t  <label for="c5"><span> </span> Social Media Follow (FB, G+, Twitter)</label> <br> 
 

 
\t \t \t \t  <input type="checkbox" id="c6" name="radio"> 
 
\t \t \t \t  <label for="c6"><span> </span> Kontaktformular + Google Map API</label> <br> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <label>Design-Anpassungen Paket </label><br> 
 
\t \t \t \t  <input type="radio" id="R1" name="cc"> 
 
\t \t \t \t  <label for="R1" class="radio-padding-right"><span> </span> 8 Stunden</label> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <input type="radio" id="R2" name="cc"> 
 
\t \t \t \t  <label for="R2"><span> </span> 12 Stunden</label> <br> 
 
\t \t  </div> 
 

 
\t \t  <div class="price-col-title-wrap"> 
 
\t \t \t \t \t <h4>Dazu Module für Content</h4> 
 
\t \t \t \t \t <h3><span>CHF</span> 1’600.-</h3> 
 

 
\t \t \t \t \t <label>Design-Anpassungen Paket </label><br> 
 
\t \t \t \t   <div class="numbers-row"> 
 
\t \t \t \t \t   <!-- <label for="name">French Hens</label> <br/> --> 
 
\t \t \t \t \t   <div class="dec button">-</div> 
 
\t \t \t \t \t   <input type="text" name="french-hens" id="french-hens" value="11"> 
 
\t \t \t \t \t   <div class="inc button">+</div> 
 
\t \t \t    </div> 
 
\t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t 
 
\t \t \t \t \t <input type="checkbox" id="c5" name="cc"> 
 
\t \t \t \t  <label for="c5"><span> </span> Social Media Follow (FB, G+, Twitter)</label> <br> 
 

 
\t \t \t \t  <label>Design-Anpassungen Paket </label><br> 
 
\t \t \t \t  <input type="radio" id="R4" name="cc"> 
 
\t \t \t \t  <label for="R4" class="radio-padding-right"><span> </span> 8 Stunden</label> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <input type="radio" id="R5" name="cc"> 
 
\t \t \t \t  <label for="R5" class="radio-padding-right"><span> </span> 12 Stunden</label> 
 

 
\t \t \t \t  <input type="radio" id="R3" name="cc"> 
 
\t \t \t \t  <label for="R3"><span> </span> 12 Stunden</label> <br> 
 

 
\t \t \t \t  <label>Design-Anpassungen Paket </label><br> 
 
\t \t \t \t  <input type="radio" id="R4" name="cc"> 
 
\t \t \t \t  <label for="R4" class="radio-padding-right"><span> </span> 8 Stunden</label> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <input type="radio" id="R5" name="cc"> 
 
\t \t \t \t  <label for="R5" class="radio-padding-right"><span> </span> 12 Stunden</label> 
 

 
\t \t \t \t  <input type="radio" id="R3" name="cc"> 
 
\t \t \t \t  <label for="R3"><span> </span> 12 Stunden</label> <br> 
 

 
\t \t \t \t  <label>Design-Anpassungen Paket </label><br> 
 
\t \t \t \t  <input type="radio" id="R4" name="cc"> 
 
\t \t \t \t  <label for="R4" class="radio-padding-right"><span> </span> 8 Stunden</label> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <input type="radio" id="R5" name="cc"> 
 
\t \t \t \t  <label for="R5" class="radio-padding-right"><span> </span> 12 Stunden</label> 
 

 
\t \t \t \t  <input type="radio" id="R3" name="cc"> 
 
\t \t \t \t  <label for="R3"><span> </span> 12 Stunden</label> <br> 
 
\t \t  </div> 
 
\t \t \t \t 
 
\t  
 

 
\t  </div> 
 

 
\t  </div> 
 

 
\t \t \t <!-- gravity form here --> 
 

 
    \t </div> <!-- end calculator-margin div --> 
 
\t 
 

 
</section> 
 
<input name="input_6" id="input_1_6" type="hidden" class="gform_hidden" aria-invalid="false" value="template-calculator"> 
 
    <input type="submit" name="submit" value="submit" /> 
 
</form>

+0

私は試して、これまでの結果を得たhttps://jsfiddle.net/sus_hill/wx2dmLkn/12/ –

+0

あなたが何をしたのか分からなかった米国私の例のコードのいずれか。 – Dekel

+0

私は最初にカスタムテキストエリアのチェックボックスから値とデータ属性を取得しようとしています。これらの値を取得した後、私はそれらの値を秘密の重力フォーム –

関連する問題