如果未填寫表單，則禁用提交按鈕-有解無憂

如果沒有填寫名字、電子郵件和評論，我想讓他禁用表單上的提交按鈕。我在 HTML 中禁用了按鈕（提交）。這是一個片段。

即使列已填寫，該按鈕仍處于禁用狀態，我不知道還能做什么……我嘗試了許多不同的方法，但還沒有找到解決方案。

const submitBtn = document.getElementById('submit');
const firstName = document.getElementById('first-name')
const email = document.getElementById('email')
const comment = document.getElementById('comment')

function sendText() {
  if (firstName.value.length > 0) {
    submitBtn.disabled = false;
  } else {
    submitBtn.disabled = true;
  }
}

function sendText() {
  if (email.value.length > 0) {
    submitBtn.disabled = false;
  } else {
    submitBtn.disabled = true;
  }
}

function sendText() {
  if (comment.value.length > 0) {
    submitBtn.disabled = false;
  } else {
    submitBtn.disabled = true;
  }
}

<tr>
  <fieldset div="contact">
    <td>First Name* <input type="text" id="first-name" name="first-name" placeholder="Your name" required></td>
    <td>Last Name<input type="text" id="last-name" name="last-name" placeholder="Your last name"></td>
    <td>Email*<input type="email" id="email" name="email" placeholder="Your email" required>
    </td>
  </fieldset>
  <fieldset>
    <label for="comment">Add your comment*</label><textarea id="comment" name="comment" placeholder="Your comment..." required></textarea>
</tr>
<lable for="hour">Which one is the best hour to contact you?</lable>
<select id="hour">
  <option selected>Select an Option</option>
  <option value="8">08:00 AM</option>
  <option value="9">09:00 AM</option>
  <ption value="10">10:00 AM</option>
    <option value="11">11:00 AM</option>
    <option value="12">12:00 AM</option>
    <option value="13">13:00 PM</option>
    <option value="14">14:00 PM</option>
    <option value="15">15:00 PM</option>
    <option value="16">16:00 PM</option>
    <option value="17">17:00 PM</option>
    <option value="18">18:00 PM</option>
    <option value="19">19:00 PM</option>
</select>


</fieldset>
<button disabled id="submit">Submit</button>

</h3>
</nav>

</div>

</form>>

</form>

uj5u.com熱心網友回復：

您的代碼中的一個問題是，您已經宣告了一個sendText函式三次，而且您從未呼叫過該函式，我不知道您是否將所有 html 代碼都放在您的問題中，但您的標記似乎有一些問題，但由于您的問題是為了改變提交按鈕的禁用狀態，我們忽略了與標記相關的問題。我在下面的代碼片段中復制了您的代碼并進行了一些更改以實作您想要的功能。請檢查此代碼段。

const submitBtn = document.getElementById('submit');
const firstName = document.getElementById('first-name')
const email = document.getElementById('email')
const comment = document.getElementById('comment')

function updateSubmitBtn(){
  const firstNameValue = firstName.value.trim();
  const emailValue = email.value.trim();
  const commentValue = comment.value.trim();
  debugger;
  if(firstNameValue && emailValue && commentValue){
    submitBtn.removeAttribute('disabled');
  }else {
    submitBtn.setAttribute('disabled', 'disabled');
  }
}

firstName.addEventListener('change', updateSubmitBtn);
email.addEventListener('change', updateSubmitBtn);
comment.addEventListener('change', updateSubmitBtn);

<tr>
  <fieldset div="contact">
    <td>First Name* <input type="text" id="first-name" name="first-name" placeholder="Your name" required></td>
    <td>Last Name<input type="text" id="last-name" name="last-name" placeholder="Your last name"></td>
    <td>Email*<input type="email" id="email" name="email" placeholder="Your email" required>
    </td>
  </fieldset>
  <fieldset>
    <label for="comment">Add your comment*</label><textarea id="comment" name="comment" placeholder="Your comment..." required></textarea>
</tr>
<lable for="hour">Which one is the best hour to contact you?</lable>
<select id="hour">
  <option selected>Select an Option</option>
  <option value="8">08:00 AM</option>
  <option value="9">09:00 AM</option>
  <option value="10">10:00 AM</option>
    <option value="11">11:00 AM</option>
    <option value="12">12:00 AM</option>
    <option value="13">13:00 PM</option>
    <option value="14">14:00 PM</option>
    <option value="15">15:00 PM</option>
    <option value="16">16:00 PM</option>
    <option value="17">17:00 PM</option>
    <option value="18">18:00 PM</option>
    <option value="19">19:00 PM</option>
