Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Dynamic Form Problem

    Dear everyone,

    I desire to make a dynamic form that contain several text fields. It can have Add and Remove button at the bottom of it. I have managed to have this code and everythings works fine except one problem.

    If <br> elements are inserted between the <div> in order to make it appear like a standard form..the Add button will not functioning. As I want to align the Title,Firstname,Lastname and Email to be at top down instead of just in a straight line.

    Could anyone help me, figure out..why is this happen? Thanks so much.

    Here is the code..

    Code:
    <?php
    if (isset($_POST['submit'])) 
    {	
    		echo "<p>Results of form submission:</p>\n";
    		echo "<pre>";		
    		print_r($_POST);
    		echo "</pre>\n";
    		die();
    }
    ?>
    
    <html>
    <head>
        <title></title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
     
       <script type="text/javascript">
       $(document).ready(function(){	
       	$('#' + btnDel).attr('disabled','disabled');
       
       });
            function trimNums(stringToTrim)
            {
                return stringToTrim.replace(/\d+$/,"");
            }
     
            function dupForm(divId, divClass, btnAdd, btnRm)
            {
            //alert(divId+'   '+divClass);
                var num     = $(divClass).length;
                var newNum  = new Number(num + 1);
                var i;
     
                var newElem = $('#' + divId + num).clone().attr('id', divId + newNum);
     
                for (i=0; i < newElem.children().length; i++)
                {
                    var attrId = trimNums(newElem.children(':eq('+i+')').attr('id'));
                    var attrName = trimNums(newElem.children(':eq('+i+')').attr('name'));
     
                    newElem.children(':eq('+i+')').attr('id', attrId + newNum).val('');
                }
                $('#' + divId + num).after(newElem);
                $('#' + btnRm).attr('disabled','');
     
                if (newNum == 4)
                    $('#' + btnAdd).attr('disabled','disabled');
            }
     
            function rmForm(divId, divClass, btnAdd, btnRm)
            {
                var num = $(divClass).length;
     
                $('#' + divId + num).remove();
                $('#' + btnAdd).attr('disabled','');
     
                if (num-1 == 1)
                    $('#' + btnRm).attr('disabled','disabled');
            }
        </script>
    </head>
     
    <body>
     
    <form id="myForm" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
    <div id="input1" style="margin-bottom:4px;" class="clonedInput">
    
    Title <select name="title[]" id="title1" required />
    <option value="" >Select your title</option>
    <option value="Dr.">Dr.</option>
    <option value="Mr.">Mr.</option>
    <option value="Mrs.">Mrs.</option>
    <option value="Ms.">Ms.</option>
    </select> 
    
    
    Firstname <input type="text" name="firstname[]" id="firstname1" required placeholder="First Name:"/>
    Lastname  <input type="text" name="lastname[]" id="lastname1" required placeholder="Last Name:"/>
    Email <input type="email" name="email[]" id="email1" required placeholder="Email:" />
    </div>
        <div>
            <input type="button" id="btnAdd" onClick="dupForm('input', '.clonedInput', 'btnAdd', 'btnDel');" value="add another name" />
            <input type="button" id="btnDel" onClick="rmForm('input', '.clonedInput', 'btnAdd', 'btnDel');" value="remove name" disabled />
            <input type="submit" id="submit" name="submit" value="Submit" />
        </div>
    </form>
     
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    I made these changes, you may want to play with it some more by adding spaces.
    Code:
    <div id="input1" style="margin-bottom:4px;width: 220px;" class="clonedInput">
    AND
    Code:
    <select style="width: 150px;" name="title[]" id="title1" required  />

    Try
    Code:
    Title &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    And
    Code:
    Email&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    Ugly, but gets the job done.
    Last edited by sunfighter; 04-27-2012 at 03:57 PM.

  • Users who have thanked sunfighter for this post:

    wale89 (04-28-2012)

  • #3
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks a lot senior fighter..Really appreciate your effort to help =)


  •  

    Tags for this Thread

    Posting Permissions

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