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

Thread: auto populate text box based on check box checked

  1. #1
    Join Date
    Jul 2006
    Posts
    29

    auto populate text box based on check box checked

    I need to populate a text box with an amount when the user checks a particular check box. I need to use ajax so I don't have to reload the page.

    I have some code I use to populate the text box based on select box selection. What changes in the following code if it is based on a check box being checked.

    Code:
    <script type="text/javascript">
               // Listen to selections in the selectbox
              $("select[name='{selectName}']").on('change', function(){
                   var id = $(this).val();
                   $.ajax({
                   url: 'scripts/{scriptName}', // 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
                   $("{textBoxName}").text(output); // enter output to textbox
                 }
              }
    	     </script>

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,973
    Please note that JQuery is not JavaScript, there is a JavaScript Frameworks forum for these types of scripting, its in the top part of the forum for JavaSrcipt (see my signature for information)

    Also, moved post
    --> 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...

  3. #3
    Join Date
    Dec 2012
    Posts
    1,444
    What should happen when the checkbox is not checked: textbox empty?

  4. #4
    Join Date
    Jul 2006
    Posts
    29
    Yes.

  5. #5
    Join Date
    Jul 2006
    Posts
    29
    Well actually 0.00.

  6. #6
    Join Date
    Jul 2006
    Posts
    29

    Possible solution

    I have some code that might do it.

    Here it is. I noticed that it says changed. Instead of changed can I use checked?

    $("#formfieldname").bind("change", function(e){
    $.getJSON("scriptname.php?id=" + $("#formfieldname").val(),
    function(data){
    $.each(data, function(i,item){
    if (item.field == "formfieldname2") {
    $("#formfieldname2").val(item.value);
    }
    });
    });
    });

  7. #7
    Join Date
    Dec 2012
    Posts
    1,444
    Instead of changed can I use checked?
    No, there is no event checked. You need to query the corresponding property:
    Code:
            $("#formfieldname").on("change", function (e) {
                if ($(this).prop("checked")) {
                    $.getJSON("scriptname.php?id=" + $(this).val(),
                    function (data) {
                        $.each(data, function (i, item) {
                            if (item.field == "formfieldname2") {
                                $("#formfieldname2").val(item.value);
                            }
                        });
                    });
                } else {
                    $("#formfieldname2").val("0.00");
                }
            });

  8. #8
    Join Date
    Jul 2006
    Posts
    29
    Do I need to call a JSON library?

  9. #9
    Join Date
    Dec 2012
    Posts
    1,444
    Do I need to call a JSON library?
    Don't understand. I don't know about a JSON library. Using $.getJSON you can read JSON encoded structures from the server and this function will do the encoding for you. Whether you need JSON at all depends on your requirements: If the structure of your data is an array or a nested structure it is recommendable. If you just want to query a single value like in the script you posted, you don't need JSON.

  10. #10
    Join Date
    Jul 2006
    Posts
    29
    The code is not populating the textfield. Let me know what I did wrong. Here is the code to populate the textfield based on a checked value.

    Code:
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    
    <input type="checkbox" name="ahReleased" id="ahReleased" value="yes" >
    
    <script type="text/javascript">
    		$("#ahReleased").bind("change", function(){
                 if($(this).is(':checked')){
    			      function(e){
                           $.getJSON("ah-release.php",
                           function(data){
                                $.each(data, function(i,item){
                                if (item.field == "") {
                                     $("#ahReleaseCost").val(item.value);
    								 concole.log(item.value);                            } 
                              });
                           });
    				   });
                  }
             });
    		 </script>
    
    <input type="text" name="ahReleaseCost" id="ahReleaseCost" size="20" value=''>

  11. #11
    Join Date
    Dec 2012
    Posts
    1,444
    This time a ")" is obsolete. Please follow my recommendation regarding the developer tools and the console. Additionally it is very helpful using an editor that hightlights syntax errors while editing. Aptana does and is free and lightweight.
    Code:
            $("#ahReleased").bind("change", function(){
                if($(this).is(':checked')){
                    function(e){
                        $.getJSON("ah-release.php",
                        function(data){
                            $.each(data, function(i,item){
                                if (item.field == "") {
                                    $("#ahReleaseCost").val(item.value);
                                    concole.log(item.value);                            } 
                            });
                        });
                    }  // ");" obsolete
                }
            });

  12. #12
    Join Date
    Jul 2006
    Posts
    29
    I made the changes, but it does not work, Here is what I have now.

    Code:
     <input type="checkbox" name="ahReleased" id="ahReleased" value="yes" ></td>
    
    <script type="text/javascript">
    		 $("#ahReleased").bind("change", function(){
                if($(this).is(':checked')){
                    function(e){
                        $.getJSON("ah-release.php",
                        function(data){
                            $.each(data, function(i,item){
                                if (item.field == "") {
                                    $("#ahReleaseCost").val(item.value);
                                    concole.log(item.value);                            } 
                            });
                        });
                    } 
                }
            });</script>
    
     <input type="text" name="ahReleaseCost" id="ahReleaseCost" size="20" value='0.00'>

  13. #13
    Join Date
    Dec 2012
    Posts
    1,444
    Please follow my recommendation regarding the developer tools and the console!

    Function name is missing here:
    Code:
    function(e){
    Additionally defining a function here make no sense. Omit it.

    Additionally I'm quite shure that you need key or ID for accessing the database like in your second thread:
    http://www.webdeveloper.com/forum/sh...-box-selection

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 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