Interacting with Zend forms using AJAX and JavaScript's onchange event

Question

Interacting with Zend forms using AJAX and JavaScript's onchange event

I'm currently working on a code that utilizes the onchange event in my application. Here's the code snippet I have so far:

.Phtml

    <script type="text/javascript">

    function submit()
    {
        $id = intval($_GET['id']);
        $satellite = intval($_GET['satellite_id']);

        if ($id == 0)
        {
            echo "Please select a Region";
        }
        else
        {
            $query = "select * from satellites where region_id = '".$id."'";
            $query = mysql_query($query);
            echo "<select name='satellite_id'><option value=''>-- select one --</option>";
            while ($row = mysql_fetch_assoc($query))
            {
                echo "<option value='".$row['satellite_id']."'".($row['satellite_id']==$satellite?" selected":"").">".$row['satellite_name']."</option>";
            }
            echo "</select>";
            //DisplayFormRow ("Satellite", FormDropDownBox ("satellite_id", $SatelliteARY, $Result['satellite_id']));
        }
    }

    </script

//zend code Form

    $region_name = new Zend_Form_Element_Select('region_name');
            $region_name->setAttribs(array('style' => 'width: 150px;'));  
            $region_name ->setLabel('Region')
                ->onchange('this.form.submit();') //tried this code ->onchange('javascript:submit();')
                    ->addMultiOption('--Select One--', '--Select One--');

            $mdlRegions = new Model_Regions();
            $regions = $mdlRegions->getRegions();       
            foreach ($regions as $region)
            {
                $region_name->addMultiOption($region->region_id, $region->region_name, $region->region_short_name);
            }           
//model

    <?php

    class Model_Regions extends Zend_Db_Table_Abstract
    {

        protected $_name = 'regions';
        //protected $_name = 'smmedetails';

        public function getregion($region_id)
        {
            $region_id = (int)$region_id;
            $row = $this->fetchRow('region_id = ' . $region_id);
            if (!$row) {
            throw new Exception("Could not find row $region_id");
            }
            return $row->toArray();
        }

        public function smmedetails2region($region_name)
        {
            $data = array(
                'region_name'=> $region_name
            );
             return $this->insert($data);
        }

        public function getRegions()
        {
            $select = $this->select();
            return $this->fetchAll($select);
        }


    }

//controller

     public function registerAction()
        {
            $this->view->headScript()->appendFile('/js/ui/jquery.ui.autocomplete.js');
            $form = new Form_SmmeDetails();       
            $this->view->form = $form;

            if ($this->getRequest()->isPost()) {
                $formData = $this->getRequest()->getPost();
                if ($form->isValid($formData)) {                

                    $companyname = $form->getValue('companyname');
                    $companytradingname = $form->getValue('companytradingname');
                    $region_name = $form->getValue('region_name');  
                    $satellite_name = $form->getValue('satellite_name');   
                    $city = $form->getValue('city');                   
                    $companyaddress = $form->getValue('companyaddress');               
                    $addresscode = $form->getValue('addresscode');
                    $companypostaladdress = $form->getValue('companypostaladdress');
                    $postalcode = $form->getValue('postalcode');
                    $companyphonenumber = $form->getValue('companyphonenumber');
                    $companyfaxnumber = $form->getValue('companyfaxnumber');
                    $companycellnumber = $form->getValue('companycellnumber');                
                    $businessemailaddress = $form->getValue('businessemailaddress');
                    $businesswebsite = $form->getValue('businesswebsite');


                    $smmedetails = new Application_Model_DbTable_SmmeDetails();
                    $smmeid = $smmedetails ->smmedetailsSmmeDetails($companyname, $companytradingname, $region_name, $satellite_name, $city, $companyaddress, $addresscode, $companypostaladdress, $postalcode, $companyphonenumber, $companyfaxnumber, 
                    $companycellnumber, $businessemailaddress, $businesswebsite);


                    // $region = new Application_Model_DbTable_Region();
                     //$region ->smmedetails2region($formData, $smmedetails->smmeid);




                    $this->_redirect('/admin/smme/register2/smmeid/'.$smmeid);
                } else {
                    $form->populate($formData);
                }

        }
        }

I am trying to implement a functionality where a hidden input select called "satellite" is displayed when a region option is selected. The satellite options should vary based on the region selected. For example, if the user selects "Gauteng" as the region, the available cities could be "Johannesburg" and "Pretoria". The region and satellite options are fetched from a database table using their respective names and IDs. However, I keep encountering an error: "Method onchange does not exist." I was advised not to use the onchange method. Should I consider using AJAX instead? Can I use JavaScript and SQL queries in the view, or should I handle them as actions? Any guidance on this issue would be greatly appreciated.

Thank you for your assistance.

javascript ajax zend-framework zend-form

Answer 1

Answer №1

Here are a few recommendations for your current setup.

Instead of using the onChange function in JavaScript or jQuery directly within the HTML, consider including an external JavaScript file. This approach will make your code simpler to maintain and debug, as well as allowing for easier reuse in the future. Check out the documentation for onChange and getJson for more information on how to implement these functions effectively. When it comes to testing, consider using QUnit for a streamlined testing process.

Additionally, if you are utilizing Zend libraries for handling database queries, such as Model_Regions and $region_name, it is advisable to make use of these libraries instead of direct mysql calls. This will allow you to build a robust library that can be easily expanded upon in the future, while also ensuring that your SQL queries are composed more efficiently and securely.

For the controller, consider implementing a RestController with a Restful Route. You can refer to this tutorial for more detailed guidance on setting up RESTful services with Zend Framework.

I hope these suggestions prove helpful in resolving the issues you are facing. Feel free to reach out if you require any further assistance.

Answer 2

Here are a few recommendations for your current setup.

