按提交html后显示图像

I have the following code to display an image after i press submit

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

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

Name is retrieved by

名称由检索

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

Where fname is

fname在哪里

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

Only problem is this is using Jquery, so I can't seem to pass it through any of my other validations like checking if the name field is null.

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

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

Is there a Javascript equivalent to this that I can stick in my else statement so it will only show it if the form actually submits properly passing the validation checks beforehand?

有没有相当于我的Javascript,我可以坚持我的else语句所以它只会显示它,如果表格实际提交正确通过验证检查?

Thanks

3 个解决方案

#1

do all that in jquery.

在jquery做所有这些。

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

#2

You should be using the .submit() event handler of jQuery instead of attaching an onclick property to the submit button. The onclick property will not fire its function in the event that a user submits the form via the enter key; however, the .submit() method will capture it as well.

您应该使用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();

});

#3

First, remove the onclick attribute from the submit button:

首先,从提交按钮中删除onclick属性:

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

Since you're using jQuery, attaching handlers to click events in JavaScript is a snap (and it's also a good practice).

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

I almost always use the following pattern for form validation (and on the submit of the form, rather than the click of the submit button because there are other ways to submit forms than clicking the button).

我几乎总是使用以下模式进行表单验证(以及提交表单,而不是单击提交按钮,因为还有其他方式提交表单而不是单击按钮)。

$(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.
    });
});

#1