Как отобразить мой пользовательский ввод

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

Спасибо.

Это он:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial- scale=1.0"> 
    <title>Questions n Shiz</title> 
    <link rel="stylesheet" href="css/normanlize-signup.css"> 
    <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" href="css/signup.css"> 
    <link rel="icon" href="favicon.ico"> 


<script> 
    function displayOutput() { 
       var input1 = document.getElementById("name").value; 
       var input2 = document.getElementById("mail").value; 
       var input3 = document.getElementById("password").value; 
       var input4 = document.getElementById("name").value; 
       if (input.length === 0) { 
        alert("Please enter a valid input"); 
        return; 
       } 
       document.getElementById("result").innerHTML = "You have entered " + input1; 
       alert(?) 
      } 

    </script> 
</head> 
<body> 

    <form> 

    <h1>Enter Thou'st Information</h1> 

    <fieldset> 

     <legend><span class="number">1</span> Your basic info</legend> 

    <label for="name">Name:</label> 
    <input type="text" id="name" name="user_name" placeholder="Rob Neale"> 

    <label for="mail">Email:</label> 
    <input type="email" id="mail" name="email" placeholder="[email protected]"> 

    <label for="password">Password:</label> 
    <input type="password" id="password" name="password" placeholder="robrastamanneale"> 

    <label>Gender/Sex:</label> 
    <input type="radio" id="male" value="male" name="user_gender"><label for="under_16" class="light">Male</label> 
     <br> 
    <input type="radio" id="female" value="female" name="user_gender"><label for="over_16" class="light">Female</label> 

    </fieldset> 

    <fieldset> 

     <legend><span class="number">2</span> Your profile</legend> 

     <label for="bio">Biography:</label> 
    <textarea id="bio" name="user_bio" placeholder="Some words go in here ;)"></textarea> 

     <label for="house">House:</label> 
     <select id="house" name="user_job"> 
     <optgroup label="House"> 
      <option value="bradman">Bradman</option> 
      <option value="chisholm">Chisholm</option> 
      <option value="helpmann">Helpmann</option> 
      <option value="mawson">Mawson</option> 
      <option value="mccubbin">McCubbin</option> 
      <option value="oliphant">Oliphant</option> 
      <option value="sutherland">Sutherland</option> 
      <option value="thiele">Thiele</option> 
     </optgroup> 

     </optgroup> 


     </select> 

     <label>Subjects</label> 
     <input type="checkbox" id="development" value="interest_maths" name="user_interest"> 
     <label class="light" for="development">Maths C</label> 
     <br> 
     <input type="checkbox" id="design" value="interest_physics" name="user_interest"> 
     <label class="light" for="design">Physics</label> 
     <br> 
     <input type="checkbox" id="business" value="interest_chemistry" name="user_interest"> 
     <label class="light" for="business">Chemistry</label> 
     <br> 
     <input type="checkbox" id="business" value="interest_biology" name="user_interest"> 
     <label class="light" for="business">Biology</label> 
     <br> 
     <input type="checkbox" id="business" value="interest_marine" name="user_interest"> 
     <label class="light" for="business">Marine Biology</label> 
     <br> 
     <input type="checkbox" id="business" value="interest_graphics" name="user_interest"> 
     <label class="light" for="business">Graphics</label> 
     <br> 
     <input type="checkbox" id="business" value="interest_ipt" name="user_interest"> 
     <label class="light" for="business">IPT</label> 
     <br> 
     <input type="checkbox" id="business" value="interest_its" name="user_interest"> 
     <label class="light" for="business">ITS</label> 
     <br> 
     <input type="checkbox" id="business" value="interest_business" name="user_interest"> 
     <label class="light" for="business">Business</label> 
     <br> 
     <input type="checkbox" id="business" value="interest_legal" name="user_interest"> 
     <label class="light" for="business">Legal Studies</label> 
     <br> 
     <input type="checkbox" id="business" value="interest_engineering" name="user_interest"> 
     <label class="light" for="business">Engineering</label> 
     <br> 
     <input type="checkbox" id="business" value="interest_accoutngin" name="user_interest"> 
     <label class="light" for="business">Accounting</label> 


    </fieldset> 


    <legend><span class="number">3</span> Submit!</legend> 
    <input type="checkbox" id="update" value="interest_update" name="user_update"> 
     <label class="light" for="update">Tick to recieve a free complimentary Elliot</label> 


    <button type="submit" onclick="displayOutput()">Submit!</button> 

    </form> 

