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
    Jul 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    help needed for an if clause in a function

    Hi,

    I'm trying to let the users add more additional input fields should they need it.

    I will have two text input fields and an "add" button that will be generated by the javascript on window.onload. Then, when a user clicks on "add" button the same function that was used to generate the first set of input fields will be executed again to create an identical set of input fields right below the previous ones.

    However, I want the "add" button that the user clicked on to disappear so that the user will only have one "add" button. Since the first set of input fields are being generated by the same function, I inserted an "if" clause to see whether the variable "counter" (this keeps track of how many sets of input fields there are) equals 0 or not. If it's not 0, then the "add" button that the user clicked on should have its style.display = "none" . But for some reason, it's not working! It looks like it either stops before the "if" clause, or the "if" clause just doesn't get executed. Could someone please check what's the problem?

    Thank you!

    Code:
    var field_name = "fields[]";
    var set_name = "sets[]";
    var field_fields;
    var set_fields;
    var input_location_name;
    var input_location;
    var add_buttons;
    var field_divs;
    var counter = 0;
    
    function add_field() {
    	
    //creating div	
    	field_divs = document.createElement("div");
    	field_divs.id = "field" + counter;
    	var div_location = document.getElementById("submit_form_template");
    	var parent_location = div_location.parentNode;
    	parent_location.insertBefore(field_divs, div_location);
    
    // creating field field
    	field_fields = document.createElement("input");
    	field_fields.type = "text";
    	field_fields.name = field_name;
    	input_location_name = "field" + counter;
    	input_location = document.getElementById(input_location_name);
    	input_location.appendChild(field_fields);
    
    //creating set field
    	set_fields = document.createElement("input");
    	set_fields.type = "text";
    	set_fields.name = set_name;
    	set_fields.maxLength = 3;
    	input_location.appendChild(set_fields);		
    
    //creating add button
    	add_buttons = document.createElement("input");
    	add_buttons.type = "button";
    	add_buttons.name = "add_field_button" + counter;
    	add_buttons.value = "add"
    	add_buttons.onclick = function(){
    				add_field();
    	}
    	input_location.appendChild(add_buttons);			
    	
    	if (counter != 0) {
    		var locate_button = document.getElementById("add_field_button" + counter);
    		locate_button.style.display = "none";
    		counter++;
    	} else {counter++;}
    }
    window.onload = add_field;
    
    <div id="fields" >
    <form action="create_template.php" method="post" name="create_template">
    
    		<div id="submit_form_template">
    			<input type="submit" name="submit_template_name" id="submit_template_name" value="Submit" />
    		</div>
    		
    </form>
    </div>

  • #2
    Regular Coder
    Join Date
    Aug 2008
    Posts
    104
    Thanks
    4
    Thanked 14 Times in 14 Posts
    Hi there - just a thought:

    Code:
            add_buttons = document.createElement("input");
    	add_buttons.type = "button";
    	add_buttons.name = "add_field_button" + counter;
    	add_buttons.value = "add"
    	add_buttons.onclick = function(){
    				add_field();
                                    this.parentNode.removeChild(this);
                                    // or this.style.display = "none";
    	}
    	input_location.appendChild(add_buttons);
    a little bit easier?

    Cheers
    Edd

  • #3
    Regular Coder
    Join Date
    Aug 2008
    Posts
    104
    Thanks
    4
    Thanked 14 Times in 14 Posts
    p.s.

    Code:
    if (counter != 0) {
    		var locate_button = document.getElementById("add_field_button" + counter);
    		locate_button.style.display = "none";
    		counter++;
    	} else {counter++;}
    The first add button will always show because counter == 0 - perhaps if you put:

    Code:
    if (counter != 0) {
    		var locate_button = document.getElementById("add_field_button" + (counter - 1));
    		locate_button.style.display = "none";
    		counter++;
    	} else {counter++;}
    Cheers
    Edd


  •  

    Posting Permissions

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