加载页面后无法在html中提交表单

时间:2018-05-28 10:09:34

标签: javascript jquery html

我正在尝试在加载页面后以HTML格式提交表单。它在表单刷新时有效。否则,表单无法提交。我的HTML页面complaint.html位于以下位置:



<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
  <link rel="stylesheet" href="jquery.mobile-1.4.5/demos/css/themes/default/jquery.mobile-1.4.5.min.css">
  <link rel="stylesheet" href="jquery.mobile-1.4.5/demos/_assets/css/jqm-demos.css">
  <script src="jquery.mobile-1.4.5/demos/js/jquery.js"></script>
  <script src="jquery.mobile-1.4.5/demos/_assets/js/index.js"></script>
  <script src="jquery.mobile-1.4.5/demos/js/jquery.mobile-1.4.5.min.js"></script>
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <script>
    $(document).ready(function() {
      $('#submt4').removeClass('ui-btn');
    });
  </script>
</head>

<body>
  <div class="center container-fluid">
    <div class="row">
      <div class="col-xs-12">
        <h2 align="center">COMPLAINTS</h2>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12"><input type="text" placeholder="Name" name="name" id="name">
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12"><input type="text" placeholder="Mobile" name="mobile" id="mobile"></div>
    </div>
    <div class="row">
      <div class="col-xs-12"><input type="text" placeholder="Vehicle No" name="vehicleno" id="vehicleno"></div>
    </div>
    <div class="row">
      <div class="col-xs-12"><textarea rows="4" cols="50" name="complaint" id="complaint">Enter your complaint here...</textarea></div>
    </div>
    <div class="row">
      <div class="col-xs-12" align="center">
        <button class="btn btn-primary btn-lg " type="button" id="submt4" onClick="funComplaint();">SUBMIT</button></div>
    </div>
  </div>
  </div>
  <script type="text/javascript">
    function funComplaint() {
      var name = document.getElementById("name").value;
      var mobile = document.getElementById("mobile").value;
      var vehno = document.getElementById("vehicleno").value;
      var complaint = document.getElementById("complaint").value;
      var letters = /^[A-Za-z, ]+$/;
      var numbers = /^[0-9]+$/;
      var alphanum = /^[0-9a-zA-Z]+$/;
      if (name == "" || mobile == "" || vehno == "" || complaint == "") {
        alert("Please fill all fields........");
        return false;
      }
      if (name.match(letters)) {} else {
        alert("Name must have alphabet characters only");
        document.getElementById('name').focus();
        return false;
      }
      if (mobile.match(numbers)) {} else {
        alert("Mobile number must have numeric characters only");
        document.getElementById('mobile').focus();
        return false;
      }
      if (mobile.length == 0 || mobile.length > 12 || mobile.length < 10) {
        alert("Mobile number should not be empty / length be between 10 to 12");
        document.getElementById('mobile').focus();
        return false;
      }
      if (vehno.match(alphanum)) {} else {
        alert("Vehicle number must have alphanumeric characters only");
        document.getElementById('vehicleno').focus();
        return false;
      }
      var x = new XMLHttpRequest();
      x.onreadystatechange = function() {
        if (x.readyState == 4 && x.status == 200) {
          var msg = x.responseText.trim();
          if (msg == "Complaint Received") window.location = "home.html";
        } else {
          alert(msg);
        }
      }
    }
    x.open("GET", "http://localhost:8087/CarRental/com/selcar/getComplaint.jsp?name=" + name + "&mobile=" + mobile + "&vehno=" + vehno + "&complaint=" + complaint, true);
    x.send();
    }
  </script>
</body>

</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

在x.onreadystatechange定义之后,你有一个}太多了。

只需在}之前删除一个x.open(...