</body>

источник

2015-11-19 user3176943

Если вы хотите показать данные формы в Alert, выкладывает только вход-й в Алерта в JS.

OBS: оповещения не работает в jsFiddle

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial- scale=1.0"> 
 
    <title>Questions n Shiz</title> 
 
    <link rel="stylesheet" href="css/normanlize-signup.css"> 
 
    <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'> 
 
    <link rel="stylesheet" href="css/signup.css"> 
 
    <link rel="icon" href="favicon.ico"> 
 

 
</head> 
 
<body> 
 

 
    <form> 
 

 
    <h1>Enter Thou'st Information</h1> 
 

 
    <fieldset> 
 

 
     <legend><span class="number">1</span> Your basic info</legend> 
 

 
    <label for="name">Name:</label> 
 
    <input type="text" id="name" name="user_name" placeholder="Rob Neale"> 
 

 
    <label for="mail">Email:</label> 
 
    <input type="email" id="mail" name="email" placeholder="[email protected]"> 
 

 
    <label for="password">Password:</label> 
 
    <input type="password" id="password" name="password" placeholder="robrastamanneale"> 
 

 
    <label>Gender/Sex:</label> 
 
    <input type="radio" id="male" value="male" name="user_gender"><label for="under_16" class="light">Male</label> 
 
     <br> 
 
    <input type="radio" id="female" value="female" name="user_gender"><label for="over_16" class="light">Female</label> 
 

 
    </fieldset> 
 

 
    <fieldset> 
 

 
     <legend><span class="number">2</span> Your profile</legend> 
 

 
     <label for="bio">Biography:</label> 
 
    <textarea id="bio" name="user_bio" placeholder="Some words go in here ;)"></textarea> 
 

 
     <label for="house">House:</label> 
 
     <select id="house" name="user_job"> 
 
     <optgroup label="House"> 
 
      <option value="bradman">Bradman</option> 
 
      <option value="chisholm">Chisholm</option> 
 
      <option value="helpmann">Helpmann</option> 
 
      <option value="mawson">Mawson</option> 
 
      <option value="mccubbin">McCubbin</option> 
 
      <option value="oliphant">Oliphant</option> 
 
      <option value="sutherland">Sutherland</option> 
 
      <option value="thiele">Thiele</option> 
 
     </optgroup> 
 

 
     </optgroup> 
 

 

 
     </select> 
 

 
     <label>Subjects</label> 
 
     <input type="checkbox" id="development" value="interest_maths" name="user_interest"> 
 
     <label class="light" for="development">Maths C</label> 
 
     <br> 
 
     <input type="checkbox" id="design" value="interest_physics" name="user_interest"> 
 
     <label class="light" for="design">Physics</label> 
 
     <br> 
 
     <input type="checkbox" id="business" value="interest_chemistry" name="user_interest"> 
 
     <label class="light" for="business">Chemistry</label> 
 
     <br> 
 
     <input type="checkbox" id="business" value="interest_biology" name="user_interest"> 
 
     <label class="light" for="business">Biology</label> 
 
     <br> 
 
     <input type="checkbox" id="business" value="interest_marine" name="user_interest"> 
 
     <label class="light" for="business">Marine Biology</label> 
 
     <br> 
 
     <input type="checkbox" id="business" value="interest_graphics" name="user_interest"> 
 
     <label class="light" for="business">Graphics</label> 
 
     <br> 
 
     <input type="checkbox" id="business" value="interest_ipt" name="user_interest"> 
 
     <label class="light" for="business">IPT</label> 
 
     <br> 
 
     <input type="checkbox" id="business" value="interest_its" name="user_interest"> 
 
     <label class="light" for="business">ITS</label> 
 
     <br> 
 
     <input type="checkbox" id="business" value="interest_business" name="user_interest"> 
 
     <label class="light" for="business">Business</label> 
 
     <br> 
 
     <input type="checkbox" id="business" value="interest_legal" name="user_interest"> 
 
     <label class="light" for="business">Legal Studies</label> 
 
     <br> 
 
     <input type="checkbox" id="business" value="interest_engineering" name="user_interest"> 
 
     <label class="light" for="business">Engineering</label> 
 
     <br> 
 
     <input type="checkbox" id="business" value="interest_accoutngin" name="user_interest"> 
 
     <label class="light" for="business">Accounting</label> 
 

 

 
    </fieldset> 
 

 

 
    <legend><span class="number">3</span> Submit!</legend> 
 
    <input type="checkbox" id="update" value="interest_update" name="user_update"> 
 
     <label class="light" for="update">Tick to recieve a free complimentary Elliot</label> 
 

 

 
    <button type="button" onclick="displayOutput()">Submit!</button> 
 

 
    </form> 
 
    
 
    
 

 
