current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

I have a javascript code helping me to dynamically create row after row in a table and to delete a row from that table. each row has four cells. cell 1 for instance contains a text zone. to differentiate cell1 from row 1 with cell1 from row 2, I rename my cell 1 like that cell1.name= cell1.name + '_' + row.rowIndex.

I create a submit button so that I could read data entered by a user in the rows of the table and I try to print $_GET. but there is nothing inside. How could I access to my DOM objects in PHP?

I am grateful for your help.

my HTML + PHP code

<body >

<?php
if (isset($_GET['Enter'])){
    print_r($_GET);
}

?>

<h1> Create an Item </h1>
<form method="GET" action="func.html">
    <table align="center" border = "2" cellspacing ="0" cellpadding="3" id="table"> 
    	<tr><td><b>Functionality Name:</b></td> <td><b>Description:</b></td> <td><b>Status:</b></td> <td><input type="button" Name= "Ajouter" Value="Ajouter" onclick="go()"></td></tr>

    </table>	
<input type="submit" name="submit" value="Enter">
</form> 
</body>

and my Javascript code:

<script>

   function getXhr(){
                var xhr = null; 
    			if(window.XMLHttpRequest) // Firefox and others
    			   xhr = new XMLHttpRequest(); 
    			else if(window.ActiveXObject){ // Internet Explorer 
    			   try {
    		                xhr = new ActiveXObject("Msxml2.XMLHTTP");
    		            } catch (e) {
    		                xhr = new ActiveXObject("Microsoft.XMLHTTP");
    		            }
    			}
    			else { // XMLHttpRequest not supported by your browser
    			   alert(" Your browser does not support XMLHTTPRequest objects..."); 
    			   xhr = false; 
    			} 
                  return xhr
    		}

    		/**
    		*  method called when the user clicks on the button
    		*/
    		function go(){
    			var xhr = getXhr()
    			// We defined what we gonna do with the response
    			xhr.onreadystatechange = function(){
    				// We do somthing once the server's response is OK
    				if(xhr.readyState == 4 && xhr.status == 200){
    					var body = document.getElementsByTagName("body")[0];

    				// Retrieve <table> ID and create a <tbody> element

    					var tbl = document.getElementById("table");
    					var tblBody = document.createElement("tbody");
    					var row = document.createElement("tr");

    					var cell_1 = document.createElement("td");
    					var cell_2 = document.createElement("td");
    					var cell_3 = document.createElement("td");
    					var cell_4 = document.createElement("td");

    				// Create the first cell which is a text zone	
    					var cell1=document.createElement("input");
    					cell1.type="text";
    					cell1.name="fname";
    					cell1.size="20";
    					cell1.maxlength="50";
    					cell_1.appendChild(cell1);

    				// Create the second cell which is a text area	
    					var cell2=document.createElement("textarea");
    					cell2.name="fdescription";
    					cell2.rows="2";
    					cell2.cols="30";
    					cell_2.appendChild(cell2);

    				// Create the second cell which is a combo box
    					var cell3 = document.createElement("div");
    					cell3.id="rs";
    					cell3.innerHTML=xhr.responseText;
    					cell_3.appendChild(cell3);


    				// Create the fourth cell which is a button
    					var cell4=document.createElement("input");
    					cell4.type="button";
    					cell4.value="Delete"
    					cell4.onclick=delRow;
    					cell_4.appendChild(cell4);

    				// add cells to the row
    					row.appendChild(cell_1);
    					row.appendChild(cell_2);
    					row.appendChild(cell_3);
    					row.appendChild(cell_4);

    				// add the row to the end of the table body
    					tblBody.appendChild(row);

    				// put the <tbody> in the <table>
    					tbl.appendChild(tblBody);

    				//	Rename cells with the row index			
    					var ind=row.rowIndex;
    					var liste_fname = row.getElementsByTagName("input");
    					for(i=0; i < liste_fname.length; i++)
    					{
    					   if(liste_fname[i].name == "fname") 
    					   {
    						  liste_fname[i].name = liste_fname[i].name + "_" + ind; //give fname_1, fname_2, fname_3, ...

    					   }
    					}

    					var fd = row.getElementsByTagName("textarea");
    					fd[0].name = fd[0].name + "_" + ind;

    					var cd = row.getElementsByTagName("div");
    					cd[0].id = cd[0].id + "_" + ind;

    					var selectname = row.getElementsByTagName("select");
    					selectname[0].name = selectname[0].name + "_" + ind;

    				// appends <table> into <body>
    					body.appendChild(tbl);

    				// sets the border attribute of tbl to 1;
    					tbl.setAttribute("border", "1");

    					}		
    			}

    			xhr.open("GET","fstatus.php",true);
    			xhr.send(null);
    		}
function delRow(){
    var i= this.parentNode.parentNode.rowIndex;
    document.getElementById('table').deleteRow(i);
}
   </script>

Best regards,

Billy

share|improve this question
    
I use GET just to see if I would get something in the url. that's why I have func.html. thanks HBoss. I will stay with Ajax and try to code what you suggest –  billy85 Jun 25 '09 at 14:53
    
Just at a second glance, you're appending the table you generate to "document.getElementsByTagName("body")[0]", which would be outside the form -- unless I'm missing something, nothing should post back anyways. –  Hugoware Jun 25 '09 at 14:56
    
Ok yes. the header of my table, created in HTML () is already in the form. I will remove the appending of the table to the body. Thanks. –  billy85 Jun 25 '09 at 15:07

5 Answers 5

up vote 1 down vote

Because PHP is server side and Javascript is Client side you can't directly access elements on the page.

In order to access elements you need to post back to the server via a FORM or some AJAX.

You might look into jQuery to help you do this since it makes it easier to call your PHP programs and manipulate the DOM.

share|improve this answer
    
Did you even read what he posted? There's XHR at the top of javascript snippet... –  Ian Elliott Jun 25 '09 at 14:47
1  
I did see it - I'm suggesting instead of writing all that extra code he could do it much more easily using jQuery. –  Hugoware Jun 25 '09 at 14:50
    
I do not how JQuery. I am a newbie in JS so I struggle to have the above code working –  billy85 Jun 25 '09 at 15:01
    
You might want to start with a basic form and then add AJAX to it afterwards, I think you're doing well but might be over complicating this. Start simple then branch out as you understand more. –  Hugoware Jun 25 '09 at 15:11
    
This answer is basically telling the user to use jQuery but is not truly addressing the real question. Should be a comment. –  Juan Mendes Jun 15 '11 at 19:33
up vote 0 down vote

Well... for starters you want to see if $_GET['submit'] is set not $_GET['Enter'] because $_GET['submit'] should have the value of 'Enter'.

Also, each of your textarea's need to have a different name from the rest, so they don't overwrite each other ( Or they need to have a name that ends in [] (square brackets) and then php will turn them into an array).

And once the html is submitted... the DOM doesn't exist anymore so PHP can't really access it except through ajaxy kinf of stuff.

share|improve this answer
    
Thanks. I corrected it. now in the URL of func.html, I see all data enetered by the user in the table. –  billy85 Jun 25 '09 at 15:11
up vote 0 down vote

your cell name should not named like that ... it should be like this 

 <input type='text' name='username[]' value=''/>
 <input type='text' name='username[]' value=''/>
 <input type='text' name='username[]' value=''/>
..... 
<input type='submit' name='submit' value='submit'/>

so you can access from php as array of username $_GET[username][0] for example will display the first username etc ...

btw, try to use prototype or jquery (javascript framwork) it will simplify your life a lot.

to post data using jquery using ajax: 

var url = 'your.server.com/post/fstatus.php'; 
var data = $('#myform_id').serialize(); 
$.post(url, data , function(result){ 
 //... if the data was alright or submited ... 
 alert(result); 
},"json");

isn't it easier ? :)

to append a simply type: 

var newfield="<div id='rs'><textarea name='mytextarea'></div>"; $('#your_target_id').append(newfield);

in your php type 

<?php print_r($_GET); ?>

and you will see what i mean :)

share|improve this answer
1  
An entire framework to submit a form via ajax? Clearly what he has would be the more desired approach. –  Ian Elliott Jun 25 '09 at 14:51
1  
He's hardly just submitting a form - he's building all of it in Javascript and then trying to post it back, which seems like a perfect situation to use a framework like Prototype or jQuery –  Hugoware Jun 25 '09 at 14:54
    
You are right. I am creating everything in Javascript. Do you have any tutorial showing how to post back data to the server? Thanks. I am really a newvie in Javascript, I am more used to PHP –  billy85 Jun 25 '09 at 14:58
    
to post data using jquery using ajax: var url = 'your.server.com/post/fstatus.php';; var data = $('#myform_id').serialize(); $.post(url, data , function(result){ ... if the data was alright or submited ... alert(result); },"json"); isn't it easier ? :) to append a simply type: var newfield="<div id='rs'><textarea name='mytextarea'></div>"; $('#your_target_id').append(newfield); in your php type <?php print_r($_GET); ?> and you will see what i mean :) @ian: using ajax framework is not bad idea. it simplify the life ;) –  nightingale2k1 Jun 25 '09 at 16:24
up vote 0 down vote

I cannot stress enough - use jQuery. Your life will be an order of magnitude simpler.

share|improve this answer
up vote 0 down vote

I'm going to second the use of jQuery. It'll be tidier and keep you neatly in a single paradigm during this particular task.

One way to do this with PHP would be to dump your DOM object into JSON and then use PHP's JSON support. Depending on your purposes, you can roll your own class to process the JSON data or just grab it from the array you get from json_decode(). Another way would be to dump the object into its representative HTML and pass that to your PHP script rather than the DOM object. You can then reparse it using The Simple HTML DOM Parser, an easy-to-use, freely available DOM parser for PHP.

Of course, you should note that you're adding two processing steps here. If you can do the processing you need to do without switching languages, you're saving time and a bit of sanity.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.