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

У меня есть форма для связи с нами, и в основном я хочу, чтобы пользователь нажал кнопку отправки, а затем, чтобы эти данные хранились в удаленной базе данных на сервере. Проблема в том, что я не знаю, как связать вещи javascript и php с кнопкой.Как связать кнопку загрузки с 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>

источник

2016-03-18 Anonymous

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

метод использования в вашей форме 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>

больше о почте и получить функцию here

и HTML представить here

источник

2016-03-18 22:24:58

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

<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. Вы ставите его с помощью bootstrap css.

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

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

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

Magical 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(); 
}

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

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

Например:

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

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

источник

2016-03-18 22:26:14

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

@CodeMan. Я обновил свой ответ. –

@CodeMan - И у меня была другая мысль, поэтому я снова обновил свой ответ. –

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

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

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

jsFiddle Demo

<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, here are some free beginner-level tutorials, чтобы вы начали. (Это я узнал сам, и они свободны)

источник

2016-03-18 23:28:29 gibberish

Это не работает для меня. Извините –

Вы добавили ссылку '

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

ответ

Смежные вопросы