javascript - 如何在不重新加载页面的情况下显示模式

标签 javascript php jquery twitter-bootstrap

这里我进行了表单验证，表单验证后填充了所有字段并单击INVITE QUOTES按钮意味着我想显示模式，并且我想在填充所有字段后填充模式表单意味着我想要关闭该模式，但不想刷新页面，这里我单击INVITE QUOTES按钮意味着页面正在刷新并且模式未显示怎么办？

<script>

/*$('#businessForm').submit(function (e) {
  e.preventDefault();
  validateForm();
});*/
function validateForm() {
  var ratesfor = document.forms["myForm"]["ratesfor"].value;
  if (ratesfor == null || ratesfor == "") {
    document.getElementById("rate_err").innerHTML = "Field is empty";
  }
  var no = document.forms["myForm"]["no"].value;
  if (no == null || no == "") {
    document.getElementById("no_err").innerHTML = "Field is empty";
  }

  var breath = document.forms["myForm"]["breath"].value;
  if (breath == null || breath == "") {
    document.getElementById("b_t_err").innerHTML = "Field is empty";
  }

  var height = document.forms["myForm"]["height"].value;
  if (height == null || height == "") {
    document.getElementById("height_err").innerHTML = "Field is empty";
  }

  var truck_type = document.forms["myForm"]["truck_type"].value;
  if (truck_type == null || truck_type == "") {
    document.getElementById("truck_type_err").innerHTML = "Field is empty";
  }

  var datepicker = document.forms["myForm"]["datepicker-13"].value;
  if (datepicker == null || datepicker == "") {
    document.getElementById("pickup_err").innerHTML = "Field is empty";
  }

  var myTime = document.forms["myForm"]["myTime"].value;
  if (myTime == null || myTime == "") {
    document.getElementById("time_err").innerHTML = "Field is empty";
  }

  var from = document.forms["myForm"]["from"].value;
  if (from == null || from == "") {
    document.getElementById("from_err").innerHTML = "Field is empty";

  }

  var to = document.forms["myForm"]["to"].value;
  if (to == null || to == "") {
    document.getElementById("to_err").innerHTML = "Field is empty";
    return false;
  }

  else{

    $('#businessForm').submit(function (e) {
      e.preventDefault();
    })
    $.ajax({
      url:'search_truck.php',
      type:'POST',
      data : { 'state_id' : city},
      success:function(data){
        //var res=jQuery.parseJSON(data);// convert the json
        console.log(data);
      },
    });

  }
}

</script>
<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myModal").modal();
    });
});


$(document).ready(function(){
    $("#Register").click(function(){
	 	$("#myModal").hide();
        $("#myModal_Register").modal();
     });
});
</script>
<form id="businessForm" method="POST" onsubmit="return validateForm()" name="myForm" enctype="multipart/form-data">

    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label for="experience">Rates For</label>
                <input type="ratesfor" class="form-control" id="ratesfor" name="ratesfor" placeholder="weight(kg)">
                <span id="rate_err"></span>
            </div>
        </div>

    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="length">Length</label>
                <input type="text" class="form-control" id="no" name="no" placeholder="Length"><span id="no_err"></span>
            </div>
        </div>

        <div class="col-md-6">
            <div class="form-group">
                <label for="length"> </label>
                <select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" name="length" id="length" style="margin-top:25px;">
                    <option value="">feet</option>
                    <option value="">mm</option>
                    <option value="">mtr</option>
                </select>

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

    <div class="row">

        <div class="col-md-6">
            <div class="form-group">
                <label for="breadth">Breadth</label>
                <input type="text" class="form-control" id="breath" name="breath" placeholder="Breadth"><span id="b_t_err"></span>
            </div>
        </div>

        <div class="col-md-6">
            <div class="form-group">
                <label for="breadth"> </label>
                <select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" name="b_type" id="b_type" style="margin-top:25px;">
                    <option value="">feet</option>
                    <option value="">mm</option>
                    <option value="">mtr</option>
                </select>
            </div>
        </div>

    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="height">Height</label>
                <input type="text" class="form-control" id="height" name="height" placeholder="Height"><span id="height_err"></span>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="height"> </label>
                <select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" name="type" id="h_t" name="h_t" style="margin-top:25px;">
                    <option value="">feet</option>
                    <option value="">mm</option>
                    <option value="">mtr</option>
                </select>

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

    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label for="experience">Type Of Truck</label>
                <select id="truck_type" name="truck_type" autocomplete="off" class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <option value="feet">feet</option>
                    <option value="mm">mm</option>
                    <option value="mtr">mtr</option>
                </select><span id="truck_type_err"></span>
            </div>

        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label for="date">Date of PickUp</label>
                <br>
                <input type="text" placeholder="DD-MM-YY" id="datepicker-13" name="datepicker-13" style="width:100%;height:35px;">
                <span id="pickup_err"></span>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label for="time">Time of PickUp</label>
                <br>
                <input type="time" class="form-control" id="myTime" name="myTime" placeholder="Time">
                <span id="time_err"></span>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="experience">Destination</label>
                <select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" id="from" name="from">
                    <option value="">From</option>
                    <option value="1">Ahmedabad</option>
                    <option value="2">Bangalore</option>

                </select>
            </div>
            <span id="from_err"></span>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="experience"> </label>
                <select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" name="to" id="to" style="margin-top:25px;">
                    <option value="">To</option>
                    <option value="1">Guragon</option>
                    <option value="2">Hyderabad</option>
                </select>
            </div>
            <span id="to_err"></span>
        </div>
    </div>
    <br>


    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <button type="submit" class="btn btn-primary btn-lg btn-block">INVITE QUOTES</button>
            </div>
        </div>
    </div>

