0

I have a div named mainDiv and in that I have one input and one button html controls. Below is the code for that. (HTML FILE)

<div id="mainDiv">
    <input type="text" id="myText">
    <button type="button" id="myButton" onclick="myButtonClicked()">Click Me</button>       
</div>

But I want to create such 10 divs at runtime with differenct IDs like mainDiv1, mainDiv2.....mainDiv10. Similarly myText1, myText2... (PHP FILE)

<?php
for(var i=1;i<=10;i++)
{ 
?>
    <div id="mainDiv">
        <input type="text" id="myText">
        <button type="button" id="myButton" onclick="myButtonClicked()">Click Me</button>       
    </div>
<?php
}
?>
Improve this question
2
  • So what is your problem? Commented Mar 28, 2014 at 9:58
  • You have an ID selector in your loop (#mainDiv). This will place that ID multiple times, which isnt allowed, an ID may only occur once. Commented Mar 28, 2014 at 10:00

6 Answers 6

Reset to default
4

Try like this:

<?php
for(var i=1;i<=10;i++)
{ 
?>
    <div id="mainDiv<?php echo $i; ?>">
        <input type="text" id="myText<?php echo $i; ?>">
        <button type="button" id="myButton" onclick="myButtonClicked()">Click Me</button>       
    </div>
<?php
}
?>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

Use this code 

 <?php  for($i=1;$i<=10;$i++) {?>

<div id="mainDiv<?php echo $i; ?>">
        <input type="text" id="myText<?php echo $i; ?>">
        <button type="button" id="myButton" onclick="myButtonClicked()">Click Me</button>       
    </div><?php }?>
Improve this answer

Comments

2

Try this

   <?php
for($i=1;$i<=10;$i++) {
    echo '<div id="mainDiv'.$i.'">
        <input type="text" id="myText'.$i.'">
        <button type="button" id="myButton'.$i.'" onclick="myButtonClicked()">Click Me</button>       
    </div>';
}
?>

or 

<?php
for($i=1;$i<=10;$i++) {
    ?> 
    <div id="mainDiv<?php echo $i;?>">
        <input type="text" id="myText<?php echo $i;?>">
        <button type="button" id="myButton<?php echo $i;?>" onclick="myButtonClicked()">Click Me</button>       
    </div>
<?php }
?>
Improve this answer

1 Comment

I don't want to use echo as my HTML part is far big as shown in this example and PHP part is less. So, I think Jenz's solution will be appropriate for me.
1

just print $i in php where your want, like this <?php print $i;?> or this <?=$i?>

 <div id="mainDiv<?=$i?>">
Improve this answer

Comments

0 
    <?php
    for($i=1;$i<=10;$i++)
    { 
    ?>
        <div id="mainDiv<?php echo $i;?>">
            <input type="text" id="myText<?php echo $i; ?>">
            <button type="button" id="myButton" onclick="myButtonClicked()" name="button<?php echo $i; ?>">Click Me</button>
        </div>       

    <?php
    }
    ?>

This should do the trick.

Improve this answer

Comments

0

I suggest you to switch to a template engine, obviously this is not an hard case, but you will gain a lot of benefits with a very small learning curve. An example with Twig:

{% for i in 0..10 %}
  <div id="mainDiv{{ i }}">..</div>
{% endfor %}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.