[英]Displaying an image after pressing submit 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,因此我似乎无法通过其他任何验证(例如,检查名称字段是否为null)来传递它。
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? 是否可以在我的else语句中粘贴一个与此等效的Javascript,以便仅在表单实际提交正确且事先通过验证检查的情况下才显示它?
Thanks 谢谢
do all that in jquery. 在jquery中做所有的事情。
if (name==null || name=="")
{
alert("First name must be filled out");
return false;
}
else
{
$('#image1').show()
}
You should be using the .submit()
event handler of jQuery instead of attaching an onclick
property to the submit button. 您应该使用jQuery的
.submit()
事件处理程序,而不是将onclick
属性附加到.submit()
按钮。 The onclick
property will not fire its function in the event that a user submits the form via the enter key; 如果用户通过Enter键提交表单,
onclick
属性将不会触发其功能; however, the .submit()
method will capture it as well. 但是,
.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();
});
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中将处理程序附加到click事件很容易(这也是一种好习惯)。
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). 我几乎总是使用以下模式进行表单验证(以及在
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.
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.