</form>


<div class="container">
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog" style="z-index: 9999;">

            <!-- Modal content-->
            <div class="modal-content">


                <div class="modal-header" style="padding:5px 50px;">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4>Login</h4>
                </div>
                <div class="modal-body" style="padding:40px 50px;">
                    <form role="form">
                        <div class="form-group">
                            <label for="usrname">Username</label>
                            <input type="text" class="form-control" id="usrname" placeholder="Enter Name">
                        </div>
                        <div class="form-group">
                            <label for="psw"> Password</label>
                            <input type="text" class="form-control" id="psw" placeholder="Enter password">
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" value="" checked>Remember me</label>
                        </div>
                        <button type="submit" class="btn btn-info btn-block">Login </button>
                    </form>
                </div>
                <div class="modal-footer">
                    <p>Not a member? <a href="#" id="Register"><b>Sign Up</b></a>
                    </p>
                    <!--<p>Forgot <a href="#">Password?</a></p>-->
                </div>
            </div>

        </div>
    </div>
    <!--######
                        Login From End
                                 #######--->


    <!--#####
                        Register From Start
                                      #####--->
    <div class="modal fade" id="myModal_Register" role="dialog">
        <div class="modal-dialog" style="z-index: 9999;">

            <!-- Modal content-->
            <div class="modal-content">



                <div class="modal-header" style="padding:5px 50px;">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4>Registration</h4>
                </div>
                <div class="modal-body" style="padding:40px 50px;">
                    <form role="form">
                        <div class="form-group">
                            <label for="usrname"> Username</label>
                            <input type="text" class="form-control" id="usrname" placeholder="Enter name">
                        </div>
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="text" class="form-control" id="email" placeholder="Enter email">
                        </div>
                        <div class="form-group">
                            <label for="psw">Password</label>
                            <input type="text" class="form-control" id="psw" placeholder="Enter password">
                        </div>
                        <div class="form-group">
                            <label for="psw"> Confirm Password</label>
                            <input type="text" class="form-control" id="psw" placeholder="Confirm password">
                        </div>

                        <button type="submit" class="btn btn-info btn-block">Submit</button>
                    </form>
                </div>
                <!-- <div class="modal-footer">
              <p>Not a member? <a href="#" id="Register">Sign Up</a></p>
              <p>Forgot <a href="#">Password?</a></p>
            </div>-->
            </div>

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

最佳答案

兄弟检查这一行:

<button type="submit" class="btn btn-primary btn-lg btn-block">INVITE QUOTES</button>

这里您使用按钮类型提交，提交按钮将提交表单并重新加载页面。而是使用:

<button type="button"  class="btn btn-primary btn-lg btn-block">INVITE QUOTES</button>

关于javascript - 如何在不重新加载页面的情况下显示模式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39865842/

上一篇：javascript - 更改检测后在 Canvas 上绘制 angular2 图像

下一篇：javascript - 数据不是来自 Splunk Javascript sdk 的 JSON 格式

相关文章：

javascript - Firefox 自版本 18 以来的错误

javascript - 如何使用具有宽高比的 PHP 获取图像的最小可裁剪尺寸？

javascript - 如何从 Nodejs 中的 setTimeout 获取整数？

javascript - 如何检测 Firefox 4.6 ubuntu 上安装的扩展

javascript - Jquery .click 事件在数组列表中找不到项目

php - 为什么我每次都收到我已经发送标题的错误消息

php - 已经注册的用户无法使用

javascript - 无法使用javascript下载大数据

javascript - Puppeteer - 使用 '--allow-file-access-from-files' 通过 XMLHttpRequest 加载本地文件不起作用

javascript - Node.js 类型错误 : Cannot read property 'host' of undefined

©2024 IT工具网  联系我们