Avoiding duplicate code between php and javascript

Question

I have a php page with a form on it for adding people to a small group.

For each person being added, there is a with multiple form elements, each named according to the person's number. For example:

<div class="user">
<input type="text" name="user1LastName" />
...
</div>
<div class="user">
<input type="text" name="user2LastName" />
...
</div>

For each person in the database, the php page populates a form sections.

To add additional people, the user can click on a "+" icon, at which time the page uses jQuery to dynamically populate a new . To do this I am simply appending the new div html to the existing form. This means that the javascript page contains all the same html markup (to be appended), as the php page.

This seems like an unnecessary duplication of code. Whenever I change something in the php page, I also have to change it in the javascript code.

Is there any general method for avoiding such code duplication? The only thing I can think of is to use jQuery to grab the html from an already existing div. But in this case, the values of the form fields for user n will appear in the new code for user n+1.

Thanks.

js is client side, it can be turned off, you can't therefore rely on it, as php is server side it can be relied on. — user557846
– user557846, Commented Apr 3, 2011 at 23:14
@Dagon -- we made the decision with this application to require javascript on the user end. of course, i am still validating all input on the server side, etc. — user480029
– user480029, Commented Apr 3, 2011 at 23:20

Dejan Marjanović · Accepted Answer · 2011-04-03 23:17:34Z

1

Capisci :)?

<div class="user" id="user_1">
<input type="hidden" name="uid[0]" value="1"/>
<input type="text" name="lastname[0]" value="user480029"/>
...
</div>

<div class="user" id="user_2">
<input type="hidden" name="uid[1]" value="2"/>
<input type="text" name="lastname[1]" value="arto"/>
...
</div>

Now when adding another field just...

<div class="user" id="user_3943094103945">
<input type="hidden" name="uid[]" value=""/>
<input type="text" name="lastname[]" value=""/>
...
</div>

Then you iterate trough $_POST[] a do what you want.

You have user ID on .user, so I you delete user you can remove that part of HTML (this is more for UX), more importantly, you don't have hundreds of variables but just a few array which you can iterate in one loop. Hope you get the point. Cheers.

answered Apr 3, 2011 at 23:17

Dejan Marjanović

19.4k7 gold badges54 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user480029 Over a year ago

Grazie webarto. Capisco. Using arrays is a cleaner way to loop through the $_POST values. Right now I'm just using dynamic variable names to loop through the names. ${"LastName".$i}, etc.

user480029 Over a year ago

But what I'm mainly trying to avoid now, is having to duplicate all of the form html from my php page, in the javacript. The php loops through all existing records, outputting the completed form fields. When the user want to add another person, the js inserts the same html. So the html is written up in two places -- the php loop and the js. I'd like to avoid this duplication. Thanks!

Dejan Marjanović Over a year ago

Are you building some kind of private app? Can you post entire .class div, so I can give you better answer. I need to know what elements are you using.

yingted · Accepted Answer · 2011-04-04 01:30:16Z

0

The php code should give the javascript a "prototype", which could be modified using javascript. That way, even if there aren't any users, the javascript would still work. This example is obviously missing lots of code (like forms), but it should give you an idea. I haven't tested it because I assume you have to make lots of modification anyways.

 <script type="application/x-javascript">
  addEventListener("load",function(){
   document.getElementById("add-user").addEventListener("click",function(){
    var node=document.getElementById("prototype-container").getElementsByClassName("users")[0].cloneNode(true),n=document.getElementById("add-user").getElementsByClassName("users").length,list=node.getElementsByTagName("input");
    document.getElementById("user-list").appendChild(node);
    node.id="users_"+(n+1);
    for(var i=0;i<list.length;++i)
     list[i].name&&(list[i].name+="["+n+"]");
   },false);
  },false);
 </script>
</head>
<body>
 <div id="prototype-container">
  <? /* print out a div without any information in it */ ?>
 </div>
 <div id="user-list">
  <? /* print out divs with some infomation in them */ ?>
 </div>
 <button id="add-user">add a user</button>

answered Apr 4, 2011 at 1:30

yingted

10.8k4 gold badges25 silver badges15 bronze badges

2 Comments

user480029 Over a year ago

Thanks for the suggestion. I've thought about doing something like this, but the only way I see of implementing it amounts to duplicating my code in the php. In the php I have a loop that is populating that user div from the db entries. Then I would need to place the "empty"/ unpopulated div structure in the same php page. Is there a clean way to only code the div structure once in the php, and then fill it in db loop and grab it from the js? Sorry if this is too general . . .

user480029 Over a year ago

I ended up using a modification of this approach. I created a function to output the div content, that took an array of the values used to fill the div. I echoed all the div using this function, including one "blank/ template" div. The html for the div is only written out once-- in the function-- and then the js can pull from the blank div.

Collectives™ on Stack Overflow

Avoiding duplicate code between php and javascript

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related