Skip to main content
T
Tanya0303
Participant
September 14, 2010
Question

Creating Add button and array

  • September 14, 2010
  • 1 reply
  • 1021 views

Hello,

     I am sure this has been brought up before but I am still not clear on the procedure as I am still new to this. In my coldfusion application I need to create a Button with 'ADD' function.

When the button is clicked a new text field with a checkbox is created, however, these will need to have a unique names because they will be submitted into MySQL Database table. Of course, unless a dynamic variable can be created and submitted.

I think I need to get an array function in javascript/ajax?

I appreciate any help.

    This topic has been closed for replies.

    1 reply

    A
    Anonymous
    September 14, 2010

    Instead of using javascript, you could just have the ADD button submit the form, and then use ColdFusion to create the new form elements you require.

    or

    It would be a good time to learn a javascript framework (JQuery, MooTools etc): http://mootools.net/docs/core/Element/Element#Element:inject

    Hope this helps.

    T
    Tanya0303Author
    Participant
    September 16, 2010

    Yes thank you.

    I  know some about the element function in java, but what I worry about is when sending the data into the MySQL and it may be multiple inputs anywhere from 1-500, so I need to create multiple elements. As far as I understand it.

    When I ran my test, the database only inpuy the original text but nothing from the elements I've created using javascript.

    Here is my script:

    <td colspan="3"> Item 1 <cfinput type="checkbox" name="Item" value=" Item1"> </td></tr>
    <tr>    
    <td align="left">Text: </td>
    <td>     
    <!--- textfield --->   

    <cfinput  type="text" name="Text1" size="30">    
    </td> </tr>
    <tr>
    <td align="left">Comments:</td> <td>      <!--- textarea --->

    <textarea name="Comments" cols="30" rows="5"></textarea> <br>
    <input type='button'  value='MORE' onclick='addbox()'>
    </td>
    <td>
    <div id = "Input1"></div>
    <div id = "Input2"></div>
    <div id = "Input3"></div>
    <div id = "Input4"></div>


    <scripttype = "javascript">
    var i = 1;
    function addbox() {
    if (i <= 4) {  // max number of inputs

    document.getElementById('Input'+).innerHTML =  "<input type='text' name='text1' value='Enter Text Here' size = '15' /><br> Comments:<textarea name='Comments' cols='30' rows='5'></textarea> <input type='button' value='MORE' onclick='addbox()'>";
    i++;}else {
    alert ("No more inputs are possible")
    }
    }
    </script>
    </td>

    Of course, once the this step is complete, the form is being submitted as a whole
    The following page is contains SQL Commands of:
    <cfquery datasource="test">
    INSERT INTO ProcessTBL (Item, text1, comments)
    VALUES ('#Trim(Form.Item)#', '#Trim(form.Text1)#', '#Trim(form.comments)#')
    </cfquery>
    All functions as it should, but the problem I am running into is that only CFINPUT text is being inserted into the database and none of the javascript inputs, unless, of course I am missing a variable. Another concern I have is that, once again, the input may be up to 500 variables.
    Once again, I appreciate your help.
    ilssac
    ilssac
    Inspiring
    September 16, 2010
    When you use javasript (a different technology then Java), to add form elements it should be just like if you had hand coded the form elements into the HTML.  Looking at your code, it looks like you giving all the new <input...> elements the same name parameter, "text1".  If you do that, when the form is submitted.  All the data from each of those inputs is going to be concatenated into one form key named "text1" as a comma delimited list.
    You would have a easier time of this if you uniqely named these dynamic inputs.  Something like 'text1', 'text2', 'text3' perhaps.  Then when the form was submitted, they would each form seperate and distinct form key-value pairs.
    Thus on the action page, you could <cfdump var="#form#"> and see all these keys and values.  After this it should be fairly trivial to figure out how to loop over them and put them all in your database.  To give you a heads up, you are probably going to want to use array notation.  I.E,.  #form["text" & i]# in this phase of your project.
    
        
                                                
    
        
    
    
    

            
    
                                        
    
            
                        
    
                                                                                                            
            
    

    

        
    
                    
    
    
    
    

    

    
    
    

                                        
    
                                                        
    
            
        
    
    

    

    

                                    
    Terms & ConditionsAccessibility statement
    
            
        

    

        
            
    
        
    
        



        
        
            


        
    

        
        
        
        
                                                        

                            
    
    
                    
    
  
    
    
    
      
        
      
    
    
    
    
      
        Using the community
      
      
        Terms of use
      
      
        Privacy
      
      
        Cookie preferences
      
      
        Do not sell or share my personal information
      
      
        ad choicesAdChoices