2017-02-09 3 views
2

Я хочу, чтобы получить входные данные, которые пользователь вводит в мою форму HTML, и иметь возможность печатать их позже на моем веб-сайте. Я хотел бы иметь возможность распечатывать всю информацию о пользователе с выбранными ими пиццами. Я пытался в течение последних нескольких часов, чтобы сделать это, и не повезло :(В поиске, чтобы получить дату, фамилию, имя, адрес и телефон.Получение пользовательских входов из формы HTML

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>Daves Pizza</title>  
 
    <link href="new.css" rel="stylesheet" type="text/css"> 
 
    <script type="text/javascript" src="pizza.js"></script> 
 
    </head> 
 
<body> 
 
    <div align="center"> 
 
     <h5>Today is: <span id="dtfield"></span></h5> 
 
    </div> 
 
    <br> 
 
    <div align="center"> 
 
     <h1>Dave's Pizza Place</h1> 
 
    </div> 
 
    <div align="center"> 
 
     <div class="user"> 
 
      <form id="contact_form" action="mailto: [email protected]" name="userInfo" method="POST" enctype="text"> 
 
      <br> 
 
       <div> 
 
        <label for="datetime">Date:</label> 
 
        <input type="date" name="user_date" /> 
 
       </div> 
 
       <div> 
 
        <label for="firstname">Firstname:</label> 
 
        <input type="text" pattern="[A-Za-z-']+" name="firstname" value="Firstname" maxlength="20"/> 
 
       </div> 
 
       <div> 
 
        <label for="lastname">Lastname:</label> 
 
        <input type="text" pattern="[A-Za-z-']+" name="lastname" placeholder="Lastname" maxlength="20"/> 
 
       </div> 
 
       <div> 
 
        <label for="mail">Address:</label> 
 
        <input type="text" name="user_mail" placeholder="Full Address"/> 
 
       </div> 
 
       <div> 
 
        <label for="tel">Phone#:</label> 
 
        <input type="tel" pattern="[0-9]+"" name="user_phone" placeholder="(403)123-1234"/> 
 
    \t    </div> 
 
      </form> 
 
     </div> 
 
    </div> 
 
    <div align="center"> 
 
     <div class="pizza"> 
 
      <form name="costEstimation"> 
 
       <table border="0"> 
 
        <tr valign="middle"> 
 
         <td> 
 
          <br> 
 
          <b>Choose Your Pizza Type<b><br> 
 
           <input type="radio" name="pizzasize" value="8" checked>Small $8<br> 
 
           <input type="radio" name="pizzasize" value="10">Medium $10<br> 
 
           <input type="radio" name="pizzasize" value="15">Large $15<br> 
 
           <input type="radio" name="pizzasize" value="18">Extra Large $18<br></td> 
 
         <td></td> 
 
        </tr> 
 
        <tr> 
 
         <td> 
 
          <b>Specialities<b><br> 
 
           <input type="radio" name="special" value="3">Super Cheesy $3<br> 
 
           <input type="radio" name="special" value="5">Extra Meaty $5<br> 
 
           <input type="radio" name="special" value="2">Really Veggie $2<br></td> 
 
         <td> 
 
          <b>Extra Toppings </b> 
 
          <br> 
 
          <input type="checkbox" name="cheese" value="1.5">Extra Cheese $1.50<br> 
 
          <input type="checkbox" name="pepperoni" value="1.5">Pepperoni $1.50<br> 
 
          <input type="checkbox" name="mushrooms" value="1.5">Mushrooms $1.50<br> 
 
          <input type="checkbox" name="bacon" value="1.5">Bacon $1.50<br> 
 
          <input type="checkbox" name="olives" value="1.5">Olives $1.50<br> 
 
         </td> 
 
        </tr> 
 
       </table> 
 
      </form> 
 
      <h2>Pizza Cost: </h2><h2><span id="result"></span></h2> 
 
       <input type=button value="Price Your Pizza" onClick="pizza(); return false;"> 
 
       <button type="submit">Send your message</button> 
 
      <br><br><br> 
 
      <table> 
 
       <tr> 
 
        <td> 
 
         <figure> 
 
          <center> 
 
           <img src="cheese.jpg" alt="cheese" height="100" width="100"> 
 
          </center> 
 
         </figure> 
 
        </td> 
 

 
        <td> 
 
         <figure> 
 
          <center> 
 
           <img src="veg.jpg" alt="veg" height="100" width="100"> 
 
          </center> 
 
         </figure> 
 
        </td> 
 

 
        <td> 
 
         <figure> 
 
          <center> 
 
           <img src="meat.jpg" alt="meat" height="100" width="100"> 
 
          </center> 
 
         </figure> 
 
        </td> 
 
       </tr> 
 
      </table> 
 
     </div> 
 
     <br> 
 
     <br> 
 
     <br> 
 
    </div> 
 
</body> 
 
</html>

+0

Вы хотите, чтобы данные отображались на дисплее с использованием Javascript или php? – affaz

+0

* FYI *: '

' устарел в HTML 4. – Justinas

+0

Вы пытаетесь сделать это просто с помощью простого Javascript или используете PHP? – prgrm

ответ

2

Вы должны использовать .. form для сохранения входных значений, введенных пользователем вы можете сделать это либо GET или POST методом здесь является образцом демо с Validation:

<!DOCTYPE HTML> 
<html> 
<head> 
<style> 
.error {color: #FF0000;} 
</style> 
</head> 
<body> 

<?php 
// define variables and set to empty values 
$nameErr = $emailErr = $genderErr = $websiteErr = ""; 
$name = $email = $gender = $comment = $website = ""; 

if ($_SERVER["REQUEST_METHOD"] == "POST") { 
    if (empty($_POST["name"])) { 
    $nameErr = "Name is required"; 
    } else { 
    $name = test_input($_POST["name"]); 
    // check if name only contains letters and whitespace 
    if (!preg_match("/^[a-zA-Z ]*$/",$name)) { 
     $nameErr = "Only letters and white space allowed"; 
    } 
    } 

    if (empty($_POST["email"])) { 
    $emailErr = "Email is required"; 
    } else { 
    $email = test_input($_POST["email"]); 
    // check if e-mail address is well-formed 
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { 
     $emailErr = "Invalid email format"; 
    } 
    } 

    if (empty($_POST["website"])) { 
    $website = ""; 
    } else { 
    $website = test_input($_POST["website"]); 
    // check if URL address syntax is valid (this regular expression also allows dashes in the URL) 
    if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) { 
     $websiteErr = "Invalid URL"; 
    } 
    } 

    if (empty($_POST["comment"])) { 
    $comment = ""; 
    } else { 
    $comment = test_input($_POST["comment"]); 
    } 

    if (empty($_POST["gender"])) { 
    $genderErr = "Gender is required"; 
    } else { 
    $gender = test_input($_POST["gender"]); 
    } 
} 

function test_input($data) { 
    $data = trim($data); 
    $data = stripslashes($data); 
    $data = htmlspecialchars($data); 
    return $data; 
} 
?> 

<h2>PHP Form Validation Example</h2> 
<p><span class="error">* required field.</span></p> 
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"> 
    Name: <input type="text" name="name" value="<?php echo $name;?>"> 
    <span class="error">* <?php echo $nameErr;?></span> 
    <br><br> 
    E-mail: <input type="text" name="email" value="<?php echo $email;?>"> 
    <span class="error">* <?php echo $emailErr;?></span> 
    <br><br> 
    Website: <input type="text" name="website" value="<?php echo $website;?>"> 
    <span class="error"><?php echo $websiteErr;?></span> 
    <br><br> 
    Comment: <textarea name="comment" rows="5" cols="40"><?php echo $comment;?></textarea> 
    <br><br> 
    Gender: 
    <input type="radio" name="gender" <?php if (isset($gender) && $gender=="female") echo "checked";?> value="female">Female 
    <input type="radio" name="gender" <?php if (isset($gender) && $gender=="male") echo "checked";?> value="male">Male 
    <span class="error">* <?php echo $genderErr;?></span> 
    <br><br> 
    <input type="submit" name="submit" value="Submit"> 
</form> 

<?php 
echo "<h2>Your Input:</h2>"; 
echo $name; 
echo "<br>"; 
echo $email; 
echo "<br>"; 
echo $website; 
echo "<br>"; 
echo $comment; 
echo "<br>"; 
echo $gender; 
?> 
+0

Вы только что скопировали код из своего проекта? : D – Justinas

+0

nope, это был мой демо-код, когда я был новичком в программировании ..! – shyamm

1

вам нужно использовать любой сервер си язык для ввода данных от пользователя.

Используйте это утверждение

<form method="GET or POST" action="file_location/file_name(on which you want to get input)"> 

Php очень простой язык, который вы можете узнать его Исли я даю вам пример:

index.html

<form method="GET" action="localhost://getdata.php"> 
<input type="text" name="UserName" /> 
<input type="button" value="Submit" /> 
</form> 

Фокус на тег имени, который я использовал в инструкции ввода «UserName», ваши данные будут отправлены путем привязки к ним пользовательского ввода, а затем вы можете лежали данные, используя PHP с таким именем, как показывает ниже

getdata.php

<?php 
echo "$_GET['UserName']"; 
?> 
1

, если вы хотите получить данные с помощью JavaScript, то,

HTML:

<input type="text" name="name" id="uniqueID" value="value" /> 
    <span id="output"></span> 

JS:

var nameValue = document.getElementById("uniqueID").value; 
document.getElementById("output").innerHTML=nameValue; 

будет работать для вас!

+0

Эй, я сделал это, и это сработало отлично! благодаря – DNkG

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