在弹出窗口中提交表格

我知道这可能看起来像重复，但我似乎无法弄清楚这一点。我想提交一个HTML格式的表单到一个Popup窗口。当我点击提交按钮时，它会返回一个空白页面。我想弹出来显示一个填写表单的所有输入。我想用JavaScript来做。这是我的代码。我希望它从个人信息字段集和个人选择字段集中输出表单中输入的所有信息。我希望它显示为无序列表。在弹出窗口中提交表格

的继承人的Javascript我到目前为止：

<head> 
    <title>My Form</title> 
    <script type="text/javascript"> 
    function display() { 
    dispWin = window.open('','NewWin', 
    'toolbar=no,status=no,width=300,height=200') 

    message = "<ul><li>First Name:" + 
    document.mdForm.first_name.value; 
    message += "<li>Last Name:" + 
    document.mdForm.the_lastname.value; 
    message += "<li>Address:" + 
    document.mdForm.the_address.value; 
    message += "</ul>"; 

    dispWin.document.write(message); 
    } 
    </script>

继承人的HTML：

<body> 
    <h1>My Form</h1> 
    <form name="mdForm" method="post" action=""> 
    <fieldset> 
    <legend>Personal Information</legend> 
    <p><label class="question" for="first_name">What is your First name?    
    </label> 
    <input type="text" id="first_name" name="first_name" 
      placeholder="Enter your First name." 
      size="50" required autofocus /></p> 
    <p><label class="question" for="the_lastname">What is your Last name? 
    </label> 
    <input type="text" id="the_lastname" name="the_lastname" 
      placeholder="Enter your Last name." 
      size="50" required /></p> 
    <p><label class="question" for="the_address">What is you address? 
    </label> 
    <input type="text" id="the_address" name="the_address" 
      placeholder="Enter your address." 
      size="50" required /></p> 
    <p><label class="question" for="the_email">What is your e-mail address? 
    </label> 
    <input type="email" id="the_email" name="the_email" 
      placeholder="Please use a real one!" 
      size="50" required /></p> 
    </fieldset> 
    <fieldset> 
    <legend>Personal Choices</legend> 
    <p><span class="question">Please check all your favorite foods:</span> 
    </br> 

    <input type="checkbox" id="food_one" name="some_statements[]" 
      value="Buffalo Wings" /> 
    <label for="food_one">Buffalo Wings</label><br/> 
    <input type="checkbox" id="food_two" name="some_statements[]" 
      value="Enchiladas" /> 
    <label for="food_two">Enchiladas</label><br/> 
    <input type="checkbox" id="food_three" name="some_statements[]" 
      value="Hamburgers" /> 
    <label for="food_three">Hamburgers</label><br/> 
    <input type="checkbox" id="food_four" name="some_statements[]" 
      value="Spaghetti" /> 
    <label for="food_four">Spaghetti</label></p> 

    <p><span class="question">Select your favorite online store:</span><br/> 
    <input type="radio" id="the_amazon" name="online_store" 
      value="amazon" /> 
    <label for="the_amazon"><a href="http://www.amazon.com"  target="_blank">Amazon</label><br/></a> 
    <input type="radio" id="bestbuy_electronics" name="online_store" 
      value="bestbuy" /> 
    <label for="bestbuy_electronics"><a href="http:www.bestbuy.com" target="_blank">BestBuy</label><br/></a> 
    <input type="radio" id="frys_electronics" name="online_store" 
      value="frys" /> 
    <label for="frys_electronics"><a href="http:www.frys.com" target="_blank">Frys Electronics</label><br/></a> 
    </p> 
    <p><label for="my_band"><span class="question">Who's your favorite band/ artist?</span></label><br/> 
    <select id="my_band" name="my_band" size="4" multiple> 
      <option value="The Chi-Lites">The Chi-Lites</option> 
      <option value="Michael Buble">Michael Buble</option> 
      <option value="Frank Ocean">Frank Ocean</option> 
      <option value="Labrinth">Labrinth</option> 
    </select> 
</p> 
</fieldset> 
<div id="buttons"> 
<input type="submit" value="Click Here to Submit" onclick="display();" /> 
    or 
<input type="reset" value="Erase and Start Over" /> 
</div> 
</form> 
</body>

来源

2016-12-05 Marco Deleon

你有没有阻止默认提交功能？

尝试：

function display(e) { 
//To stop the submit 
e.preventDefault(); 
... 
Do your Stuff 
... 
//Continue the submit 
FORM.submit(); 
}

来源

2016-12-05 06:43:50

我试过了，它没有工作。它做了同样的事情。 –

希望这就是你要找的，它使用一个输入元素的名称作为问题与值作为anwser！

<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 

 
    <title>JS and HTML test1</title> 
 
    <meta name="description" content="Test1"> 
 
    <meta name="author" content="DubstepGaming"> 
 

 
    <link rel="stylesheet" href="css/styles.css"> 
 
</head> 
 

 
<body> 
 
    <script type="text/javascript"> 
 
    function display() { 
 
    dispWin = window.open('','NewWin', 
 
    'toolbar=no,status=no,width=300,height=200') 
 
    var thangs = document.getElementsByTagName("input") 
 
    for(i = 0; i < thangs.length; i++){ 
 
     var val = thangs[i].value 
 
     var name = thangs[i].name 
 
     dispWin.document.write("<p>Question: " +name+ "| You said: "+val+"</p>") 
 
    } 
 
    } 
 
    </script> 
 
    <h1>My Form</h1> 
 
    <form name="mdForm" method="post" action=""> 
 
    <fieldset> 
 
    <legend>Personal Information</legend> 
 
    <p><label class="question" for="first_name">What is your First name? 
 
    </label> 
 
    <input type="text" id="first_name" name="first_name" 
 
      placeholder="Enter your First name." 
 
      size="50" required autofocus /></p> 
 
    <p><label class="question" for="the_lastname">What is your Last name? 
 
    </label> 
 
    <input type="text" id="the_lastname" name="the_lastname" 
 
      placeholder="Enter your Last name." 
 
      size="50" required /></p> 
 
    <p><label class="question" for="the_address">What is you address? 
 
    </label> 
 
    <input type="text" id="the_address" name="the_address" 
 
      placeholder="Enter your address." 
 
      size="50" required /></p> 
 
    <p><label class="question" for="the_email">What is your e-mail address? 
 
    </label> 
 
    <input type="email" id="the_email" name="the_email" 
 
      placeholder="Please use a real one!" 
 
      size="50" required /></p> 
 
    </fieldset> 
 
    <fieldset> 
 
    <legend>Personal Choices</legend> 
 
    <p><span class="question">Please check all your favorite foods:</span> 
 
    </br> 
 

 
    <input type="checkbox" id="food_one" name="some_statements[]" 
 
      value="Buffalo Wings" /> 
 
    <label for="food_one">Buffalo Wings</label><br/> 
 
    <input type="checkbox" id="food_two" name="some_statements[]" 
 
      value="Enchiladas" /> 
 
    <label for="food_two">Enchiladas</label><br/> 
 
    <input type="checkbox" id="food_three" name="some_statements[]" 
 
      value="Hamburgers" /> 
 
    <label for="food_three">Hamburgers</label><br/> 
 
    <input type="checkbox" id="food_four" name="some_statements[]" 
 
      value="Spaghetti" /> 
 
    <label for="food_four">Spaghetti</label></p> 
 

 
    <p><span class="question">Select your favorite online store:</span><br/> 
 
    <input type="radio" id="the_amazon" name="online_store" 
 
      value="amazon" /> 
 
    <label for="the_amazon"><a href="http://www.amazon.com"  target="_blank">Amazon</label><br/></a> 
 
    <input type="radio" id="bestbuy_electronics" name="online_store" 
 
      value="bestbuy" /> 
 
    <label for="bestbuy_electronics"><a href="http:www.bestbuy.com" target="_blank">BestBuy</label><br/></a> 
 
    <input type="radio" id="frys_electronics" name="online_store" 
 
      value="frys" /> 
 
    <label for="frys_electronics"><a href="http:www.frys.com" target="_blank">Frys Electronics</label><br/></a> 
 
    </p> 
 
    <p><label for="my_band"><span class="question">Who's your favorite band/ artist?</span></label><br/> 
 
    <select id="my_band" name="my_band" size="4" multiple> 
 
      <option value="The Chi-Lites">The Chi-Lites</option> 
 
      <option value="Michael Buble">Michael Buble</option> 
 
      <option value="Frank Ocean">Frank Ocean</option> 
 
      <option value="Labrinth">Labrinth</option> 
 
    </select> 
 
</p> 
 
</fieldset> 
 
<div id="buttons"> 
 
<input type="submit" value="Click Here to Submit" onclick="display();" /> 
 
<input type="reset" value="Erase and Start Over" /> 
 
</div> 
 
</form> 
 
</body>

来源

2016-12-05 07:09:03 Dubst3p

运行代码时，它给了我一个错误并将其应用于我的文件，它只是给我一个空的窗口。 –

在弹出窗口中提交表格

回答

相关问题