Как связать кнопку начальной загрузки с PHP-кодом?

Question

У меня есть форма для связи с нами, и в основном я хочу, чтобы пользователь нажимал кнопку отправки, а затем эти данные сохранялись в удаленной базе данных на сервере. Проблема в том, что я не знаю, как связать элементы javascript и php с кнопкой.

Это мой код:

<html>
<head>
    <title>Contact Us</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head> 
<body>
<script type="text/javascript">
    function verify(){
        var forename = document.getElementById("forename").value;
        var surname = document.getElementById("surname").value;
        var comments = document.getElementById("comments").value;

        if(forename == null || forename == ""){
            alert("Forename is empty");
            return false;
        }
        else if(surname == null || surname == ""){
            alert("Surname is empty");
            return false;
        }
        else if(comments == null || comments == ""){
            alert("Comments is empty");
            return false;
        }
        document.register.submit();
    }
    </script>
    <div class="container">
        <h1>Contact Us</h1>
    </div>
    <form>
        <div class="container center_div">
            <div class="panel panel-default">
                <div class="row">
                <fieldset class="form-group">
                    <label for="Forename">Forename</label>
                    <input type="text" class="form-control" id="forename" placeholder="Forename">
                </fieldset>
                <fieldset class="form-group">
                    <label for="Surname">Surname</label>
                    <input type="text" class="form-control" id="surname" placeholder="Surname">
                </fieldset>
                <fieldset class="form-group">
                    <label for="Contact Us">Contact Us</label>
                    <input type="text" class="form-control" id="comments" placeholder="Comments">
                </fieldset>
                <div class="row">
                    <div class"col-md-2">
                        <button type="button" action="contactus.php" class="btn btn-success">Submit</button>
                    </div>
                </div>  
            </div>
        </div>
    </form> 
</body>
</html>

javascript php html twitter-bootstrap

0

user5359494 19 Мар 2016 в 01:19

Это: action="contactus.php" должен быть в теге формы, а не в теге кнопки.

–

devlin carnate

19 Мар 2016 в 01:25

Answer 1

Вы совершили действие не с тем тегом. Удалите его отсюда:

<button type="button" action="contactus.php" class="btn btn-success">Submit</button>

Поместите сюда:

<form action="contactus.php">

Кроме того, измените тип кнопки с типа «кнопка» на «отправить».

<button type="submit" class="btn btn-success">Submit</button>

И это всего лишь семантика, но, возможно, важное различие: кнопка не является кнопкой начальной загрузки. Это кнопка HTML. Вы стилизуете его с помощью начальной загрузки css.

Обновление: OP спросил, как заставить работать «JavaScript-материал». Вот один из способов:

Мне нравятся идентификаторы, поэтому добавьте идентификатор в свой тег формы. Я также хотел бы подробно рассказать о методе отправки формы, поэтому добавьте его в свой тег формы:

<form id="myForm" action="contactus.php" method="post">

Волшебный JavaScript

var form = document.forms.myForm

form.onsubmit = function() {
          var forename = document.getElementById("forename").value;
          var surname = document.getElementById("surname").value;
          var comments = document.getElementById("comments").value;

          if (forename == null || forename == "") {
            alert("Forename is empty");
            return false;
          } else if (surname == null || surname == "") {
            alert("Surname is empty");
            return false;
          } else if (comments == null || comments == "") {
            alert("Comments is empty");
            return false;
          }
          document.register.submit();
}

Вот демонстрация скрипта. Примечание. Я удалил действие из тега формы в демонстрации, потому что он не знает, что такое "contactus.php".

Еще одно примечание: если вы намерены использовать функцию JavaScript только для того, чтобы убедиться, что поля формы заполнены, вам может быть лучше использовать Требуется атрибут ввода HTML.

Например:

<input type="text" class="form-control" id="forename" placeholder="Forename" required>

Вот Fiddle Demo, показывающая, как это работает.

2

devlin carnate 19 Мар 2016 в 04:50

А как насчет javascript? Извините, я новичок в веб-разработке, поэтому буду делать много ошибок. Не могли бы вы исправить мой код, если возможно, просто я немного застрял в данный момент

–

user5359494

19 Мар 2016 в 01:36

- И у меня возникла еще одна мысль, поэтому я снова обновил свой ответ.

–

devlin carnate

19 Мар 2016 в 04:51

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

–

devlin carnate

19 Мар 2016 в 23:20

Answer 2

Используйте метод в вашей форме POST или GET и добавьте действие с именем файла php, который обрабатывает отправку. Образец кода

<form action="example.php" method="post" > <input type="text" name="user_name" placeholder="Name"> <input type="text" name="user_surname" placeholder="Surname"> <input type="email" name="user_email" placeholder="Email"> <input type="password" name="user_pass" placeholder="Password"> <input type="submit" name="submit"> </form>

Подробнее о публикации и получении функции здесь

И html отправьте здесь

0

rahimli 19 Мар 2016 в 01:24

Answer 3

Как новичок, я сначала предлагаю вам использовать jQuery, а не чистый javascript. Во-первых, это намного меньше набора текста и (имхо) намного легче освоить. Вы кодируете в jQuery, а за кулисами jQuery превращает это в javascript во время выполнения.

Поскольку вы используете bootstrap, у вас уже загружена библиотека jQuery (или вы должны есть - в вашем коде его не было). Нажмите Ctrl + U, чтобы увидеть код страницы в связанном примере. В любом случае, поскольку он включен на страницу, вы также можете его использовать.

Ваш пример кода исправлен:

демонстрация jsFiddle

<html>
<head>
    <title>Contact Us</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"   integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ="   crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script type="text/javascript">
        $(function(){
            $('#btnSubmit').click(function(){
                var forename = $("#forename").val();
                var surname = $("#surname").val();
                var comments = $("#comments").val();

                if(forename == null || forename == ""){
                    alert("Forename is empty");
                    return false;
                }
                else if(surname == null || surname == ""){
                    alert("Surname is empty");
                    return false;
                }
                else if(comments == null || comments == ""){
                    alert("Comments is empty");
                    return false;
                }
                $('#frmContact').submit();
            });
        }); //END document.ready
    </script>
</head> 
<body>
    <div class="container">
        <h1>Contact Us</h1>
    </div>
    <div class="container center_div">
        <form id="frmContact" action="contactus.php" method="post">
            <div class="row">
                <fieldset class="form-group">
                    <label for="Forename">Forename</label>
                    <input type="text" class="form-control" id="forename" placeholder="Forename">
                </fieldset>
            </div><!-- .row -->
            <div class="row">
                <fieldset class="form-group">
                    <label for="Surname">Surname</label>
                    <input type="text" class="form-control" id="surname" placeholder="Surname">
                </fieldset>
            </div><!-- .row -->
            <div class="row">
                <fieldset class="form-group">
                    <label for="Contact Us">Contact Us</label>
                    <input type="text" class="form-control" id="comments" placeholder="Comments">
                </fieldset>
            </div><!-- .row -->
            <div class="row">
                <div class="col-xs-8">&nbsp;</div>
                <div class="col-xs-4">
                    <button id="btnSubmit" type="button" class="btn btn-success">Submit</button>
                </div>
            </div><!-- .row -->
        </form>
    </div><!-- .container -->
</body>
</html>

Поскольку вы новичок в jQuery, вот несколько бесплатных учебных пособий для начинающих, которые помогут вам началось. (Это где я учился сам, и они свободны)

0

Community 23 Май 2017 в 15:15

Вы добавили ссылку <script> в код jQuery? Можете ли вы проверить, работает ли jQuery? (Без него Bootstrap не будет работать правильно). Добавьте это в качестве первого оператора в оператор готовности документа: $('body, div').css('background-color','red');. Если все становится красным, jQ работает.

–

cssyphus

19 Мар 2016 в 18:41

Как связать кнопку начальной загрузки с PHP-кодом?

3 ответа

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

Новые вопросы

javascript