Question

我需要帮助 在javascript警告框中显示 我的用户输入来自文本框，单选按钮，复选框和下拉列表，然后按下提交按钮显示它。我目前不知道该怎么做。正如你所看到的，我已经尝试建立一个功能，但很明显我不知道如何处理它。感谢所有帮助，

感谢。

就是这样：

<!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="robneale@gmail.com">

    <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>

Answer 1

如果要在Alert中显示表单数据，只需将输入放在js中的Alert中。

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="robneale@gmail.com">

    <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>

Answer 2

使用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/

如何显示用户输入

2 个答案: