I have a normal form in which there is a hidden input that is fixed at page load, another hidden input that is dynamic, and two dynamic select boxes with design copied from http://ift.tt/1dLR50g :
<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link href="/favicon.ico" type="image/x-icon" rel="icon"/><link href="/favicon.ico" type="image/x-icon" rel="shortcut icon"/>
<link rel="stylesheet" href="/css/itnrs.css"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/><link rel="stylesheet" href="http://ift.tt/1ADi0R1"/> <script src="http://ift.tt/wV40hO"></script><script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script><script src="http://ift.tt/1ADhYIN"></script><script>
//<![CDATA[
$(document).ready(function() {
$('#btn-add').click(function(){
$('#select-from option:selected').each( function() {
$('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
$(this).remove();
});
});
$('#btn-remove').click(function(){
$('#select-to option:selected').each( function() {
$('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
$(this).remove();
});
});
$('#btn-up').bind('click', function() {
$('#select-to option:selected').each( function() {
var newPos = $('#select-to option').index(this) - 1;
if (newPos > -1) {
$('#select-to option').eq(newPos).before("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>");
$(this).remove();
}
});
});
$('#btn-down').bind('click', function() {
var countOptions = $('#select-to option').size();
$('#select-to option:selected').each( function() {
var newPos = $('#select-to option').index(this) + 1;
if (newPos < countOptions) {
$('#select-to option').eq(newPos).after("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>");
$(this).remove();
}
});
});
$('#pending').change(function() {
$.ajax({
url: 'recommend/'+$(this).val(),
success:function(data,textStatus) {
$("#students").html(data);
}
});
});
});
//]]></script></head>
<body>
<div class="inner_content">
<select id="pending">
<option value='2978'>511-150602_M S511 - Const... (4)</option>
<option value='3063'>031_M1 S031-Basic O... (4)</option>
</select>
<form method="post" accept-charset="utf-8" id="form1" action="/url">
<div style="display:none;"><input type="hidden" name="_method" value="POST"></div>
<table>
<tr id="students">
<td>
<select id="select-from" multiple="multiple" style="clear:none" size='5'>
<option value="0">Not recommended</option>
</select>
</td>
<td>
<select id="select-to" name='UserId[]' multiple="multiple" style="clear:none" size='5'>
<option value="0">Recommended</option>
</select>
<input type="hidden" name="CourseId" value='0'/>
</td></tr><tr>
<td colspan="2">
<input type="button" id="btn-add" value="Add"/>
<input type="button" id="btn-remove" value="Remove"/>
<input type="button" id="btn-up" value="Up"/>
<input type="button" id="btn-down" value="Down"/>
</td></tr>
</table>
<button type="submit">Submit</button> </form> </div>
</div>
</body>
</html>
The contents of the select-from and select-to boxes are placeholders on page load. I select an option from the #pending select box the change event correctly send an ajax request to update the select-from options. I added options through #btn-add and the options are moved to #select-to. Chrome/Firefox developer console also showed that the CourseId hidden input and the select-to options are updated in the DOM. With Chrome when I click the submit button, the resulting POST request only include the hidden inputs (_method). Firefox is better: I got one selected option although I selected two options and select-to has a name of UserId[] and set to multiple.
What is the problem here?
Aucun commentaire:
Enregistrer un commentaire