I post the following code writen all by hand. Why I have the feeling that it is a western spaghetti on its own. Second, could that be written better?
<div id="form-board" class="notice" style="height: 200px; min-height: 109px; width: auto;display: none;">
<script type="text/javascript">
jQuery(document).ready(function(){
$(".form-button-slide").click(function(){
$( "#form-board" ).dialog();
return false;
});
});
</script>
<?php
echo $this->Form->create('mysubmit');
echo $this->Form->input('inputs', array('type' => 'select', 'id' => 'inputs', 'options' => $inputs));
echo $this->Form->input('Fields', array('type' => 'select', 'id' => 'fields', 'empty' => '-- Pick a state first --'));
echo $this->Form->input('inputs2', array('type' => 'select', 'id' => 'inputs2', 'options' => $inputs2));
echo $this->Form->input('Fields2', array('type' => 'select', 'id' => 'fields2', 'empty' => '-- Pick a state first --'));
echo $this->Form->end("Submit");
?>
</div>
<div style="width:100%"></div>
<div class="form-button-slide" style="float:left;display:block;">
<?php echo $this->Html->link("Error Results", "#"); ?>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
$("#mysubmitIndexForm").submit(function() {
// we want to store the values from the form input box, then send via ajax below
jQuery.post("Staffs/view", { data1: $("#inputs").attr('value'), data2:$("#inputs2").attr('value'),data3:$("#fields").attr('value'), data4:$("#fields2").attr('value') } );
//Close the dialog
$( "#form-board" ).dialog('close')
return false;
});
$("#inputs").change(function() {
// we want to store the values from the form input box, then send via ajax below
var input_id = $('#inputs').attr('value');
$.ajax({
type: "POST",
//The controller who listens to our request
url: "Inputs/getFieldsFromOneInput/"+input_id,
data: "input_id="+ input_id, //+"& lname="+ lname,
success: function(data){//function on success with returned data
$('form#mysubmit').hide(function(){});
data = $.parseJSON(data);
var sel = $("#fields");
sel.empty();
for (var i=0; i<data.length; i++) {
sel.append('<option value="' + data[i].id + '">' + data[i].name + '</option>');
}
}
});
return false;
});
$("#inputs2").change(function() {
// we want to store the values from the form input box, then send via ajax below
var input_id = $('#inputs2').attr('value');
$.ajax({
type: "POST",
//The controller who listens to our request
url: "Inputs/getFieldsFromOneInput/"+input_id,
data: "input_id="+ input_id, //+"& lname="+ lname,
success: function(data){//function on success with returned data
$('form#mysubmit').hide(function(){});
data = $.parseJSON(data);
var sel = $("#fields2");
sel.empty();
for (var i=0; i<data.length; i++) {
sel.append('<option value="' + data[i].id + '">' + data[i].name + '</option>');
}
}
});
return false;
});
});
</script>
