Question

我的目标是在按下“提交”按钮后在弹出窗口中显示表单输入数据。问题是某些字段不能为空，因此我使用了必选属性，当按钮具有onClick功能时，该属性似乎不起作用。如果我使用onSubmit选项，则不会出现弹出窗口。

HTML：

   <form id="form1" name="form1" action="" method="post">
<p><b> First Name:</b> <input type="text" name="firstname" size="30" maxlength="25" required />
</p>
<p><b>Last Name:</b> <input type="text" name="lastname" size="30" maxlength="25" required />
</p>
<p><b>Gender: </b> 
    <select name="gender" required />
        <option value="Female">Female</option>
        <option value="Male">Male</option>
</select>
</p>
<p><b>Age:</b>
        <input type="text" name="age" size="30" min="18" max="100" required />
    </p>
<p><b>Email:</b>
    <input type="email" name="email" size="30" maxlength="50" required />
</p>
<p><b>Website:</b>
        <input type="url" name="website" size="30" maxlength="50" required />
    </p>

<p><b>Comment:</b>
<br/>
    <textarea name="comment" cols="20" rows="4" size="30" maxlength="255">Enter your text</textarea>
</p>
<button type="submit" value="submit" onsubmit="display();" id="save">Submit</button>

</form>
<script src="JS/contactForm.js"></script>

Javascript：

function display() {

  DispWin = window.open('','NewWin', 'toolbar=no,status=no,width=400,height=500')
  message = "<b>Submitted inputs: </b><br/> <br/>" + "<b>First Name: </b>" + document.form1.firstname.value + "<br/>";
  message += "<b>Last Name: </b>" + document.form1.lastname.value + "<br/>";
  message += "<b>Gender: </b>" + document.form1.gender.value + "<br/>";
  message += "<b>Last Name: </b>" + document.form1.age.value + "<br/>";
  message += "<b>Last Name: </b>" + document.form1.email.value + "<br/>";
  message += "<b>Last Name: </b>" + document.form1.website.value + "<br/>";
  message += "<b>Comment: </b>" + document.form1.comment.value + "<br/>";
  DispWin.document.write(message);
}

我尝试搜索类似的问题，但找不到任何东西。希望有人可以指导我如何解决此问题，或者教我如何更好地使用Google。

干杯！

Answer 1

在你的显示函数中，在执行函数代码之前添加一个表单是否有效的检查。

例如，如果您使用的是 jquery 库：

function display() {
  if (($('form1')[0].checkValidity()) {
   // your rest of code
  }
}

Answer 2

使按钮变为

<input type="submit" value="submit" id="save" />

，然后将onsubmit放到form标记中，现在它可以工作了。

<form id="form1" onsubmit="display()" name="form1" action="" method="post">

现在可以使用了。

Answer 3

提供信息丰富的方式回答您的问题

请不要对按钮进行任何更改，只需删除按钮上的 onsubmit =“ display（）” 并添加到您的表单标签即可。您也可以使用javascript提交表单，同时使用onclick并在javascript端放置更多验证条件（ if-else ），与那些不能已使用必填项进行验证。

Answer 4

尝试：

<form id="form1" name="form1" action="" method="post">
    <p><b> First Name:</b> <input type="text" name="firstname" size="30" maxlength="25" required />
    </p>
    <p><b>Last Name:</b> <input type="text" name="lastname" size="30" maxlength="25" required />
    </p>
    <p><b>Gender: </b> 
        <select name="gender" required />
            <option value="Female">Female</option>
            <option value="Male">Male</option>
    </select>
    </p>
    <p><b>Age:</b>
            <input type="text" name="age" size="30" min="18" max="100" required />
        </p>
    <p><b>Email:</b>
        <input type="email" name="email" size="30" maxlength="50" required />
    </p>
    <p><b>Website:</b>
            <input type="url" name="website" size="30" maxlength="50" required />
        </p>

    <p><b>Comment:</b>
    <br/>
        <textarea name="comment" cols="20" rows="4" size="30" maxlength="255">Enter your text</textarea>
    </p>
    <button type="submit" value="submit" id="save">Submit</button>

    </form>

    <script>
        document.getElementById("form1").addEventListener("submit", function(event){
            event.preventDefault();
            DispWin = window.open('','NewWin', 'toolbar=no,status=no,width=400,height=500')
            message = "<b>Submitted inputs: </b><br/> <br/>" + "<b>First Name: </b>" + document.form1.firstname.value + "<br/>";
            message += "<b>Last Name: </b>" + document.form1.lastname.value + "<br/>";
            message += "<b>Gender: </b>" + document.form1.gender.value + "<br/>";
            message += "<b>Last Name: </b>" + document.form1.age.value + "<br/>";
            message += "<b>Last Name: </b>" + document.form1.email.value + "<br/>";
            message += "<b>Last Name: </b>" + document.form1.website.value + "<br/>";
            message += "<b>Comment: </b>" + document.form1.comment.value + "<br/>";
            DispWin.document.write(message);
        });

    </script>

HTML必需属性无法与按钮功能一起使用

4 个答案: