barbs75 Posted June 4, 2008 Share Posted June 4, 2008 Hey guys, I'm really stuck with this, can't figure out how i go about doing this..... here's my problem. I have a form, which when submitted, sends all form data to a php processing script, which sends data to my database(mysql) and validates all entered data. The problem i am having is with a certain set of my input fields from my form... I have a button which has javascript assigned, which when they click a button, an extra room(with new input fields) are displayed on screen. The javascript is shown below: <script type="text/javascript"> var count = 0; function generate_room(){ count += 1; var num = count; document.getElementById('rooms').appendChild(create_inputfield(num)); document.getElementById('deleteRoom').style.visibility = 'visible'; return count; } //function to create inputfield div and all xhtml content inside function create_inputfield(num){ //create xhtml for inputfield element declaration var inputfield = document.createElement('div'); var divClassName = 'inputfield';//set classname inputfield.className = divClassName;//add class and class name to inputfield var inputfieldContent = '<p class="largeblue"><strong>Added Room '+num+'</strong></p><label class="room" for="extraroom_name_'+num+'">Type:</label><select class="fade" name="roomType" id="extraroom['+num+'][]"><option class="fade">--Please Select--</option><option class="fade" value="study">Study</option><option class="fade" value="games">Games Room</option><option class="fade" value="Reception">Reception</option><option class="fade" value="conservatory">Conservatory</option></select><br /><br />';//variable containing xhtml content inputfield.innerHTML = inputfieldContent;//adds xhtml content to inputfield inputfield.appendChild(create_dimensiondiv(num));//adds on element created by function inputfield.appendChild(create_descriptionHolder(num));//adds on element created by function return inputfield;//return variable inputfield } //function to create dimensions div function create_dimensiondiv(num){ var dimensiondiv = document.createElement('div'); var divClassName = 'dimensions'; dimensiondiv.className = divClassName; dimensiondiv.innerHTML = '<label class="room" for="extraroom['+num+'][]">Dimensions:</label><input class="fade" name="extraroom_width_'+num+'" id="extraroom['+num+'][]" type="text" size="5" value="" /> x <input class="fade" name="extraroom['+num+'][]" id="extraroom['+num+'][]" type="text" size="5" value="" />'; return dimensiondiv; } //function to create descriptionHolder div function create_descriptionHolder(num){ var descriptionHolder = document.createElement('div'); var divClassName = 'descriptionHolder'; descriptionHolder.className = divClassName; descriptionHolder.innerHTML = '<label class="room" for="extraroom['+num+'][]">Description:</label><textarea name="extraroom['+num+'][]" id="extraroom['+num+'][]" cols="35" rows="5">Enter your description here.....</textarea>'; return descriptionHolder; } function remove_room(theClass) { var allPageTags = document.getElementById('rooms').getElementsByTagName("*"); for(var i=allPageTags.length-1;i>=0;i--){ if(allPageTags[i].className==theClass){ allPageTags[i].parentNode.removeChild(allPageTags[i]);break } } } </script> This code generates input names of 'extraroom[0][]' with the first array key incrementing depending on how many times the add room button is clicked. For example, if the user wants to add 3 rooms, (they click the button 3 times), the following array would be created: extraroom[0][width,length,description] extraroom[1][width,length,description] extraroom[2][width,length,description] now i am having problems with iterating through these post data using foreach, i can't use standard for loop, as i dont know how long the array is going to be, so not efficient to just run the loop for a certain amount times...... the code i have at the moment is..... foreach($_POST['extraroom'] as $key){ mysql_query("INSERT INTO rooms (house_id,user_id,room_name,room_width,room_length,description) VALUES ('$house_id','$user_id','".$_POST['extraroom'][$key][0]."','".$_POST['extraroom'][$key][1]."','".$_POST['extraroom'][$key][2]."','".$_POST['extraroom'][$key][3]."')"); } The first few table entries work fine, ie the house_id,user_id, but then i am struggling to refer to each of the elements i have for each extra room...... would anyone know how i go about doing this at all, really stumped cheers Craig Quote Link to comment Share on other sites More sharing options...
phpzone Posted June 4, 2008 Share Posted June 4, 2008 It's a bit of a hard read, don't do that much JS myself. However, if you name your elements extraroom[$num]['width'], extraroom[$num]['height'], extraroom[$num]['description'] would this help? It might be easier to get my head round if you post the resulting HTML rather than the Javascript. Quote Link to comment Share on other sites More sharing options...
barbs75 Posted June 4, 2008 Author Share Posted June 4, 2008 hey phpzone! right if you go to the url:http://www.go4home.co.uk/upload_stage2.php you can see the page, and you will see the button that i have been talking of a little way down the page do you have the web developer toolbar in your browser? if you dont, i recommend!! if you do, use the information option and display id & class details to see whats being produced when the button is clicked!! if you can help further that will be great!! one question, can you refer to a variable in a javascript function via php?? cause if i can, then i could be able to do what i want to do... cheers for your help dude Craig Quote Link to comment Share on other sites More sharing options...
Wolphie Posted June 4, 2008 Share Posted June 4, 2008 No, you can't explicitly refer to a variable in javascript via PHP generally, however since Ajax has been introduced, this has become possible. Quote Link to comment Share on other sites More sharing options...
barbs75 Posted June 4, 2008 Author Share Posted June 4, 2008 hi wolphie, cheers for your reply, looking at my example, you wouldn't know how i could refer to the variable 'count' in my javascript 'generate_room()' function, by applying ajax?? never really touched on ajax before..... or of you know your php, can i place a count on a button, to increment every time it is clicked? because that would solve my problem.... for example: <img style="float:right;" src="Images/addRoom.png" alt="add another room" onclick="<?php echo 'generate_room();';$clickCount++;?>" /> would that call my javascript function and then increment a counter everytime the image is clicked?? cheers Craig Quote Link to comment Share on other sites More sharing options...
Wolphie Posted June 4, 2008 Share Posted June 4, 2008 Without the use of Ajax, the page would need to be refreshed every time the button is clicked in order for PHP to update it. However, I would always recommend a JavaScript library to do most of the work for you. To get an idea of how to use Ajax and PHP take a look at http://www.w3schools.com/php/php_ajax_suggest.asp Quote Link to comment Share on other sites More sharing options...
phpzone Posted June 4, 2008 Share Posted June 4, 2008 I don't see why you need to use the count variable from javascript, you will be submitting to a php script with the Next button, yes? You've created all the relevant <input 's so you should be able to do any count on the PHP side. for what its worth, i would write a PHP only fallback anyway. Yes, I have Web Developer toolbar, I also have NoScript installed, so the javascript was blocked and rooms additions wouldn't work, however I trust you so I allowed it, but I always use NoScript so I can check whether things I do work without javascript Quote Link to comment Share on other sites More sharing options...
barbs75 Posted June 4, 2008 Author Share Posted June 4, 2008 hey phpzone, i have solved the problem, i did some reading on php.net and found out how to count the amount of elements in the $_POST['extraroom'] array, which i could then assign to my for loop to loop through each first dimensional element, and then place each element of that into my database fields!! problem solved! just needed to find a way to count the array elements, i didnt realise that yo could do this with $_POST, but i guess its just like any other array!! cheers for your insight and help!! Craig Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.