的代码：

Question

我有一个显示HTML表单的代码，其中包含下拉列表和textarea，默认情况下我需要将texarea隐藏起来，一旦用户选择了textarea就会显示。

我试过https://codepen.io/并且效果很好。

但是当我尝试使用WordPress时，这段代码无法正常工作。

的代码：

<?php /* Template Name: anldept */ ?>

<!DOCTYPE html>
<html>

<head>
  <title>Form Validation</title>
  <!-- Latest compiled and minified BootStarp CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script type="text/javascript">
    $(function() {
      $("#textarea").hide()
      $("#droplistID").change(function() {
        $(this).val() == 'select' ? $("#textarea").hide() : $("#textarea").show();
      });
    });
  </script>

</head>

<body>
  <div id="page-wrapper">
    <div class="container">
      <h1>
        Send Post Data to AJAX
      </h1>
      <form name="myForm" class="form-horizontal" id="myform" action="#" onsubmit="return submitForm();" method="POST" enctype="multipart/form-datam">
        <div class="panel panel-info">
          <div class="panel-heading">Form</div>
          <div class="panel-body">
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label for="name" class="col-md-4">Date *</label>
                  <div class="col-md-6">
                    <input type="text" class="form-control" id="name" name="name" placeholder="Enter Name" required/>
                  </div>
                </div>
                <div class="form-group">
                  <label for="Title" class="col-md-4">Title *</label>
                  <div class="col-md-6">
                    <input type="text" class="form-control" id="mobile" name="phone" placeholder="Enter the Title" required/>
                  </div>
                </div>
                <div class="form-group  ">
                  <label for="category" class="col-md-4">select Category *</label>
                  <div class="col-md-6">
                    <select name="droplist" id="droplistID">
                           <option id = "option1" value="select" selected>Select</option>
                           <option id = "option2" value="category 1">category 34</option>
                           <option id = "option3" value="category 2">category 2</option>
                           <option id = "option4" value="category 3">category 3</option>
                       </select>
                  </div>
                </div>

                <div id="textarea">
                  <div class="form-group  ">
                    <label for="text" class="col-md-4">Enter a text </label>
                    <div class="col-md-6">
                      <textarea cols="60" rows="30"> </textarea>
                    </div>
                  </div>
                </div>

                <div class="form-group  ">
                  <label for="image" class="col-md-4">Select Image </label>
                  <div class="col-md-6">
                    <input type="file" class="form-control" name="image">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-md-offset-4" style="margin-bottom: 50px;">
          <center>
            <input type="submit" class="btn btn-primary" value="Submit" />
          </center>
        </div>
      </form>
    </div>
  </div>
</body>

</html>

Answer 1

您的代码看起来很好，似乎开箱即用。但是，WordPress可能运行不同的jQuery版本，这意味着您对@if(\Request::route()->getName() == 'message.send') @endif的调用无效。您将能够在控制台中看到有助于下次发布的内容。

要解决此问题，请尝试使用$代替jQuery。您的代码应如下所示：

在WordPress中使用jQuery隐藏和显示textarea

的代码：

1 个答案: