CODEWITHSUNDEEP
javascripthtmlcss
Jake Shelly Paul
Jake Shelly Paul

Reputation: 13

How to refresh/revisit the page after clicking submit on a form?

I am making a contact form(which doesn't need to actually contact someone). I want to make it so that when you press the send/submit button, it refreshes the page so that it appears that message has been sent. I am not using Javascript but any ways to do this through Javascript would be appreciated. This is my contact form. This isn't a duplicate because I would prefer if there was a way to do this through Html BUT js answers would be accepted

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%;
    }
}

Upvotes: 0

Views: 3985

Answers (3)

Marina S S
Marina S S

Reputation: 1

This works for me: - on the return button:

                                                            <button onclick="window.history.go(-1); return false;">Volver</button>

in javascript:

$(document).ready(function(e){
    if(window.history.replaceState){
      window.history.replaceState( null, null, window.location.href );
    }
  
    /*Recuperar datos si es un back forward*/
    const [entry] = performance.getEntriesByType("navigation");
    if (entry["type"] === "back_forward"){
      const sugSearchId = localStorage.getItem("sugSearchId");
      const sugSearchIdContent = localStorage.getItem("sugSearchIdContent");
      const sugState = localStorage.getItem("sugState");
      const sugType = localStorage.getItem("sugType");
      const sugSearchText = localStorage.getItem("sugSearchText");
      const searchDateFrom = localStorage.getItem("searchDateFrom");
      const searchDateTo = localStorage.getItem("searchDateTo");
      const pageSelected = localStorage.getItem("pageSelected");
      $('#sugSearchId').val(sugSearchId);
      $('#sugSearchIdContent').val(sugSearchIdContent);
      $('#sugState').val(sugState);
      $('#sugType').val(sugType);
      $('#sugSearchText').val(sugSearchText);
      $('#searchDateFrom').val(searchDateFrom);
      $('#searchDateTo').val(searchDateTo);
      $('#pageSelected').val(pageSelected);
      $('#searchForm').submit(); 
    }

    /*Submit onclick storage*/
    $(document).on("click","#buttonSubmit",function(){
         localStorage.setItem("sugSearchId", $("#sugSearchId").val());
         localStorage.setItem("sugSearchIdContent", $("#sugSearchIdContent").val());
         localStorage.setItem("sugState", $("#sugState").val());
         localStorage.setItem("sugType", $("#sugType").val());
         localStorage.setItem("sugSearchText", $("#sugSearchText").val());
         localStorage.setItem("searchDateFrom", $("#searchDateFrom").val());
         localStorage.setItem("searchDateTo", $("#searchDateTo").val());
         localStorage.setItem("pageSelected", 1);
      });   
});

Upvotes: -1

user10108359
user10108359

Reputation:

You can set the form's submit button's onClick event handler to reload the page with location.reload() or location = location (fallback for older browsers).

<!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>

Upvotes: 0

rkouye
rkouye

Reputation: 533

Which url in your backend is handling the form?

If it is the same url as this page, the browser will refresh it for you.

<form action="">

If it is another one, redirect to this page. You can do it server-side or client side.

Another solution using javascript would be to send an ajax request and add on the form onsubmit="location.reload(true)".

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

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

Upvotes: 0

Related Questions