2012-04-20 74 views
0

我有一個函數,在提交表單時檢查某個類型的所有元素,並在元素之一未驗證時阻止提交。我使用jQuery來查找頁面中的所有表單,並將這個函數附加到它們的'onsubmit'事件中。從jQuery的表單中傳遞'this'

這個問題與功能檢查所有所有類型的元素一樣,它會阻止表單被提交,如果在另一個表單中存在無效元素,即使它沒有被提交,所以他們不會提交沒關係。

爲了解決這個問題,我改變了我的函數來檢查某個類型的所有元素來接受一個表單的參數,然後只驗證那個表單中的元素。到現在爲止還挺好。

但是,當函數附加到頁面上的所有表單使用jQuery時,我怎樣才能指定表單的參數?

這裏的此刻的jQuery代碼:

jQuery("form").submit(function() { 
    return CheckElements(); 
}); 

我需要通過電流形式,無論是作爲ID或對象。例如:

jQuery("form").submit(function() { 
    return CheckElements(SOME WAY OF PASSING THE FORM); 
}); 

這是可能的,如果是的話,它如何執行?

+2

哼哼,有你試着用'this'? – sp00m 2012-04-20 14:38:14

+0

你知道嗎,你只需要以其長格式編寫'jQuery'一次?通過將代碼封裝在'(function($){....})(jQuery);'中,無論是否使用了noConflict,都可以使用'$'。 – ThiefMaster 2012-04-20 14:39:49

+0

@ThiefMaster是的,我一直傾向於這樣寫......我不確定爲什麼! – surfitscrollit 2012-04-20 14:42:53

回答

2

您可以簡單地將其作爲參數傳遞:return CheckElements(this);

CheckElements功能可以再看看如像這樣:

function CheckElements(form) { 
    $(':input', form).each(function() { /*do something*/ }); 
} 

如果你喜歡有this點在函數的形式,你可以使用return CheckElements.call(this);來調用你的函數;那麼你不需要該參數,並且在你可以做的功能中,例如$(':input', this)

+0

謝謝,非常感謝! – surfitscrollit 2012-04-20 15:21:18

2
$("form").submit(function() { 
    return CheckElements(this); 
}); 
+0

謝謝:)我標記爲另一個,因爲它更詳細,但你的也會工作。 – surfitscrollit 2012-04-20 15:21:39

1

在這種情況下,您必須首先將類或id分配給表單。例如。

<div class='error' style="display:none; color:red;">the entry by you was invalid</div> 
<form action="XXXX" method="XXXX" class='myForm'> 
<!-- lets say you have following fields --> 
name : <input type = 'text' name = 'name' class = 'field1'> 
age : <input type = 'text' name = 'age' class = 'field2'> 
<input type = 'submit' id='submit_btn'> 
</form> 

現在不是調用函數的onsubmit你可以做以下打電話給你的jQuery函數

$(function(){ 
$("#submit_btn").click(function(){ 
var msg = checkElement();// your function must return false on error 
if(msg == FALSE) 
{ 
$('.error').show(); //create a div with style dispay:none which contains error message to show on error 
} 
else 
{ 
var field1 = $('.field1').attr('value');//fetching the field1 content 
var field2 = $('.field2').attr('value');//fetching the field2 content 

//submit via ajax 
$.ajax({ 
url: 'relative path to the file eg. file.php', 
dta: 'f1='+field1+'&f2='+field2,//placeyour own data here 
type: 'get or post', 
success:function() 
{ 
alert('done');//perform your action 
} 
}); 
return false; 
} 
}); 
}); 

希望這可以幫助你