按提交HTML后显示图像

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

<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语句坚持这样它只会显示，如果形式提交实际上通过正确的验证检查事先？

谢谢

来源

2013-05-30 Jim

'name'是什么？ –

表单名字字段，其中人们输入他们的名字 – Jim

做所有在jquery中。

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

来源

2013-05-30 14:02:49 user1

嗯，这将工作干杯。不知道为什么我没有想到... – Jim

如果他们通过输入按钮提交表单会发生什么？在这种情况下，“onclick”不会触发。 – crush

我的表单甚至没有提交回车，问题解决了......哈哈，我现在刚刚掌握了一些东西，这不适用于任何主要的问题 – Jim

你应该使用onclick属性附加到提交按钮的jQuery .submit()事件处理程序来代替。在用户通过回车键提交表单时，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(); 

});

来源

2013-05-30 14:03:19 crush

是的欢呼，这是很好的建议，我只是现在做一些简单的，谢谢，但我会记住这一点 – Jim

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

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

由于您使用jQuery的，附加处理程序来点击JavaScript事件是一个单元（这也是一个很好的做法）。

我几乎总是使用表单验证以下模式（和上form的submit，而不是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. 
    }); 
});

来源

2013-05-30 14:14:53 pete

按提交HTML后显示图像

回答

相关问题