</select>


</fieldset>
<button disabled id="submit">Submit</button>

請考慮這一點，change當元素失去焦點時，事件會在輸入時觸發。如果您想在用戶開始輸入時更改提交按鈕的禁用狀態，您應該使用input事件而不是change事件偵聽器。

uj5u.com熱心網友回復：

嗨，您將不得不為此撰寫一些 JS 代碼。

$(document).ready(function() {
$('#submit').attr('disabled', true);
    if ($('#html_variable1').val() != '' && $('#html_variable2').val() != '') {
        $('#submit').attr('disabled', false);
    }
});

在您的提交按鈕中添加 id 提交，在您的輸入中定義所有 id 并將它們添加到 JS 的 if 陳述句中，一旦所有輸入都不是空的，提交按鈕將洗掉禁用選項。

uj5u.com熱心網友回復：

正如CBroe提到的，表單輸入有純 HTML5 驗證器：
更多資訊在這里

但是如果你還想用JS自己做的話。您可以在上面的同一鏈接中找到詳細資訊。

請記住，在大多數情況下使用內置解決方案比創建自己的解決方案要好。如果您使用 HTML5 驗證器，您將對所有表單輸入進行簡單但高效的客戶端檢查，并且用戶將有一個關于他們做錯了什么的本地回呼。

為了讓它按照你的方式作業，有必要創建一些事件、函式......一些沒有充分理由的作業。這是一個基于您的（凌亂;)）代碼的示例：

const submitBtn = document.getElementById('submit');
    const firstName = document.getElementById('first-name');
    const emailAddress = document.getElementById('email');
    const comment = document.getElementById('comment');
    let validation = [0, 0, 0];

    function checkForm (validation) {
        if (validation.reduce((a, b) => a   b, 0) > 2){
            submitBtn.removeAttribute('disabled');
        }
    }

    firstName.addEventListener('change', (event) => {
        if (firstName.value.length > 0 ){
            validation[0] = 1;
            checkForm(validation);
        }
        else {
            validation[0] = 0;
            submitBtn.setAttribute('disabled', 'disabled');
        }
    });

    emailAddress.addEventListener('change', (event) => {
        if (emailAddress.value.length > 0 ){
            validation[1] = 1;
            checkForm(validation);
        }
        else {
            validation[1] = 0;
            submitBtn.setAttribute('disabled', 'disabled');
        }
    });

    comment.addEventListener('change', (event) => {
        if (comment.value.length > 0 ){
            validation[2] = 1;
            checkForm(validation);
        }
        else {
            validation[2] = 0;
            submitBtn.setAttribute('disabled', 'disabled');
        }
    });

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <fieldset id="contact">
        <div><label for="first-name">First Name* </label><input type="text" id="first-name" name="first-name" placeholder="Your name" required></div>
        <div><label for="last-name">Last Name</label><input type="text" id="last-name" name="last-name" placeholder="Your last name"></div>
        <div><label for="email">Email*</label><input type="email" id="email" name="email" placeholder="Your email" required></div>
    </fieldset>
    <fieldset>
        <label for="comment">Add your comment*</label><textarea id="comment" name="comment" placeholder="Your comment..." required></textarea>
        <label for="hour">Which one is the best hour to contact you?</label>
        <select id="hour">
            <option disabled selected hidden>Select an Option</option>
            <option value="8">08:00 AM</option>
            <option value="9">09:00 AM</option>
            <option value="10">10:00 AM</option>
            <option value="11">11:00 AM</option>
            <option value="12">12:00 AM</option>
            <option value="13">13:00 PM</option>
            <option value="14">14:00 PM</option>
            <option value="15">15:00 PM</option>
            <option value="16">16:00 PM</option>
            <option value="17">17:00 PM</option>
            <option value="18">18:00 PM</option>
            <option value="19">19:00 PM</option>
        </select>
    </fieldset>
    <button disabled id="submit">Submit</button>
</form>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/376162.html

標籤：javascript html 功能按钮

上一篇：這個C語言陳述句是什么意思？

下一篇：如何按受歡迎程度（最多次數）按此順序對串列進行排序？