Div block & none

Question

i have two div which have have the property display none and block and these div has input fields if we put data in input fields in one of the div and obviously the other div is display none but the form does not submit basically problem is the div that hide if we comment it then the div which is display: block form will be sumitted but div which is comment we uncomment it so it becomes display:none then first div is display:block second is display:none then form will not submitt?

                <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

The issue you're facing might be related to the fact that when a form has elements with display: none, some browsers might not include those elements in the form submission. You can work around this by dynamically enabling/disabling the form fields based on the selected role.

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;
    }
  }
}

This script uses toggleRequiredFields to dynamically set the required attribute of the form elements within the specified div. When the div is visible (display: inline), the elements are required; otherwise, they are not.

P.S. There is no need of adding type="submit" for anchor tags. Please replace it with this.

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

Also <form> opening tag is missing in your form.