Question

按下提交后，我有以下代码显示图像

<img id="image1" src="images/Coverflow1.jpg" style="display:none;"/>
<input type="submit" name="submit" value="submit" onclick="$('#image1').show()"/>

名称由

检索

var y=document.forms["myForm"]["fname"].value;

fname在哪里

<h4>Name: <input type="text" name="fname" size="61" /></h4>

唯一的问题是这是使用Jquery，所以我似乎无法通过我的任何其他传递它检查名称字段是否为空的验证。

if (name==null || name=="")
    {
    alert("First name must be filled out");
    return false;
    }

是否存在与此相当的Javascript，我可以将其粘贴在我的else语句中，这样只有在表单实际提交正确通过验证检查时才会显示它？

由于

Answer 1

在jquery中做所有这些。

if (name==null || name=="")
{
alert("First name must be filled out");
return false;
}
else
{
$('#image1').show()
}

Answer 2

您应该使用jQuery的.submit()事件处理程序，而不是将onclick属性附加到提交按钮。如果用户通过回车键提交表单，onclick属性将不会触发其功能;但是，.submit()方法也会捕获它。

$("form[name=myForm]").submit(function(e) {
  //get value of name here.
  var name = this.fname.value; //this refers to the form, because that is what is being submitted.

  //Do validation.
  if (name == null || name == "") {
      //If failed, then prevent the form from submitting.
      alert("First name must be filled out.");
      e.preventDefault();
      return;
  }

  //If validation passed, show image.
  $("#image1").show();

});

Answer 3

首先，从提交按钮中删除onclick属性：

<img id="image1" src="images/Coverflow1.jpg" style="display:none;"/>
<input type="submit" name="submit" value="submit" />

由于您正在使用jQuery，因此将处理程序附加到JavaScript中的单击事件非常简单（这也是一种很好的做法）。

我几乎总是使用以下模式进行表单验证（以及submit的{{1}}，而不是form按钮的click，因为还有其他模式提交表单的方法，而不是单击按钮。）

submit

按提交html后显示图像

3 个答案: