2012-04-16 48 views
0

我正在修改註冊表單,並且希望使用jQuery來簡化表單。將下拉列表值傳遞給Grails中的jquery

該網站的用戶可以是Teachers,Donors或兩者。 TeachersDonors不需要的字段,反之亦然。因此,我沒有在所有領域填寫表格並通過詢問他們的教學等級來混淆國際用戶,而是實施了一個下拉列表,以便用戶可以選擇他們的角色,並通過append()方法查看唯一的必填字段。

這是迄今爲止我已經建立了形式:

<g:formRemote name="register" url="[controller:'user', action:'register']" onSuccess="showFields()"> 
    <dl> 
     <dt>User name</dt> 
     <dd><g:textField name="username" value ="${user?.username }"/></dd> 

     <dt>Password</dt> 
     <dd><g:passwordField name="password" value = "${user?.password }"/></dd> 

     <dt>Repeat Password</dt> 
     <dd><g:passwordField name="passwordRepeat" value = "${user?.passwordRepeat }" /></dd> 

     <dt>Account Type</dt> 
     <dd> 
      <g:select name="role" from="${['Teacher', 'Donor', 'Both'] }"/> 
     </dd> 
    </dl> 



    <input type="submit" value="Register" /> 
</g:formRemote> 

和腳本是

<script type="text/javascript"> 
    $('#role').change(function(){ 
     var user = $('#role option:selected').text(); 

     alert(user); 

     if (user == 'Teacher'){ 

     } else if (user == 'Donor'){ 

     } else { 

     } 

    }); 
</script> 

用Firebug,我已經驗證了選擇列表中的ID role,但該功能不會觸發。事實上,無論我做什麼選擇,它都完全被忽視。

這是怎麼發生的?

+0

是$(document).ready內的腳本? – 2012-04-16 20:36:59

+0

@SimonEdström,你的建議是解決方案。如果您將其作爲答案提交,我會接受它。 – Jason 2012-04-16 20:55:17

+0

謝謝,我發佈了一個答案。這可能是基本的你,但我試圖解釋,所以其他人可以理解發生了什麼...... – 2012-04-16 21:47:10

回答

3

問題是腳本在DOM加載之前執行。所以當你試圖綁定事件處理器時,元素不存在。

所以你需要做的是將完整的函數包裝在文檔就緒事件中,它將在加載完整的DOM之後嘗試綁定更改事件處理程序。

$(document).ready(function(){ 
    $('#role').change(function(){ 
     var user = $('#role option:selected').text(); 

     alert(user); 

     if (user == 'Teacher'){ 

     } else if (user == 'Donor'){ 

     } else { 

     } 
    }); 
}); 

或者您可以簡單地在頁面底部添加腳本。這不是推薦,但FYI ...

1

你需要做的:

$("[name='role']").change(function() { 

您選擇使用#name id屬性,使用你選擇的是有角色的名稱屬性的元素上面的代碼。

+0

@Jason說,他檢查了螢火蟲和* id *的作用。 – 2012-04-16 20:37:50

+0

是的,但從標記它不是:)。我懷疑他可能會混淆他在Firebug中看到的內容:) – mattytommo 2012-04-16 20:40:06

+0

問題是我沒有$(document).ready內的函數。所以沒有被調用,因爲沒有明確的函數調用。 – Jason 2012-04-16 20:56:31

相關問題