ユーザーが選択オプションからメニューを選択しているときに、動的フォームを作成しています。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>