Results 1 to 4 of 4
  1. #1
    Join Date
    Feb 2002
    Location
    New York
    Posts
    791

    Javascript troubleshooting question

    I have a javascript which enables you to click a button and add an additional html text input field to a html form

    However my issue is I am using jquery to make one of the form inputs be a popup calendar which works when its on the form to begin with it does not work on any of the text input fields that is added to the form via javascript and I am not sure why.
    Hoping someone might see the error I am missing?

    Here is my javascript code in my page head

    HTML Code:
      <script src="js/jquery-1.7.1.min.js"></script>
      <script src="js/jquery-ui-1.8.17.min.js"></script>
      <script src="js/global.js"></script>
    
    <script language="javascript">
    fields = 0;
    function addInput() {
    if (fields != 10) {
    document.getElementById('text').innerHTML += '<div style="float:left; padding-right:50px"><input type="text" name="paymentamt" style="width:55px" /></div><div style="float:left"><input type="text" name="paymentdate" style="width:55px" class="datepicker" /></div><br style="clear:both">';
    fields += 1;
    } else {
    document.getElementById('text').innerHTML += "<br />Only 10 student registrations allowed.";
    document.form.add.disabled=true;
    }
    }
    </script>
    Then my html form is
    HTML Code:
      <form method='POST' action='add.php'>
         <table><thead><th>Amount</th><th>Date</th></thead>
           <tr>
                <td>
                   <input type='text' name='paymentamt[]' class='txt' style='width:55px' />
                </td>
                <td>
                    <input type="text" name='paymentdate[]' class="datepicker" />
                </td>
           </tr>
         </table>
                    
         <div id='text'>
     
         </div>
      </form>
    I should say that I did switch the javascript to have the input fields surrounded by " instead of a ' but that didn't do anything.
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    just a programmer

  2. #2
    I am not 100% sure what you are trying to do, but the reason it isn't working is that when you add a new input, it is blank and does not have a "datepicker" assigned to it.

    You could try something like this:


    Code:
    var fields = 0;
    function addInput() {
      if (fields != 10) {
        $('#text').append('<div style="float:left; padding-right:50px"><input type="text" name="paymentamt" style="width:55px" /></div>');
        $('#text').append('<div style="float:left"><input type="text" name="paymentdate" style="width:55px" class="datepicker" /></div>');
        $('#text').append('<br style="clear:both">');
        $('.datepicker').datepicker();
        fields += 1;
      } else {
        $('#text').append("<br />Only 10 student registrations allowed.");
        document.form.add.disabled=true;  
      }
    }
    If you are using jQuery, you might as well take advantage of the selectors and such.
    Managed Service Provider - www.OpticIP.com
    Public & Private Cloud
    Solutions | SSD SANs | High IOP's | CDN Solutions
    Phoenix/Chandler AZ Colocation | 48U Cabinets | Data Halls | TIA-942 Tier 4 Facility

  3. #3
    Join Date
    Feb 2002
    Location
    New York
    Posts
    791
    Thank you the code fixed my issue.
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    just a programmer

  4. #4
    Join Date
    Feb 2002
    Location
    New York
    Posts
    791
    I am having one more issue with this code and hoping someone might give me a few more minutes of my time.
    My issue is the text boxes named "paymentamt[]" when you enter a number is auto sum's the amount. That part is working great. However I also have a button to add additional amount text boxes and my issue is that when you add the additional text boxes the only way those new additional text boxes get auto sum'ed is if after you enter the amount you have to click one of the original amount boxes and you have type something in them.

    Basically this is for an internal system where staff members can enter into a tracking system a payment schedule which is why their are a bunch of default text inputs. But has the ability to add even more payment inputs if needed. The way the text inputs work is one is a date pop up window and the other text box is for money amount which as they fill in each text box it auto totals the all the boxes.

    Here is my code
    Code:
    <script language="javascript">
    var fields = 0;
    function addInput() {
      if (fields != 10) {
        $('#text').append('<div style="float:left; margin-left:10px; padding-right:160px"><input type="text" name="paymentamt" class="txt" style="width:55px" /></div>');
        $('#text').append('<div style="float:left"><input type="text" name="paymentdate" class="datepicker" style="width:135px" /></div>');
        $('#text').append('<br style="clear:both">');
        $('.datepicker').datepicker();
        fields += 1;
      } else {
        $('#text').append("<br />Only 10 payments allow.");
        document.form.add.disabled=true;  
      }
    }
    
      $(document).ready(function(){
     
            //iterate through each textboxes and add keyup
            //handler to trigger sum event
            $(".txt").each(function() {
     
                $(this).keyup(function(){
                    calculateSum();
                });
            });
     
        });
     
        function calculateSum() {
     
            var sum = 0;
            //iterate through each textboxes and add the values
            $(".txt").each(function() {
     
                //add only if the value is number
                if(!isNaN(this.value) && this.value.length!=0) {
                    sum += parseFloat(this.value);
                }
     
            });
            //.toFixed() method will roundoff the final sum to 2 decimal places
            $("#sum").val(sum.toFixed(2));
        }
    </script>

    Code:
      <table style='width:100%'>
          <thead>
                       <th><p style='padding-left:8px; font-weight:bold'> Payment Amt</p></th>
                       <th><p style='padding-left:8px; font-weight:bold'> Payment Date</p></th>
                    </thead>
                    <tbody>
                        <tr>
                          <td><input type='text' name='paymentamt[]' class='txt' style='width:55px' /></td>
                          <td><input type="text" name='paymentdate[]' class="datepicker" /></td>
                        </tr>
                        <tr>
                          <td><input type='text' name='paymentamt[]' class='txt' style='width:55px' /></td>
                          <td><input type="text" name='paymentdate[]' class="datepicker" /></td>
                        </tr>
                        <tr>
                          <td><input type='text' name='paymentamt[]' class='txt' style='width:55px' /></td>
                          <td><input type="text" name='paymentdate[]' class='datepicker' /></td>
                        </tr>
                        <tr>
                          <td><input type='text' name='paymentamt[]' class='txt' style='width:55px' /></td>
                          <td><input type="text" name='paymentdate[]' class="datepicker" /></td>
                        </tr>
                         <tr>
                          <td><input type='text' name='paymentamt[]' class='txt' style='width:55px' /></td>
                          <td><input type="text" name='paymentdate[]' class="datepicker" /></td>
                        </tr>
                        <tr>
                          <td><input type='text' name='paymentamt[]' class='txt' style='width:55px' /></td>
                          <td><input type="text" name='paymentdate[]' class="datepicker" /></td>
                        </tr>
                        <tr>
                          <td><input type='text' name='paymentamt[]' class='txt' style='width:55px' /></td>
                          <td><input type="text" name='paymentdate[]' class="datepicker" /></td>
                        </tr>
                        <tr>
                          <td><input type='text' name='paymentamt[]' class='txt' style='width:55px' /></td>
                          <td><input type="text" name='paymentdate[]' class="datepicker" /></td>
                        </tr>
                         <tr>
                          <td><input type='text' name='paymentamt[]' class='txt' style='width:55px' /></td>
                          <td><input type="text" name='paymentdate[]' class="datepicker" /></td>
                        </tr>
                        <tr>
                          <td><input type='text' name='paymentamt[]' class='txt' style='width:55px' /></td>
                          <td><input type="text" name='paymentdate[]' class="datepicker" /></td>
                        </tr>
                        <tr>
                          <td><input type='text' name='paymentamt[]' class='txt' style='width:55px' /></td>
                          <td><input type="text" class="datepicker" /></td>
                        </tr>
                        <tr>
                          <td><input type='text' name='paymentamt[]' class='txt' style='width:55px' /></td>
                          <td><input type="text" name='paymentdate[]' class="datepicker" /></td>
                        </tr>
                    </tbody>
                    </table>
                    
                    <div id='text'>
     
                    </div>   
                    <br style='clear:both' />            
                    <input type="button" class="button blue" onclick="addInput()" name="add" value="Add Another Payment" />
    
                    <div style='clear:both'></div>
                     <div class="form-row">
                       <p class="form-label" style='width:100px'><strong>Total Service Fee</strong></p>
                       <div class="form-item">
                        <strong>$</strong><input type='text' name='total_price' id='sum' value='0' style='width:100px'>
                       </div>
                    </div>
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    just a programmer

Similar Threads

  1. Javascript question
    By Lord Northern in forum Programming Discussion
    Replies: 3
    Last Post: 02-25-2008, 08:16 PM
  2. Javascript question
    By mulligan in forum Programming Discussion
    Replies: 1
    Last Post: 12-29-2005, 08:29 AM
  3. Javascript question
    By Hostlead in forum Programming Discussion
    Replies: 5
    Last Post: 06-23-2005, 04:34 PM
  4. JavaScript Question ...
    By KIA-Joe in forum Programming Discussion
    Replies: 5
    Last Post: 09-11-2004, 04:23 AM
  5. Javascript question
    By zagadka in forum Programming Discussion
    Replies: 6
    Last Post: 03-16-2004, 06:59 AM

Posting Permissions

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