按提交html后显示图像

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，因此我似乎无法通过其他任何验证（例如，检查名称字段是否为null）来传递它。

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

是否可以在我的else语句中粘贴一个与此等效的Javascript，以便仅在表单实际提交正确且事先通过验证检查的情况下才显示它？

谢谢

Answer 1

在jquery中做所有的事情。

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

Answer 2

您应该使用jQuery的.submit()事件处理程序，而不是将onclick属性附加到.submit()按钮。 如果用户通过Enter键提交表单， 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中将处理程序附加到click事件很容易（这也是一种好习惯）。

我几乎总是使用以下模式进行表单验证（以及在form submit时，而不是click “ submit按钮，因为除了click按钮之外，还有其他提交表单的方法）。

$(document).ready(function () {
    var formIsValid = function formIsValid () {
        // your validation routines go here
        // return a single boolean for pass/fail validations
        var name =document.forms.myForm.fname.value;
        return !!name; // will convert falsy values (like null and '') to false and truthy values (like 'fred') to true.
    };
    $('form').submit(function (e) {
        var allGood = formIsValid();
        if (!allGood) {
            e.preventDefault();
        }
        $('#image1').toggle(allGood); // hide if validation failed, show if passed.
        return allGood; // stops propagation and prevents form submission if false.
    });
});