Div 块和无

Question

我有两个div，它们具有属性display none和block 如果我们将数据放在一个输入字段中，这些 div 就有输入字段 div 的，显然另一个 div 不显示，但表单不提交基本上是问题 是隐藏的div，如果我们注释它，那么将提交显示的div：块形式，但是 div 是注释，我们取消注释它，使其变为 display:none 然后第一个 div 是 display:block 第二个是 display:none 那么表单不会提交？

                <div class="form-group">
                  <label for="role">Role:</label>
                  <select onchange="showDiv1('hidden_div1', this) , showDiv('hidden_div' ,this);  " id="role" name="role" class="form-control  <?php echo (!empty($role_err)) ? 'is-invalid' : ''; ?>">
                    <option value="company" selected="true">Company</option>
                    <option value="employee">Employee</option>
                  </select>
                  <span class="invalid-feedback"><?php echo $role_err; ?></span>
                </div>








                <!-- company Div -->
                <div id="hidden_div1">

                  <label>COMPANY NAME: </label>
                  <input type="text" name="name" class="form-control" required> <br>

                  <div class="form-group">
                    <label>Login Email</label>
                    <input type="email" name="email" class="form-control <?php echo (!empty($username_err)) ? 'is-invalid' : ''; ?>" required>
                    <span class="invalid-feedback"><?php echo $username_err; ?></span>
                  </div>

                  <label> PHONE: </label>
                  <input type="text" name="phone" class="form-control" required> <br>

                  <label> LOGO: </label>
                  <input type="file" name="logo" class="form-control-file" required> <br>

                  <label> Website: </label>
                  <input type="text" name="website" class="form-control" required> <br>
                  <div class="form-group">

                    <label>Password</label>
                    <input type="password" name="password" class="form-control <?php echo (!empty($password_err)) ? 'is-invalid' : ''; ?>" value="<?php echo $password; ?>" required>
                    <span class="invalid-feedback"><?php echo $password_err; ?></span>
                  </div>

                  <div class="form-group">
                    <label>Confirm Password</label>
                    <input type="password" name="confirm_password" class="form-control <?php echo (!empty($confirm_password_err)) ? 'is-invalid' : ''; ?>" value="<?php echo $confirm_password; ?>" required>
                    <span class="invalid-feedback"><?php echo $confirm_password_err; ?></span>
                  </div>
                </div>






                <!-- Employee Div -->
                <div class="form-group" id="hidden_div">
                  <label for="role1">Coordinator:</label>
                  <select id="role1 " name="role1" class="form-control  <?php echo (!empty($role_err)) ? 'is-invalid' : ''; ?>">
                    <option value="cr1">CR1</option>
                    <option value="cr2">CR2</option>
                    <option value="cr3">CR3</option>
                  </select>
                  <span class="invalid-feedback"><?php echo $role_err; ?></span>
                  <label>First Name: </label>
                  <input type="text" name="first_name" class="form-control" required> <br>

                  <label>Last Name: </label>
                  <input type="text" name="last_name" class="form-control" required> <br>

                  <label> Company Id: </label>
                  <input type="number" name="company_id" name="quantity" min="1" value="<?php echo $company_id;  ?>" class="form-control-file" required> <br>

                  <label> EMAIL: </label>
                  <input type="email" name="email1" value="" class="form-control" required> <br>

                  <label> PHONE: </label>
                  <input type="text" name="phone1" class="form-control" required> <br>
                  <div class="form-group">
                    <label>Password</label>
                    <input type="password" name="password" class="form-control <?php echo (!empty($password_err)) ? 'is-invalid' : ''; ?>" value="<?php echo $password; ?>" required>
                    <span class="invalid-feedback"><?php echo $password_err; ?></span>
                  </div>
                  <div class="form-group">
                    <label>Confirm Password</label>
                    <input type="password" name="confirm_password" class="form-control <?php echo (!empty($confirm_password_err)) ? 'is-invalid' : ''; ?>" value="<?php echo $confirm_password; ?>" required>
                    <span class="invalid-feedback"><?php echo $confirm_password_err; ?></span>
                  </div>
                </div>




                <button class="btn btn-success" type="submit" name="submit"> Submit </button><br>
                <a class="btn btn-info" type="submit" name="cancel" href="welcome.php"> Cancel </a><br>

              </div>
            </form>

          </div>
        </div>
      </div>
    </div>
  </div>






  <H3 class="text-center">Companies Information</H3>





  
  <script>


  


    function showDiv1(divId, element) {
      var hiddenDiv1 = document.getElementById('hidden_div1');
      hiddenDiv1.style.display = element.value == 'company' ? 'inline' : 'none';
      requiredFields(hiddenDiv1, element.value == 'company');
    }

    function showDiv(divId, element) {
      var hiddenDiv = document.getElementById('hidden_div');
      hiddenDiv.style.display = element.value == 'employee' ? 'inline' : 'none';
      requiredFields(hiddenDiv, element.value == 'employee');
    }

    function requiredFields(div, isRequired) {
      var requiredFields = div.querySelectorAll('[required]');
      requiredFields.forEach(function(field) {
        field.required = isRequired;
      });
    }
  </script>

Answer 1

您面临的问题可能与以下事实有关：当表单包含带有

display: none

的元素时，某些浏览器可能不会在表单提交中包含这些元素。您可以通过根据所选角色动态启用/禁用表单字段来解决此问题。

function showDiv1(divId, element) {
  var hiddenDiv1 = document.getElementById('hidden_div1');
  hiddenDiv1.style.display = element.value == 'company' ? 'inline' : 'none';
  toggleRequiredFields(hiddenDiv1, element.value == 'company');
}

function showDiv(divId, element) {
  var hiddenDiv = document.getElementById('hidden_div');
  hiddenDiv.style.display = element.value == 'employee' ? 'inline' : 'none';
  toggleRequiredFields(hiddenDiv, element.value == 'employee');
}

function toggleRequiredFields(div, isRequired) {
  var formElements = div.getElementsByTagName('*');
  for (var i = 0; i < formElements.length; i++) {
    var element = formElements[i];
    if (element.tagName === 'INPUT' || element.tagName === 'SELECT') {
      element.required = isRequired;
    }
  }
}

此脚本使用

toggleRequiredFields

动态设置指定 div 内表单元素的必需属性。当div可见

(display: inline)

时，元素是必需的；否则，他们就不是。

附注 无需为锚标记添加

type="submit"

。请用这个替换它。

<a class="btn btn-info" name="cancel" href="welcome.php"> Cancel </a><br>

此外，您的表单中缺少

<form>

开始标签。