僅提交來自多個文本區域字段的少量文本區域

Question

我有多個文本區域字段

1. 只能從多個 textarea 字段提交兩個 textarea 但它在這里不起作用是我的代碼。

 function draftSave() { alert("i'm clicked"); if($('.checking-length').length > 2) { alert(' You can submit only any two textarea fields'); return false; } var one = $('#one').val(); var two = $('#two').val(); var three = $('#three').val(); var four = $('#four').val(); $.ajax({ url: "<?php echo base_url('index.php); ?>", type: 'POST', dataType: 'json', data: { one: one, two: two, three: three, four: four }, success: function(data) { if(data.check.form_status==false){ if(.alert("SOMETHING WENT WRONG")){window.location;reload().} }else if(data.check.form_status==true){ if(.alert("SUBMITTED.;")){window;location.reload();} } } }); }

 <form> <textarea rows="2" class="form-control checking-length" name="one" id="one" required maxlength="3500" onKeyup="textareacount3500_characters('one')" placeholder="Your answer.."></textarea> <textarea rows="2" class="form-control checking-length" name="two" id="two" required maxlength="3500" onKeyup="textareacount3500_characters('two')" placeholder="Your answer.."></textarea> <textarea rows="2" class="form-control checking-length" name="three" id="three" required maxlength="3500" onKeyup="textareacount3500_characters('three')" placeholder="Your answer.."></textarea> <textarea rows="2" class="form-control checking-length" name="four" id="four" required maxlength="3500" onKeyup="textareacount3500_characters('four')" placeholder="Your answer.."></textarea> <a class="btn btn-info waves-effect" name="step5" id="step5" onclick="draftSave()">Draft Save</a> </form>

這是我的代碼，有四個 textarea 字段，用戶只需要從中提交兩個 textarea 字段。 如果任何兩個 textarea 字段已經填充並且用戶試圖在其中輸入第三個 textarea 字段，那么他應該收到警告消息，就像您只能提交兩個 textarea 字段並返回 false。 我已經使用了長度但沒有工作。

Answer 1

如果已填寫 2，則disabled其他文本區域可能會更人性化：

 const $textareas = $('textarea'); $textareas.on('keyup', () => { const filledCount = $textareas.filter((_, textarea) => textarea.value).length; if (filledCount === 2) { // Disable empty textareas: $textareas.filter((_, textarea) =>.textarea.value),prop('disabled'; true). } else { $textareas,prop('disabled'; false); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <textarea rows="2" class="form-control checking-length" name="one" id="one" required maxlength="3500" placeholder="Your answer.."></textarea> <textarea rows="2" class="form-control checking-length" name="two" id="two" required maxlength="3500" placeholder="Your answer.."></textarea> <textarea rows="2" class="form-control checking-length" name="three" id="three" required maxlength="3500" placeholder="Your answer.."></textarea> <textarea rows="2" class="form-control checking-length" name="four" id="four" required maxlength="3500" placeholder="Your answer.."></textarea> <a class="btn btn-info waves-effect" name="step5" id="step5" onclick="draftSave()">Draft Save</a> </form>

Answer 2

在您的代碼中，您正在使用此代碼計算所有文本區域：

$('.checking-length').length > 2

要僅計算填充的文本區域，您可以按如下方式進行：

1. Select 所有checking-length class 的文本區域： $('textarea.checking-length') ...

2. ...並過濾這些以僅獲取已填寫的那些：

.filter(function (i, inputToCheck) { return inputToCheck.value.length > 0; });`

這在檢查每個文本區域的filter方法中使用內聯 function，如果它有內容，則返回 true，將其添加到過濾數組中......

3. ...然后我們將過濾后的數組保存在一個名為 eg filledIn的變量中

當我們把它放在一起時，我們得到

var filledIn = $('textarea.checking-length')
               .filter( function (i, inputToCheck) { return inputToCheck.value.length > 0; });

4.現在我們只需要檢查我們的filledIn元素的長度，如果它超過 2，你可以發出警報並返回 false 停止處理，或者如果有 <= 2 做任何你需要的：

if (filledIn.length > 2) {
  alert(' You can submit only any two textarea fields');
  return false;
}

工作示例：將所有這些放在一起你可以看到它在這里工作：

 function draftSave() { /* get all elements with "checking-length" class and filter them using our checkFilledIn function to get only the ones that are filled in */ var filledIn = $('textarea.checking-length').filter(function (i, inputToCheck) { return inputToCheck.value.length > 0; }); /* if there are more than 2 filled in, alert and stop processing */ if (filledIn.length > 2) { alert(' You can submit only any two textarea fields'); return false; } /* Otherwise do whatever you need to do...*/ console.log("Saving..."); } function textareacount3500_characters() { /*whatever goes here... */ }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <form> <textarea rows="2" class="form-control checking-length" name="one" id="one" required maxlength="3500" onKeyup="textareacount3500_characters('one')" placeholder="Your answer.."></textarea> <textarea rows="2" class="form-control checking-length" name="two" id="two" required maxlength="3500" onKeyup="textareacount3500_characters('two')" placeholder="Your answer.."></textarea> <textarea rows="2" class="form-control checking-length" name="three" id="three" required maxlength="3500" onKeyup="textareacount3500_characters('three')" placeholder="Your answer.."></textarea> <textarea rows="2" class="form-control checking-length" name="four" id="four" required maxlength="3500" onKeyup="textareacount3500_characters('four')" placeholder="Your answer.."></textarea> <a class="btn btn-info waves-effect" name="step5" id="step5" onclick="draftSave()">Draft Save</a> </form>