Is this spaghetti code already? 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?

    &lt;div id="form-board" class="notice" style="height: 200px; min-height: 109px; width: auto;display: none;"&gt;
    &lt;script type="text/javascript"&gt;
        jQuery(document).ready(function(){
            $(".form-button-slide").click(function(){
                $( "#form-board" ).dialog();
                return false;
            });
        });
    &lt;/script&gt;

    &lt;?php
    echo $this-&gt;Form-&gt;create('mysubmit');
    echo $this-&gt;Form-&gt;input('inputs', array('type' =&gt; 'select', 'id' =&gt; 'inputs', 'options' =&gt; $inputs));
    echo $this-&gt;Form-&gt;input('Fields', array('type' =&gt; 'select', 'id' =&gt; 'fields', 'empty' =&gt; '-- Pick a state first --'));

    echo $this-&gt;Form-&gt;input('inputs2', array('type' =&gt; 'select', 'id' =&gt; 'inputs2', 'options' =&gt; $inputs2));
    echo $this-&gt;Form-&gt;input('Fields2', array('type' =&gt; 'select', 'id' =&gt; 'fields2', 'empty' =&gt; '-- Pick a state first --'));

    echo $this-&gt;Form-&gt;end("Submit");
    ?&gt;
&lt;/div&gt;
&lt;div style="width:100%"&gt;&lt;/div&gt;
&lt;div class="form-button-slide" style="float:left;display:block;"&gt;
    &lt;?php echo $this-&gt;Html-&gt;link("Error Results", "#"); ?&gt;
&lt;/div&gt;
&lt;script type="text/javascript"&gt;
    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, //+"&amp;amp; 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&lt;data.length; i++) {
                        sel.append('&lt;option value="' + data[i].id + '"&gt;' + data[i].name + '&lt;/option&gt;');
                    }
                }
            });
            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, //+"&amp;amp; 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&lt;data.length; i++) {
                        sel.append('&lt;option value="' + data[i].id + '"&gt;' + data[i].name + '&lt;/option&gt;');
                    }
                }
            });
            return false;
        });
    });
&lt;/script&gt;
Move all your Javascript out of the way.
From Yahoo's Best Practices for Speeding Up Your Web Site:

Make JavaScript and CSS External
Many of these performance rules deal with how external components are managed. However, before these considerations arise you should ask a more basic question: Should JavaScript and CSS be contained in external files, or inlined in the page itself?
Using external files in the real world generally produces faster pages because the JavaScript and CSS files are cached by the browser. JavaScript and CSS that are inlined in HTML documents get downloaded every time the HTML document is requested. This reduces the number of HTTP requests that are needed, but increases the size of the HTML document. On the other hand, if the JavaScript and CSS are in external files cached by the browser, the size of the HTML document is reduced without increasing the number of HTTP requests.

Obviously, what's more important right now is to minimize that glorious readability mess, hopefully the (small) performance gain might be just the incentive you needed.
Cache your jQuery objects
You are using $('#inputs') in $(&quot;#mysubmitIndexForm&quot;).submit( ... ); and twice in $(&quot;#inputs&quot;).change( ... );. That's three times jQuery traverses the DOM to find #inputs, what you need to do is:
var inputs = $(&quot;#inputs&quot;);

at the top of your (external) script, and then use $(inputs) instead. Do it for all your objects, even if you're using them once, it will stay with you as a (good) habit.
Avoid inline CSS
Consider moving all your style declarations into an external CSS file. Other than a slight performance gain (similar to external JavaScript), you'll have all your style declarations in one, easy to find, place.

If you do all of the above, your code would look like:
&lt;head&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;myFunkyScript.js&quot;&gt;&lt;/script&gt;    
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;myFunkyStyles.css&quot; /&gt;
&lt;/head&gt;

    ...
        
    &lt;div id=&quot;form-board&quot; class=&quot;notice&gt;
        &lt;?php
        echo $this-&gt;Form-&gt;create('mysubmit');
        echo $this-&gt;Form-&gt;input('inputs', array('type' =&gt; 'select', 'id' =&gt; 'inputs', 'options' =&gt; $inputs));
        echo $this-&gt;Form-&gt;input('Fields', array('type' =&gt; 'select', 'id' =&gt; 'fields', 'empty' =&gt; '-- Pick a state first --'));

        echo $this-&gt;Form-&gt;input('inputs2', array('type' =&gt; 'select', 'id' =&gt; 'inputs2', 'options' =&gt; $inputs2));
        echo $this-&gt;Form-&gt;input('Fields2', array('type' =&gt; 'select', 'id' =&gt; 'fields2', 'empty' =&gt; '-- Pick a state first --'));

        echo $this-&gt;Form-&gt;end(&quot;Submit&quot;);
        ?&gt;
    &lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div class=&quot;form-button-slide&quot;&gt;
        &lt;?php echo $this-&gt;Html-&gt;link(&quot;Error Results&quot;, &quot;#&quot;); ?&gt;
    &lt;/div&gt;

and what's up with that empty &lt;div&gt;&lt;/div&gt;? If you just want to add some margin-bottom, why not do that on .notice instead?