0

ユーザーが選択オプションからメニューを選択しているときに、動的フォームを作成しています。select 要素からオプションを選択した後、必要な要素を含むフォームを生成します。すべて正常に動作します。

すべてが完了したら、from を別の関数に送信して検証します。検証関数では、$.each関数を使用してフォームから要素を取得しています。

問題は、最初に「慰められた」フォームを1回取得し、2回目は新しいフォームを2回（ただし同じ形式で）「慰められ」、3番目のフォームを機能させて各ループに入れてコンソールに送信することです。 、私は同じ第3形態を3回慰めています...

最初のフォームを1回、2番目のフォームを2回、3回を1回から3回処理するようにコンソールまたはチェックしたくありません。

この問題を解決するにはどうすればよいですか?

問題が発生している場所に関数を配置しました。完全な機能が必要な場合は、提供させてください。

var validateForm = function(form){
     console.log('hi')
     var  submit = form.find(':submit'),
          text = form.find(':text'),
          select = form.find('select'),
          checkBox = form.find('checkbox'),
          file = form.find(':file'),
          textarea = form.find('textarea');

          console.log(form.length);

     form.on('click', function(event){

          console.log(event.target);

          for(i=0;i<form.length;i++){
               console.log($(this),i);     
          }
          return false;
     })
}

それぞれ 2 回目、またはこのような for ループ コンソール (2 回):

<input id="salesSubmit" type="submit" value="Send" name="salesSubmit">
ecomNation.js (line 16)

Object[fieldset]0

ecomNation.js (line 19)
<input id="salesSubmit" type="submit" value="Send" name="salesSubmit">
ecomNation.js (line 16)

Object[fieldset] 0

ここで何が問題なのですか？どうすればこれを修正できますか?

私の機能全体（99％）はここにあります：

var validateForm = function(form){
     console.log('hi')
     var  submit = form.find(':submit'),
          text = form.find(':text'),
          select = form.find('select'),
          checkBox = form.find(':checkbox'),
          file = form.find(':file'),
          textarea = form.find('textarea');

          console.log(form.length);

          form.on('click', function(event){

      console.log(event.target);

      for(i=0;i<form.length;i++){
           console.log($(this),i);     
      }
      return false;
 })

}

var enquireyForm = function(option,form){

     var  contactForm = $('#contactForm'),
          fieldSet = contactForm.find('fieldset:last'),
          postUrl = '';

     var generateForm = function(fields){

          var optionalForm = "";

          $.each(fields, function(i,field){
               optionalForm += field.label ? "<label>"+field.label+"</label>" : '',
               optionalForm += field.type === 'text' ? '<input id='+field.id+' name='+field.name+' type=text>' :
                               field.type === 'textarea' ? '<textarea id='+field.id+' name='+field.name+' ></textarea>' :
                               field.type === 'checkbox' ? '<input id='+field.id+' name='+field.name+'  type=checkbox>' :
                               field.type === 'submit' ? '<input id='+field.id+' name='+field.name+'  value='+field.value+' type=submit>' :
                               field.type === 'file' ? '<input id='+field.id+' name='+field.name+' type=file>':'';
               optionalForm += field.note ? "<span>"+field.note+"</span>" : '';

               postUrl = field.url ? field.url : '';

          })
          contactForm.attr('action',postUrl);
          return optionalForm;
     }

     option.on('change',function(){
          fieldSet.empty();
          if(this.selectedIndex !== 0){
               validateForm(fieldSet.append(generateForm(form[$(this).val()])));
          }
     })


}

フォームを生成するための私のHTML：

<form id="contactForm" action="" method="post">
    <legend>Inquiry Form</legend>
    <fieldset>
        <label>Type of Inquiry*</label>
        <select id='enquiry'>
            <option selected='selected' value=''>Please select</option>
            <option value='general'>General</option>
            <option value='sales'>Sales</option>
            <option value='careers'>Careers</option>
        </select>
    </fieldset>
    <fieldset><!-- selected form fields goes here --></fieldset>
</form>
4

0 に答える 0