將div附加到網頁 - 使用ajax發佈數據

用戶從下拉字段中選擇一個狀態，然後ajax將該值發佈到數據庫，以檢索位於該州內的高中列表。將div附加到網頁 - 使用ajax發佈數據

我也有其他領域要求他們的姓名和電子郵件地址。一旦用戶選擇了州，它就會找到合適的高中並與高中一起顯示新的下拉菜單，這裏是我遇到問題的地方，它與其他字段重複：名稱和電子郵件。

HTML

<form> 
<div id="inquiry-form"> 
    name: 
    email: 
    state drop-down field 
</div> 

<div id="high-schools"> 
    high school drop-down field 
</div> 

submit button 
</form>

$(document).ready(function() { 

    $('#state').bind('change', function() { 
    var form_data = { 
     state : $('#state').val(), 
     ajax : '1' 
    }; 

    $.ajax({ 
     url: '/recruiter-card/index.php/inquiry/index', 
     type: "POST", 
     data: form_data, 
     success: function(msg) { 
     $("#high-schools").html(msg); 
     } 
    }); 
    return false; 
    }); 

});

我沒有對這個的jsfiddle，這裏是做什麼的選擇狀態之後，它複製所有字段的屏幕截圖。

enter image description here

什麼是顯示高中下拉並保持所有其他字段不變，而不用複製的最佳方式？

來源

2012-04-09 Brad

是否AJAX查詢只返回，高中選項標籤裏面？ – 2012-04-09 17:29:39

@亞當 - 我想它會返回整個網頁。 – Brad 2012-04-09 17:39:01

我懷疑，ajax返回包含多個只有選擇。請嘗試以下操作：

... 
    success: function(msg) { 
    $("#high-schools").html($(msg).find('#high-schools').html()); 
    } 
}); 
...

另請參閱this example。

來源

2012-04-09 17:31:23 scessor

我已經添加了一個示例。 – scessor 2012-04-09 17:44:16

有幾種方法可以解決這個問題。首先，您可以簡單地將後端代碼更改爲僅返回不發送數據的表單部分。所以如果你發送一個狀態，只能在狀態之後返回字段。你也可以使這個依賴於一個額外的參數，如ajax=1，這樣你就可以用多種方式使用這個相同的後端腳本。

另一種方法是使用jQuery去掉你想/不想領域的部分：

$(document).ready(function() { 

    $('#state').bind('change', function() { 
    var form_data = { 
     state : $('#state').val(), 
     ajax : '1' 
    }; 

    $.ajax({ 
     url: '/recruiter-card/index.php/inquiry/index', 
     type: "POST", 
     data: form_data, 
     success: function(msg) { 
     $("#high-schools").html($(msg).filter("#high-schools").html()); 
     } 
    }); 
    return false; 
    }); 

});

來源

2012-04-09 17:32:31

將div附加到網頁 - 使用ajax發佈數據

回答

相關問題