Instead of using the onChange function in JavaScript or jQuery directly within the HTML, consider including an external JavaScript file. This approach will make your code simpler to maintain and debug, as well as allowing for easier reuse in the future. Check out the documentation for onChange and getJson for more information on how to implement these functions effectively. When it comes to testing, consider using QUnit for a streamlined testing process.

Additionally, if you are utilizing Zend libraries for handling database queries, such as Model_Regions and $region_name, it is advisable to make use of these libraries instead of direct mysql calls. This will allow you to build a robust library that can be easily expanded upon in the future, while also ensuring that your SQL queries are composed more efficiently and securely.

For the controller, consider implementing a RestController with a Restful Route. You can refer to this tutorial for more detailed guidance on setting up RESTful services with Zend Framework.

I hope these suggestions prove helpful in resolving the issues you are facing. Feel free to reach out if you require any further assistance.

Answer 3

Answer №2

Thank you for reaching out with your inquiry. Here is my approach to the task:

Firstly, I create the form and then establish an action within a controller. Let's call it getmajorgroupAction(). Within that action, I disable the layout and retrieve the necessary results based on the provided ID. Subsequently, in the view file, I iterate through the results.

The resulting output from the call would look like this:

<option value="1">1</option>
<option value="2">2</option>

and so on.

Currently, I prefer using jquery for this task. In the previous post you mentioned in your email, I was utilizing a different method. Here is an example of how I implement it:

jQuery(document).ready(function() {
jQuery("#division").change(function () {
var division = jQuery("#division").val();
jQuery("#major_group").load("/module/getmajorgroup/", {division_id: division} );});
});

I hope this explanation clarifies things for you.

Answer 4

Thank you for reaching out with your inquiry. Here is my approach to the task:

Firstly, I create the form and then establish an action within a controller. Let's call it getmajorgroupAction(). Within that action, I disable the layout and retrieve the necessary results based on the provided ID. Subsequently, in the view file, I iterate through the results.

The resulting output from the call would look like this:

<option value="1">1</option>
<option value="2">2</option>

and so on.

Currently, I prefer using jquery for this task. In the previous post you mentioned in your email, I was utilizing a different method. Here is an example of how I implement it:

jQuery(document).ready(function() {
jQuery("#division").change(function () {
var division = jQuery("#division").val();
jQuery("#major_group").load("/module/getmajorgroup/", {division_id: division} );});
});

I hope this explanation clarifies things for you.

Answer 5

Answer №3

Appreciate the guidance, I managed to solve the issue by utilizing the formula provided below. However, I am encountering a recurring problem where the second select option consistently appears whenever I click on the first select. For instance, if a user selects the wrong option and tries again, instead of correcting the initial selection, a new field is generated. It seems to be stuck in a continuous loop. Here is the script I am currently using:

<script type="text/javascript">
$(document).ready(function() {
        $("#region_name").on('change', function () {
                ajaxAddField();
            }
        );
        }
    );

    // Fetch new element's HTML from the controller
    function ajaxAddField() 
    {
        $.ajax(
        {
            type: "POST",
            url: '<?php echo $this->baseURL()?>/admin/ajax/get-cities/city/' + encodeURIComponent($('#region_name').val()),
            success: function(newElement) {
            // Insert new element before the Add button
            //$(this).prev().remove().end().before('#city-label');
            $("#city-label").before(newElement);
            }
        }
        );
    }
</script>

Answer 6

Appreciate the guidance, I managed to solve the issue by utilizing the formula provided below. However, I am encountering a recurring problem where the second select option consistently appears whenever I click on the first select. For instance, if a user selects the wrong option and tries again, instead of correcting the initial selection, a new field is generated. It seems to be stuck in a continuous loop. Here is the script I am currently using:

<script type="text/javascript">
$(document).ready(function() {
        $("#region_name").on('change', function () {
                ajaxAddField();
            }
        );
        }
    );

    // Fetch new element's HTML from the controller
    function ajaxAddField() 
    {
        $.ajax(
        {
            type: "POST",
            url: '<?php echo $this->baseURL()?>/admin/ajax/get-cities/city/' + encodeURIComponent($('#region_name').val()),
            success: function(newElement) {
            // Insert new element before the Add button
            //$(this).prev().remove().end().before('#city-label');
            $("#city-label").before(newElement);
            }
        }
        );
    }
</script>

Interacting with Zend forms using AJAX and JavaScript's onchange event

Answer №1

Answer №2

Answer №3

Similar questions

Can I use more than one AudioContext at a time?

Unable to retrieve the parent element of an event target in AngularJS when using Internet Explorer 11

I noticed that when I use jQuery to add a class to an <li> element, the class is added successfully but then quickly removed. I'm wondering if this could be a conflict with

Adding items to the array is only effective when done within the loop

Tips for Customizing the Appearance of Material UI Select Popups

Is there a way to remove the "next" button from the last page in a table?

Connecting radio buttons to data in Vue using render/createElement

Implementing Bootstrap tooltips in content that can be scrolled

Exploring the concepts of arc functions in discord/js programming

angular primeng table has a checkbox to select all checkboxes

Unlocking request header field access-control-allow-origin on VueJS

Displaying the chosen option from the V-menu in a different section of the application. Utilizing Vuetify

Looping through properties of objects with the help of angularJS ng-repeat is known as using objects['propertyname&#

What could be causing my node.js postgres function to return undefined even though I verified the value is displayed in the console?

Updating ASP Update panel causes unexpected issues with jQuery star rating system

Is there a way to extract a username from LDAP?

Using Javascript and Node.js to send a JSON request

Tips for avoiding the automatic transition to the next slide in SwiperJS

Refresh a specific div element within an HTML file when the AJAX call is successful

Incorporate a JavaScript variable within the src attribute of a script tag