<script> 
 
    function displayOutput() { 
 
       var input1 = document.getElementById("name").value; 
 
       var input2 = document.getElementById("mail").value; 
 
       var input3 = document.getElementById("password").value; 
 
       var input4 = document.getElementById("name").value; 
 
       if (input1.length === 0) { 
 
        alert("Please enter a valid input"); 
 
        return; 
 
       } 
 
       document.getElementById("result").innerHTML = "You have entered " + input1; 
 
       alert(input1 + ' -' + input2); 
 
      } 
 

 
    </script> 
 
</body>

источник

2015-11-19 11:07:25

Не с вами, разработка пожалуйста. – user3176943

Я изменяю тип кнопки отправки, чтобы не перезагружать страницу, и в вашем коде существует еще одна ошибка: if 'input.length === 0', 'input' не существует, вам нужно поставить 'input1' , я думаю, что это работает –

С JQuery:

$('#formid').submit(function (e) { 
    e.preventDefault(); 
    var formData = $('#formid').serialize(); 
    alert(JSON.stringify(formData)); 
});

http://jsfiddle.net/7coquo4n/2/

И без:

document.getElementById('formid').onsubmit = function (e) { 
    e.preventDefault(); 
    alert(serialize(document.getElementById('formid'))); 
} 

function serialize(form) { 
    if (!form || form.nodeName !== "FORM") { 
     return; 
    } 
    var i, j, q = []; 
    for (i = form.elements.length - 1; i >= 0; i = i - 1) { 
     if (form.elements[i].name === "") { 
      continue; 
     } 
     switch (form.elements[i].nodeName) { 
      case 'INPUT': 
       switch (form.elements[i].type) { 
        case 'text': 
        case 'hidden': 
        case 'password': 
        case 'button': 
        case 'reset': 
        case 'submit': 
         q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value)); 
         break; 
        case 'checkbox': 
        case 'radio': 
         if (form.elements[i].checked) { 
          q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value)); 
         } 
         break; 
       } 
       break; 
      case 'file': 
       break; 
      case 'TEXTAREA': 
       q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value)); 
       break; 
      case 'SELECT': 
       switch (form.elements[i].type) { 
        case 'select-one': 
         q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value)); 
         break; 
        case 'select-multiple': 
         for (j = form.elements[i].options.length - 1; j >= 0; j = j - 1) { 
          if (form.elements[i].options[j].selected) { 
           q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].options[j].value)); 
          } 
         } 
         break; 
       } 
       break; 
      case 'BUTTON': 
       switch (form.elements[i].type) { 
        case 'reset': 
        case 'submit': 
        case 'button': 
         q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value)); 
         break; 
       } 
       break; 
     } 
    } 
    return q.join("&"); 
}

http://jsfiddle.net/7coquo4n/3/

источник

2015-11-19 11:09:19

Должен ли я включить его вот так? <мета кодировка = "UTF-8"> Вопросы н Shiz <сценарий SRC =» http://code.jquery.com/jquery-1.9.1.js "> – user3176943

Я рекомендую включить этот сценарий как раз перед –

как: ' <сценарий SRC = "myscripts.js"> ' –

Как отобразить мой пользовательский ввод

ответ

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