带有两个下拉菜单的 PHP 表单未发送

Question

一旦从主要下拉列表中进行选择，我有一个表单会拆分为 2 个不同的下拉列表。问题是，当我提交表单时，我需要从每个子下拉列表中选择要提交的表单。如果不使用该变量，我将如何让 PHP 代码忽略该变量？

例如，我希望能够选择 fencing > colorbond。

但我还需要从 internal-civil > any 中进行选择。为了能够提交表单。

       <form action="/contactform.php" method="POST" class="contact-us-form">
        <h5>Let us get back to you</h5>
        <div class="form-body">
          <div class="form-body">
            <div class="contact-fillers">
              <input
                type="text"
                name="first-name"
                id="first-name"
                placeholder="First Name*"
                required
              />
            </div>
          </div>

          <div class="form-body">
            <div class="contact-fillers">
              <input
                type="text"
                name="last-name"
                id="last-name"
                placeholder="Last Name*"
                required
              />
            </div>
          </div>
        </div>

        <div class="contacts">
          <div class="form-body email-section">
            <div class="contact-fillers">
              <input
                type="email"
                name="email"
                id="Email"
                placeholder="E-mail Address*"
                required
              />
            </div>
          </div>

          <div class="form-body tel-section">
            <div class="contact-fillers">
              <input
                type="tel"
                name="tel"
                id="tel"
                placeholder="Contact Number"
              />
            </div>
          </div>
        </div>

        <div class="location">
          <div class="form-body street-section">
            <div class="contact-fillers">
              <input
                type="text"
                name="street-address"
                id="street-address"
                placeholder="Street Address*"
                required
              />
            </div>
          </div>

        <div class="form-body job-section">
          <select name="job-type" id="job-type" required>
            <option value="" disabled selected value selected
              >Project Type*</option
            >
            <option value="internals-civil"
              >Telecom Internals & Civil</option
            >
            <option value="fencing">Fencing</option>
          </select>
        </div>

        <div class="form-body telecom-section" id="telecom-internal-civil">
          <div>
            <select name="internal-civil" id="internal-civil" required>
              <option value="null" disabled selected value selected
                >Select one*</option
              >
              <option value="civilWorks">Civil Works</option>
              <option value="connectionPoints">Connection Points</option>
              <option value="dataCabling">Data Cabling</option>
              <option value="faultFinding">Fault Finding</option>
              <option value="lead-inInstall">Lead-In Installation</option>
              <option value="lead-inReplacement"
                >Lead-In Replacement</option
              >
              <option value="networkEnhancement"
                >Network Enhancement</option
              >
              <option value="networkExtension">Network Extension</option>
              <option value="repairs">Repairs</option>
              <option value="undergroundBoring">Underground Boring</option>
              <option value="telecomOther">Other</option>
            </select>
          </div>
        </div>

        <div
          class="form-body fencing-select fencing-section"
          id="fencing-job"
        >
          <div>
            <select name="fencing-job" id="fencing-job" required>
              <option value="null" disabled selected value selected
                >Fence Type*</option
              >
              <option value="automatic Gates">Automatic Gates</option>
              <option value="colorbond">Colorbond</option>
              <option value="fencingRepair">Fencing Repair</option>
              <option value="poolFencing">Pool Fencing</option>
              <option value="retainingWalls">Retaining Walls</option>
              <option value="timber">Timber</option>
              <option value="fencingOther">Other</option>
            </select>
          </div>
          <div class="form-body meterage-section">
            <div class="contact-fillers">
              <input
                type="text"
                name="approx-meterage"
                id="approx-meterage"
                placeholder="Approximate Meterage*"
                required
              />
            </div>
          </div>
        </div>

        <div>
          <div class="contact-fillers message-section">
            <textarea
              name="message"
              id="message"
              placeholder="Message*"
              required
            ></textarea>
          </div>
        </div>

        <!-- <div class="form-body files-section">
          <div class="contact-fillers">
            <label for="files" class="files-title"
              >Attach Relevant Photos</label
            >
            <input
              type="file"
              id="files"
              name="files"
              class="files"
              multiple
            />
          </div>
        </div> -->

        <br />
        <div class="form-body submit">
          <div class="contact-fillers">
            <div>
              <input
                type="submit"
                name="submit"
                value="Send Message"
                class="btn main-btn main-ghost form-submit"
              />
            </div>
          </div>
        </div>
      </form>

<?php 


if(isset($_POST['submit'])){

  $firstName = $_POST['first-name'];
  $lastName = $_POST['last-name'];
  $mailFrom = $_POST['email'];
  $tel = $_POST['tel'];
  $streetAddress = $_POST['street-address'];
  $suburb = $_POST['suburb'];
  $jobType = $_POST['job-type'];
  $subJobTypeCivil = $_POST['internal-civil'];
  $subJobTypeFencing = $_POST['fencing-job'];
  $subject = "$jobType $firstName $lastName $suburb";
    echo ''.$jobType;


  $approximateMeterage = $_POST['approx-meterage'];
  $message = $_POST['message'];

// workout how to files to upload


////////////////
  
  $mailTo = "name@gmail.com";
  $headers = ("WEBQ $jobType $firstName $lastName $suburb");

  $txt = "New ".$jobType." enquiry. \n\n"."Customer Name: ".$firstName." ".$lastName."\n"."Email: ".$mailFrom."\n"."Phone: ".$tel."\n"."Address: ".$streetAddress.", ".$suburb."\n"."Job Type: ".$jobType."\n".
   "Civil Job Type: ". $subJobTypeCivil."\n"."Fencing JobType:" .
   $subJobTypeFencing .
   
   "\n"."Approximate Meterage: ".$approximateMeterage."\n\n"."Message: ".$message;

  mail($mailTo, $subject, $txt, $headers);
  header("Location: index.html");

  }

?>

function navHamburger() {
 var x = document.getElementById("nav-links");
 if (x.style.display === "block") {
  x.style.display = "none";
 } else {
  x.style.display = "block";
 }
}


// CONTACT US FORM ////////////////////////////////////////////////////////////////////


$("#job-type").change(function(){
 if ($(this).val() == "internals-civil") {
  $('#telecom-internal-civil').show();
  $('#internal-civil').attr('required', '');
  $('#internal-civil').attr('data-error', 'This felid is required');
 } else {
  $('#telecom-internal-civil').hide();
  $('#internal-civil').removeAttr('required');
  $('#internal-civil').removeAttr('data-error');
 }
});
$("#job-type").trigger("change");


$("#job-type").change(function () {
 if ($(this).val() == "fencing") {
  $('#fencing-job').show();
  $('#fencing-select').attr('required', '');
  $('#fencing-select').attr('data-error', 'This felid is required');
 } else {
  $('#fencing-job').hide();
  $('#fencing-select').removeAttr('required');
  $('#fencing-select').removeAttr('data-error');
 }
});
$("#job-type").trigger("change");



function removeRequired(form) {
 $.each(form, function (key, value) {
  if (value.hasAttribute("required")) {
   value.removeAttribute("required");
  }
 });
}

Answer 1

您的大多数字段都有required 属性，这使得表单在这些字段完成之前不会提交：

<select name="job-type" id="job-type" required>

要更改它，只需删除 required 属性，您就可以提交表单了。

required 属性是一种使字段成为必需的简单方法，因为它使用本机浏览器消息和警报。你可以在这里阅读更多信息：https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required

对于您的 PHP 代码，您可以添加一些条件和默认值。一种方法是使用empty 关键字，但还有更多示例here。

$jobType = ''
if (!empty($_POST['job-type'])) {
    $jobType = $_POST['job-type'];
}
 ;