Как обновить / вернуться на страницу после нажатия кнопки «Отправить» в форме?

Я заполняю контактную форму (для которой не нужно с кем-то связываться). Я хочу сделать так, чтобы при нажатии кнопки отправки / отправки страница обновлялась так, чтобы казалось, что сообщение было отправлено. Я не использую Javascript, но приветствуются любые способы сделать это через Javascript. Это моя контактная форма. Это не дубликат, потому что я бы предпочел, чтобы был способ сделать это через Html, НО ответы 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%;
    }
}

Возможный дубликат Как перезагрузить страницу с помощью JavaScript?

— 22.07.2018 03:20

javascript html css

22.07.2018 03:13

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

138

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вызов location.reload() из javascript перезагрузит страницу.

22.07.2018 03:20

Какой 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

22.07.2018 03:22

Ответ принят как подходящий

Вы можете настроить обработчик события 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.info("Refreshing page");
               location.reload ? location.reload() : location = location;
           }
            </script>
        </section>
    </div>
</body>
</html>

22.07.2018 03:24

Другие вопросы по теме

Установите флажок в asp.net

Изменить имя кнопки, которая представляет идентификатор строки выборки

SVG Изменение определенного цвета - CSS и JS

Переместить текст и параметры во входные html и jquery

Вертикальное выравнивание изображений Bootstrap

Twine CSS перемещает все в div, кроме движения

Вопросы о размещении нечетных объектов в моей CSS-сетке

JQuery с использованием $ (this) и наведения вместе

AngularJS Material - md-autocomplete скрывает часть предложения

Лучший способ визуализировать компоненты React внутри HTML-шаблонов?

Как обновить / вернуться на страницу после нажатия кнопки «Отправить» в форме?

Ответы 3

Другие вопросы по теме

Похожие вопросы