Question

我正在制作联系表格（不需要实际联系某人）。我要这样做，以便当您按下发送/提交按钮时，它刷新页面，以便看起来好像已经发送了消息。我没有使用Javascript，但是通过Javascript进行此操作的任何方式都将受到赞赏。这是我的联系表格。这不是重复的，因为我希望是否有办法通过HTML BUT js答案来接受

http://jsfiddle.net/egndc24s/1/

    <!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="container">
        <section class="section1">
            <div class="sec1title">
                <h1>Get in touch</h1>
            </div>
        </section>
        <section class="section2">
            <div class="contactform">
                <h5>Drop us a line...</h5>
                <form action="#">
                    <label for="firstname"><i class="cntfrmicn fa fa-user"></i> <input class="form-fields" name="firstname" type="text"></label> <label for="email"><i class="cntfrmicn fa fa-envelope"></i> <input class="form-fields" name="email" type="text"></label> <label for="contact"><i class="cntfrmicn fa fa-phone"></i> <input class="form-fields" name="contact" type="text"></label> <label for="textarea"><i class="cntfrmicn fa fa-comment"></i> 
                    <textarea class="form-fields" cols="30" id="" name="textarea" rows="10"></textarea></label> <button class="form-fields button" type="submit" value="Send">Send <i class="fa fa-paper-plane"></i></button>
                </form>
            </div>
            <script src='https://maps.googleapis.com/maps/api/js?v=3.exp'>
            </script>
            <div class="contmap" style='overflow:hidden;height:550px;width:100%;'>
                <div id='gmap_canvas' style='height:100%;width:100%;'></div>
                <div>
                    <small><a href="http://embedgooglemaps.com">embed google maps</a></small>
                </div>
                <div>
                    <small><a href="http://freedirectorysubmissionsites.com/">free web directories</a></small>
                </div>
                <style>
                                                    #gmap_canvas img{max-width:none!important;background:none!important}
                </style>
            </div>
            <script type='text/javascript'>
                                         function init_map(){var myOptions = {zoom:14,center:new google.maps.LatLng(-37.898677,144.640630),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(-37.898677,144.640630)});infowindow = new google.maps.InfoWindow({content:'<strong>My Location<\/strong><br>Eagle Stadium<br>'});google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);
            </script>
        </section>
    </div>
</body>
</html>

\\\\\\

* {
    margin:0px;
    padding:0px;
}
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing: border-box; }

.clearfix:before, .clearfix:after { display: table; content: ''; }
.clearfix:after { clear: both; }


body {
    background: #1c1c1c;
    color: #333;
    font-weight: normal;
    font-size: 1em;
    font-family: 'Roboto', Arial, sans-serif;
}

input:focus, textarea:focus, keygen:focus, select:focus {
    outline: none;
}
::-moz-placeholder {
    color: #666;
    font-weight: 300;
    opacity: 1;
}

::-webkit-input-placeholder {
    color: #666;
    font-weight: 300;
}

/* contact from design */
.container {
    padding: 20px 50px 70px;
}
.sec1title {
    text-align: center;
}
.sec1title h1 {
        font-size: 40px;
    margin: 25px;
    text-transform: uppercase;
    color: red;
    font-weight: 400;
}
.section2 {
    position: relative;
    overflow: hidden;
}
.section2 .contactform {
    position: absolute;
    top: 0;
    right: 10%;
    z-index: 99;
    background: #393939;
    padding: 30px 40px 70px;
    box-sizing: border-box;
}
.section2 .contactform input.form-fields,
.section2 .contactform button.form-fields,
.section2 .contactform textarea.form-fields {
    padding: 0 0 0 40px;
    display: block;
    box-sizing: border-box;
    width: 350px;
    font-size: 16px;
    background: #323232;
    margin: 7px 0;
    border: 1px solid #00C1A8;
    color: #6BECDB;
    opacity: 0.5;
    min-height: 45px;
    text-shadow: none;
    position: relative;
}
.section2 .contactform textarea.form-fields {
    padding: 8px 40px;
    resize: none;
}
.section2 .contactform button.form-fields.button {
    color: #16F1D4;
    font-size: 14px;
    padding: 0;
    text-transform: uppercase;

}
.section2 .contactform button.form-fields.button:hover {
    background: #00C1A8;
    color: #fff;
    cursor: pointer;
    opacity: 1;
}

.section2 .contactform button.form-fields.button i {
    margin-left:10px;
}

.section2 .contactform h5 {
    color: #16F1D4;
    font-size: 16px;
    margin-bottom: 15px;
}
.section2 .contactform label .cntfrmicn {
    color: #00C1A8;
    padding: 14px;
    position: absolute;
    z-index: 99;
}

@media only screen and (max-width: 660px) {
    .container {
        padding: 10px 20px 30px;
    }
    .contmap {
        height: 475px !important;
    }
    .sec1title h1 {
        font-size: 28px;
    }
    .section2 .contactform { padding: 10px; right: 0; width: 100%; }
    .section2 .contactform input.form-fields, .section2 .contactform button.form-fields, .section2 .contactform textarea.form-fields {
        width: 100%;
    }
}

Answer 1

您可以设置表单的“提交”按钮的onClick事件处理程序，以使用location.reload()或location = location（旧版浏览器的后备）重新加载页面。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="container">
        <section class="section1">
            <div class="sec1title">
                <h1>Get in touch</h1>
            </div>
        </section>
        <section class="section2">
            <div class="contactform">
                <h5>Drop us a line...</h5>
                <form action="#">
                    <label for="firstname"><i class="cntfrmicn fa fa-user"></i> <input class="form-fields" name="firstname" type="text"></label> <label for="email"><i class="cntfrmicn fa fa-envelope"></i> <input class="form-fields" name="email" type="text"></label> <label for="contact"><i class="cntfrmicn fa fa-phone"></i> <input class="form-fields" name="contact" type="text"></label> <label for="textarea"><i class="cntfrmicn fa fa-comment"></i> 
                    <textarea class="form-fields" cols="30" id="" name="textarea" rows="10"></textarea></label> <button class="form-fields button" type="submit" value="Send" onClick="refreshPage()">Send <i class="fa fa-paper-plane"></i></button>
                </form>
            </div>
            <script src='https://maps.googleapis.com/maps/api/js?v=3.exp'>
            </script>
            <div class="contmap" style='overflow:hidden;height:550px;width:100%;'>
                <div id='gmap_canvas' style='height:100%;width:100%;'></div>
                <div>
                    <small><a href="http://embedgooglemaps.com">embed google maps</a></small>
                </div>
                <div>
                    <small><a href="http://freedirectorysubmissionsites.com/">free web directories</a></small>
                </div>
                <style>
                                                    #gmap_canvas img{max-width:none!important;background:none!important}
                </style>
            </div>
            <script type='text/javascript'>
            function refreshPage(){
               console.log("Refreshing page");
               location.reload ? location.reload() : location = location;
           }
            </script>
        </section>
    </div>
</body>
</html>

Answer 2

从javascript调用location.reload()将重新加载页面。

Answer 3

后端中的哪个URL正在处理表单？

如果该URL与该页面相同，浏览器将为您刷新。

<form action="">

如果是另一个，请重定向到此页面。您可以在服务器端或客户端进行操作。

使用JavaScript的另一种解决方案是发送ajax请求并添加onsubmit="location.reload(true)"形式。

https://www.w3schools.com/jsref/event_onsubmit.asp

https://www.w3schools.com/jsref/met_loc_reload.asp

单击表单上的提交后，如何刷新/重新访问页面？

3 个答案: