在弹出窗口中提交表单答案

【问题标题】：Submitting Form in a popup window在弹出窗口中提交表单
【发布时间】：2016-12-06 05:22:54
【问题描述】：

我知道这可能看起来像重复，但我似乎无法弄清楚这一点。我想将 HTML 格式的表单提交到弹出窗口。当我点击提交按钮时，它返回一个空白页。我希望弹出窗口显示一个填写表单的所有输入。我想用 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>

【问题讨论】：

标签： javascript html forms

【解决方案1】：

您是否阻止了默认提交功能？

试试：

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

【讨论】：

我试过了，但没有用。它做了同样的事情。