如果另一個欄位不為空，則需要HTML表單欄位-有解無憂

如果“名稱”欄位不為空，則嘗試獲取需要的“位置” 。我不完全理解 java 或 jQuery，所以我一直在看的例子沒有意義。對不起，我是個菜鳥，但我一直在谷歌搜索，只是沒有看到解決方案。

<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
    Name: <input type="text" name="name" required>
    <label for="location">Choose a location:</label>
    <select name="location" id="location">
      <option value="ON">Ontario</option>
      <option value="BC">B.C.</option>
      <option value="AB">Alberta</option>
      <option value="MI">Michigan</option>
    </select>
    <br><br>
    <input type="submit" name="submit" value="Submit">
</form>

uj5u.com熱心網友回復：

嘗試使用以下。每當“名稱”輸入更新時，它都會檢查它是否具有值。如果是，它會將“位置”輸入更新為要求。

function updateRequirements() {
  var name = document.getElementById('name').value;
  if (name != null) {
    document.getElementById('location').required = true;
  } else {
    document.getElementById('location').required = false;
  }
}

    <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
        Name: <input type="text" id="name" name="name" onchange="updateRequirements();">
        <label for="location">Choose a location:</label>
        <select name="location" id="location">
          <option value="ON">Ontario</option>
          <option value="BC">B.C.</option>`
          <option value="AB">Alberta</option>
          <option value="MI">Michigan</option>
        </select>
        <br><br>
        <input type="submit" name="submit" value="Submit">
    </form>

看看這是否有助于您嘗試做的事情。

uj5u.com熱心網友回復：

您的表單中有兩個欄位。名稱欄位是必需的。位置不行。意味著如果位置為“空”，則您無法發送表單。如果該位置有一個值，那么您可以為名稱選擇設定一個必需的引數，以避免在沒有這兩個欄位的情況下發送表單。

<select name="location" id="location" required>

uj5u.com熱心網友回復：

您需要使用 javascript 在客戶端執行此操作，并使用 php 在服務器端驗證提交的資料。

首先，如果您想讓用戶不選擇位置（無論出于何種原因），您的<select>標簽應包含<option>空值。

試試這個代碼：

<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
    Name: <input type="text" name="name" id="name" required>
    <label for="location">Choose a location:</label>
    <select name="location" id="location">
        <option value="">Select a location</option>
        <option value="ON">Ontario</option>
        <option value="BC">B.C.</option>
        <option value="AB">Alberta</option>
        <option value="MI">Michigan</option>
    </select>
    <br><br>
    <input type="submit" name="submit" value="Submit">
</form>

然后使用 javascript 嘗試將 eventlistener 添加到name輸入，如果該值不為空，則將位置更改為所需。

試試這個代碼：

// Listen for input and change the select required attribute
document.querySelector('#name').addEventListener('input', function(e) {
    const location = document.querySelector('#location');
    if (e.target.value.length > 0) {
        location.required = true;
    } else {
        location.required = false;
    }
});

現在您需要驗證提交的資料 PHP

嘗試這樣的事情：

if ($_SERVER['REQUEST_METHOD'] == 'POST') { // if form was submitted
    $name = $_POST['name'] ?? "";
    $location = $_POST['location'] ?? "";

    if ($name && !$location) {          // if name is not empty and location is empty
        echo "Please enter a location";
    } elseif ($name && $location) {     // if name and location are not empty
        echo "Welcome, $name from $location";
    } elseif (!$name && $location) {    // if name is empty and location is not empty
        echo "Please enter your name";
    } else {                            // if name and location are empty
        echo "Please enter your name and location";
    }
}

上面的代碼只是一個例子，向您展示如何驗證提交的資料。

uj5u.com熱心網友回復：

您可以使用 Javascript 將 disbaled 屬性添加到您希望需要的每個條目的 HTML 中。然后使用事件偵聽器檢查每個必需條目的驗證。

您希望名稱是必需的，因此禁用選擇和提交按鈕。使用模糊事件檢查名稱輸入欄位，這意味著該元素已失去焦點。如果name.value為空，則事件觸發后，請禁用下一個欄位，即您的select。一旦名字被正確填寫，我們設定了禁用的屬性，屬性為假，然后我們檢查選擇使用元素改變事件。當它發生變化時，如果它沒有被設定為默認值，""那么我們將提交按鈕禁用屬性從true 設定為false.

注意：我已將 Id 添加到您的每個表單欄位以使用該 ID 查詢每個元素。

// query each relavent selector and assign a variable
let loc = document.querySelector('#location');
let submit = document.querySelector('#submit');
let name = document.querySelector('#name');
// disable the next required fields so the user can not move on until 
// they fill out the prior field properly
submit.disabled = true;
loc.disabled = true;

// blur event handler to check the focus out fo the input field
// for example when the user clicks out or hits tab
name.addEventListener('blur', e => {
  // ternary conditional statement to check the value of the name field
  name.value !== '' ? loc.disabled = false : submit.disabled = true
})

// change event handler to check the selects value on change
loc.addEventListener('change', e => {
  // if conditional statement to check the value of the location select
  // makes sure the value is not set to "" which is the default value for 
  // "Select A Location" also double check our name in case user removes after 
  // selecting a location
 loc.value !== '' && name.value !== '' ? 
    submit.disabled = false :
    submit.disabled = true
})

<form method="post" action="<?php echo htmlspecialchars($_SERVER[" PHP_SELF "]);?>">
  Name: <input type="text" id="name" name="name" required>
  <label for="location">Choose a location:</label>
  <select name="location" id="location">
    <option value="">Select a Location</option>
    <option value="ON">Ontario</option>
    <option value="BC">B.C.</option>
    <option value="AB">Alberta</option>
    <option value="MI">Michigan</option>
  </select>
  <br><span id="error"></span><br>
  <input id="submit" class="unselectable" type="submit" name="submit" value="Submit">
</form>

uj5u.com熱心網友回復：

使用資料屬性來定義您的關系，世界就是您的牡蠣。以下只是一個起點，但會為您提供所需的內容。In that example, two more fields are flagged as required when the "Other" checkbox is checked.

在定義依賴的 data 屬性中，您可以使用任何有效的 CSS Selector 來選擇依賴元素。

/*Get fields with dependencies*/
let fieldsWithDependencies = document.querySelectorAll("[data-dependantfieldselecor]");

for (var i = 0; i < fieldsWithDependencies.length; i  ) {
  /*Add an appropriate event listener based on type*/
  let eventType = fieldsWithDependencies[i].type == "text" ? "input" : "click";
  fieldsWithDependencies[i].addEventListener(eventType, updateDependencies);
  //Add the same for blur, just to be sure
  fieldsWithDependencies[i].addEventListener("blur", updateDependencies);
}

function updateDependencies(event) {
  /*The dependent fields base on the dependent field attribute selector*/
  let dependentFields = document.querySelectorAll(this.dataset.dependantfieldselecor);
  /*Update required based on the element from where the event originated*/
  for (var j = 0; j < dependentFields.length; j  ) {
    if (this.type == "checkbox") {
      dependentFields[j].required = this.checked
    } else {
      dependentFields[j].required = this.value.trim().length > 0;
    }
  }
}

<form method="post" action="">
  Name: <input type="text" name="name" required data-dependantfieldselecor="#location">
  <label for="location">Choose a location:</label>
  <select name="location" id="location">
    <option value="ON">Ontario</option>
    <option value="BC">B.C.</option>
    <option value="AB">Alberta</option>
    <option value="MI">Michigan</option>
  </select>
  <br>
  <label for="other">Other</label><input type="checkbox" id="other" data-dependantfieldselecor="#age,.bob">
  <br>
  <label for="age">Age</label><input type="number" id="age">
  <br>
  <label for="something">Something</label><input type="text" id="something" class="bob">
  <br><br>
  <input type="submit" name="submit" value="Submit">
</form>

In reality, though, you have the "name" field indicated as required, so logically the location field should also be required by default

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

標籤：javascript php html

上一篇：PHP多維陣列-獲取最后一個索引中元素的值？

下一篇：靜態陣列的好處？[復制]