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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    JQuery - $("xx").remove(); (in form) Not working with new JQuery pack....

    Hello,

    Im having a bit of difficulty with a form. Basically i used a script to add and remove text input elements which can be found here: Mohdshaiful Form Elements.

    Now this script relied on an old Jquery pack (mid 2007 release) This pack can be found here: Old JQuery

    The use of JQuery is for this:
    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Test jQuery</title>
    
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    function addFormField() {
    	var id = document.getElementById("id").value;
    	$("#divTxt").append("<p id='row" + id + "'><label for='txt" + id + "'>Field " + id + "&nbsp;&nbsp;<input type='text' size='20' name='txt[]' id='txt" + id + "'>&nbsp;&nbsp<a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'>Remove</a><p>");
    	
    	
    	id = (id - 1) + 2;
    	document.getElementById("id").value = id;
    }
    
    function removeFormField(id) {
    	$(id).remove();
    }
    </script>
    
    <body>
    
    <p><a href="#" onClick="addFormField(); return false;">Add</a></p>
    <form action="#" method="get" id="form1">
    <input type="hidden" id="id" value="1">
    <div id="divTxt"></div>
    <p><input type="submit" value="Submit" name="submit">
    <input type="reset" value="Reset" name="reset"></p>
    </form>
    
    </body>
    </html>
    Using the Jquery file above makes the code function as i need it to, However i have recently had to use the latest JQuery pack for another element on my form to function correctly. And since using the latest version the element above has stopped working. The element can be added okay, however it cannot be removed. I have done some simple trouble shooting and found the cause to be the new JQuery pack.

    Im obviously not a professional in this area but usually i can get my head round things like this, i just havent been able to get the "ahhh thats why" moment.

    Ill be eternally grateful if anyone has any solutions to this, im out of the loop regarding JQuery updates so i thought it would be best consulting you guys.

    Again thank you very much in advance

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Works for me using jquery 1.2.6.


    incidentally, you need to remember to reduce the value of the hidden input field when removing fields.
    Alternatively, count the necessary fields dynamically when you run the add or remove functions. That way, the number always stays correct - and the label for any newly created fields always stays relative to the actual number of fields at that time.

    e.g.
    Code:
    function addFormField() {
    
    	var id = $('#form1 p[id^="row"]').length + 1;
    
    	$("#divTxt").append('<p id="row'+id+'"><label for="txt'+id+'">Field '+id+'</label><input type="text" size="20" name="txt[]" id="txt'+id+'" /> (<a href="#" onclick="removeFormField($(this).parent());return false;">Remove</a>)<p>');
    
    }
    
    function removeFormField(el) {
    
    	$(el).remove();
    	$('#form1 p[id^="row"]').each(function(i){
    
    		i++;
    		$(this).attr('id','row'+i);
    		var currentVal = $(this).find('input').val();
    
    		$(this).html('<label for="txt'+i+'">Field '+i+'</label><input type="text" size="20" name="txt[]" id="txt'+i+'" value="'+currentVal+'" /> (<a href="#" onclick="removeFormField($(this).parent());return false;">Remove</a>)');			
    		
    	});
    
    }
    The above script keeps remaining fields in order, keeps labels for new fields in numerical order and shuffles used fields, retaining any values which may already have been input.
    Last edited by Bill Posters; 10-30-2008 at 03:34 PM.

  • Users who have thanked Bill Posters for this post:

    InCiTe (10-30-2008)

  • #3
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Bill Posters View Post
    Works for me using jquery 1.2.6.
    Thank you for such a fast reply your time is much appreciated... Being rather drained i forgot to mention that this problem only occurs in IE7. It works fine in FF and Safari.

    Are you using IE7?

    Oh and cheers for the heads up on the values and numbering, its part of my next plan!

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by InCiTe View Post
    Are you using IE7?
    Nope. Mac.

    Oh and cheers for the heads up on the values and numbering, its part of my next plan!
    I updated my post with a new method.
    See if that code works in IE7.

  • Users who have thanked Bill Posters for this post:

    InCiTe (10-30-2008)

  • #5
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    YOU ARE AN ABSOLUTE STAR!!!!

    I dont know what was causing the issue in IE but your new code has sorted the problem, I could kiss you right now. Im glad that i can move on to other tasks now, i really cant thank you enough.

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    If the problem which was occuring in IE7 was also occuring in IE6, then it's possibly down to the loose handling of id, name attribute values and the id keyword in those browsers.

    It's generally worth avoiding the use of attribute names as attribute values elsewhere in the document.

    e.g.
    Code:
    <input type="hidden" id="id" value="1">


  •  

    Posting Permissions

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