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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Creating a Javascript array from certain form inputs based on name

    I'm trying to generate some recursive form inputs with PHP, and put those particular user input values into a JavaScript array. For some reason my code isn't working and when I alert the array I get "undefined". Any idea what I'm doing wrong here?

    Code:
        <? $citcount = array(1 => 'First', 2 => 'Input_2',3 => 'Input_3',4 => 'Input_4',5 => 'Input_5',6 => 'Input_6',7 => 'Input_7',8 => 'Input_8',9 => 'Input_9',10 => 'Input_10',); ?>
    	<?php foreach ($citcount as $citnum):?>
        
        	<!-- Set the proper input names as arrays -->
    		<?php if ($citnum == 'First'):
            		$ar == "First";
           		  else:
            		$ar = "[]"; 
    			  endif; ?>
        
            <!-- Custom Object Input Form Fields -->
            <details>
                <summary>Enter another citation</summary><br />
                <div style="display:inline;">
                    <div id="anotherCitNum" style="float:left;"> 
                        <div>
                            <strong>Citation Number:</strong> <br />
                            <input type="text" class="cnNumber" name="cnValues<?=$ar?>" id="citNum<?=$citnum?>" value="" />
                            <div id="addfield_error" class="hideCat"></div>
                        </div>
                    </div>
                    <div id="anotherCitDate" style="float:left; padding-left:15px"> 
                        <div><strong>Citation Issue Date:</strong> <br />
                            <input type="text" class="cnDate" name="cdValues<?=$ar?>" id="citDate<?=$citnum?>" value="" />
                        </div> 
                   </div>
                </div>
                <br clear="all"/><br /><div id="addLink"></div>
               
    	<?php endforeach; ?>
            
           									</details>
                                        </details>
                                    </details>
                                </details>
                            </details>
                        </details>
                    </details>
            	</details>
            </details>
           	
        <script type="text/javascript">
    
    	var cnValues = new Array();
    	var cdValues = new Array();
    	var cnValue;
    	var cdValue;
    	var citationnumber;
    	var citationdate;
    	var keynum;
    	
    				keynum=<?php echo json_encode($citnum); ?>;
    				this[citationnumber + keynum] = document.getElementByName('citnum+keynum');
    				this[citationnumber + keynum] = document.getElementByName('citdate+keynum');
    				
    					if(this[citationnumber + keynum].value != "")
    						this.[cnValue + keynum] = this[citationnumber + keynum];
    					else
    						this.[cnValue + keynum] = '';		
    					}
    	
    					if(this[citationdate + keynum].value != "")
    						this.[cdValue + keynum] = this[citationdate + keynum];
    					else
    						this.[cdValue + keynum] = '';		
    					}
    					
    				cnValues.push(cnValue);
    				cdValues.push(cdValue);
    				
                </script>

  • #2
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, that JavaScript is supposed to be inside the foreach loop. I can't seem to edit my original post to make that change.

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,965
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Check the javascript console for any errors. And post here the generated output for this:

    PHP Code:
    keynum=<?php echo json_encode($citnum); ?>;

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    not 100% sure what you're doing, but if the inputs are on the page, you can use a partial (or whole) name to collect them into a true array:

    Code:
    var firsts =[].slice.call(document.querySelectorAll("[name*='First']"));
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #5
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    Check the javascript console for any errors. And post here the generated output for this:

    PHP Code:
    keynum=<?php echo json_encode($citnum); ?>;
    The generated output matches the value for the array in each instance of the foreach loop. Maybe I'm not understanding how this should work... I was trying to use keynum to generate a matching variable for each element so that each instance of the javascript wouldn't conflict with the last. Since JavaScript is client side though, it wouldn't matter if the javascript were linear, right? Could I just write this in a way that each time a value was entered for citNum* or citDate* that the JavaScript array would be updated in real time by pushing that entered value?

  • #6
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rnd me View Post
    not 100% sure what you're doing, but if the inputs are on the page, you can use a partial (or whole) name to collect them into a true array:

    Code:
    var firsts =[].slice.call(document.querySelectorAll("[name*='First']"));
    So I did...
    Code:
    var cnValues =[].slice.call(document.querySelectorAll("[cnValues*='']"))
    	var cdValues =[].slice.call(document.querySelectorAll("[cdValues*='']"))
    But when I alert using alert(JSON.stringify(cnValues) I get an empty array.

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Quote Originally Posted by mikarma View Post
    So I did...
    Code:
    var cnValues =[].slice.call(document.querySelectorAll("[cnValues*='']"))
    	var cdValues =[].slice.call(document.querySelectorAll("[cdValues*='']"))
    But when I alert using alert(JSON.stringify(cnValues) I get an empty array.
    yeah. re-research how to use partial attribute matching in CSS selectors. your selector only hits elements with a "c(dn)Values" attribute whose value is empty. you want to find a name attribute that contains/startsWith "c(dn)Values"

    maybe you want something like this:
    Code:
    var firsts =[].slice.call(document.querySelectorAll("[name*='cdValue']"));
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5


  •  

    Posting Permissions

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