dcsimg
www.webdeveloper.com
Results 1 to 14 of 14

Thread: Auto Populate text box depending on select box selection

  1. #1
    Join Date
    Jul 2006
    Posts
    29

    Auto Populate text box depending on select box selection

    I need to auto populate a text box based on the selection from a select box. Here's an example of what I need to do.

    In the select box I select a storage type. In the database each storage type has a price. When the user selects a storage type a text box is populated with the storage price.

    When the user selects the storage type I need to do a database query the gets the storage price then with ajax without reloading the page it should auto populate the text box. Can anyone give me a simple way of doing this. I am new to AJAX but pretty fluent with php and mysql.

  2. #2
    Join Date
    Jan 2017
    Location
    Coimbatore, India
    Posts
    106
    Hello padanaram,
    Like you said ajax is the way to go. If you can provide some of the code that you have tried, we can point you in the right direction

  3. #3
    Join Date
    Dec 2012
    Posts
    1,446
    Can anyone give me a simple way of doing this.
    If you like it simple, use the jQuery version of Ajax:
    https://learn.jquery.com/ajax/
    Additionally you will need the function addEventListener in order to listen to a selection and the property selectedIndex in order to find out which option has been selected.

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,977
    You also have the option to use preset lists with the use of optiongroup https://www.w3schools.com/tags/tag_optgroup.asp what would be your first list selection becomes the option group title and then the subsequent options listed are selectable elements that can be evaluated fairly easy for which option group the chosen item belongs to.

    There is a post where a question about populating options in a drop down was posted and an example I put up of a way of doing a similar list is available on this forum for you to study and see if it fits your needs.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  5. #5
    Join Date
    Jul 2006
    Posts
    29
    I haven't tried any AJAX yet. I was hoping someone could put an example up here. I did find some code online that may do it but I am new to AJAX.

    Here is the code I found. It may be similar to what I need. I know it calls a php script, but I am not sure what kind of out put I need from the script. I am also not sure about the syntax of the event handler for the select box and how to populate the textbox.

    [QUOTE]
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){
    $('select[name=id]').on('change', function(){
    var id = $(this).val();
    $.ajax(url: 'getDataFromSQL.php?id=' + id,
    success: function(data){
    %0
    Last edited by padanaram; 09-12-2017 at 11:45 AM.

  6. #6
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,977
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  7. #7
    Join Date
    Jul 2006
    Posts
    29
    <script type="text/javascript">
    $(document).ready(function(){
    $('select[name=id]').on('change', function(){
    var id = $(this).val();
    $.ajax(url: 'getDataFromSQL.php?id=' + id,
    success: function(data){
    /*prepop the form from the data returned*/
    /* e.g. if you are returning json */
    /* $('input[name=id]').val(data.rent); */
    }
    );
    });
    });
    </script>

  8. #8
    Join Date
    Dec 2012
    Posts
    1,446
    Yes, this code leads into the right direction:
    Code:
    <select name="myselect">
        <option value="id1">Text 1</option>
        <option value="id2">Text 2</option>
        <option value="id3">Text 3</option>
    </select>
    <span id="mytextbox"></span>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
    // Listen to selections in the selectbox
    $("select[name='myselect']").on('change', function(){
        var id = $(this).val();
        $.ajax({
            url: 'getDataFromSQL.php', // The PHP scritp being called
            method: "POST",
            data: {key: id}, // id will be available in the post variable "key"
            success: function(ouput) {  // output contains output of PHP script
                $("mytextbox").text(output); // enter output to textbox
            }
        }
    As you write that you are fluent with PHP and mysql it will be easy for you to write an appropriate script reading from the database and echoing the result that should be placed into the textbox.

  9. #9
    Join Date
    Jul 2006
    Posts
    29
    I need to get the id with the php script. What is the ajax syntax?

    scripts/tow-cost.php?id=id#

    var id = $(this).val();
    $.ajax({
    url: 'scripts/{scriptName}', // The PHP scritp being called

  10. #10
    Join Date
    Dec 2012
    Posts
    1,446
    ID is transmitted by this object:
    Code:
    data: {key: id},
    As I commted in my posting the ID is then available in the PHP script as
    Code:
    $_POST['key']

  11. #11
    Join Date
    Jul 2006
    Posts
    29
    I have the code in my form and it is not auto populating the text box.

    Here is the code I have. Let me know what I am doing wrong.

    Code:
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    
    <select name="agency" id="agency">
    		  <option value="select">Choose Option</option>
    		  
    		  <option value="1" >OPD</option>
    		  
    		  <option value="2" >CHP</option>
    		  
    		  <option value="3" >PPI</option>
    		  
    		  <option value="4" >SBSD</option>
    		  
    		  <option value="5" >OPD-E</option>
    		  
    		  <option value="7" >CODE</option>
    		  
              </select>
    
    <script type="text/javascript">
               // Listen to selections in the selectbox
              $("select[name='agency']").on('change', function(){
                   var id = $(this).val();
                   $.ajax({
                   url: 'scripts/tow-cost.php', // The PHP scritp being called
                   method: "POST",
                   data: {key: id}, // id will be available in the post variable "key"
                   success: function(ouput) {  // output contains output of PHP script
                   $("towCost").text(output); // enter output to textbox
                 }
              }
    	     </script>
    
    
    <input type="text" name="towCost" id="towCost" size="20" value=''>

  12. #12
    Join Date
    Dec 2012
    Posts
    1,446
    There are braces missing. This is correct:
    Code:
        <script type="text/javascript">
            // Listen to selections in the selectbox
            $("select[name='agency']").on('change', function(){
                var id = $(this).val();
                $.ajax({
                    url: 'scripts/tow-cost.php', // The PHP scritp being called
                    method: "POST",
                    data: {key: id}, // id will be available in the post variable "key"
                    success: function(ouput) {  // output contains output of PHP script
                        $("towCost").text(output); // enter output to textbox
                    }
                });
            });
        </script>
    Make yourself familiar with the developer tools of your browser and watch the console - it will indicate such errors.

  13. #13
    Join Date
    Jul 2006
    Posts
    29
    I added the braces and the textbox is still not populating.

    When you choose an agency the tow cost textbox should populate with an amount.

    Here is access to the page. Once you log in click on add vehicle.

    http://customers.apollodatasys.com/f...owing-database

    User Name: admin
    Password: test12345

  14. #14
    Join Date
    Dec 2012
    Posts
    1,446
    Fine that you posted the URL. I tried Agency and encountered the following issues:
    Spelling error - ouput vs. output
    The PHP script reports errors. I recommend writing the output to the console by console.log and analyse it.
    You need to prepend # when addressing an element by ID: $("#towCost")
    #towCost is an input element - you need to set it's value by val(): $("#towCost").val(output);

    Corrected script:
    Code:
            $("select[name='agency']").on('change', function(){
                var id = $(this).val();
                $.ajax({
                    url: 'scripts/tow-cost.php', // The PHP scritp being called
                    method: "POST",
                    data: {key: id}, // id will be available in the post variable "key"
                    success: function(output) {  // output contains output of PHP script
                        $("#towCost").val(output); // enter output to textbox
                        concole.log(output);
                    }
                });
            });

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles