Changing from PHP to JS

Question

My problem maybe is basic, i just lack the skills. How can i turn the following code into javascript? :

    <?php
    for($i=1; $i<10; $i++){
        echo "<input type='text' placeholder='Word' name='word$i' /><br />";
    }
    ?>

I want to add an input everytime the user presses a button (already built) but i need every new input to have the following number than the one before. For instance:

input 1 (... name='word1') press again the button input 2 (... name='word2') press again the button input 3 (... name='word3')

Thanks! Happy 2013!

Do you want pure javascript, or jquery ? You should read up a bit on api.jquery.com/jQuery — Vlad Preda
– Vlad Preda, Commented Jan 11, 2013 at 7:33
Please be noted that PHP is executed at server side, while JavaScript is executed at client side. Your end result seems very doable (and actually basic) with JavaScript, but the output order will not be the same. — Passerby
– Passerby, Commented Jan 11, 2013 at 7:37

THE ONLY ONE · Accepted Answer · 2013-01-11 07:39:49Z

1

Ok you have one button created please write a onclick event on it whick fires a function like this and also create one main div in which your elements can be added

<input type="button" onclick="getElement();"/>
<di id="main"></div>

In the function getElement please write this code:

var i=1;
function getElement(){
var str = "<input type='text' placeholder='Word' name='word"+i+"' />";
i++;
document.getElementById('main').innerHTML = str;
}

answered Jan 11, 2013 at 7:39

THE ONLY ONE

2,1901 gold badge12 silver badges6 bronze badges

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

Comments

aug · Accepted Answer · 2013-01-11 07:42:44Z

1

for (var i = 0; i < 10; i++) {
  var input = document.createElement('input');
  input.setAttribute('type', 'text');
  input.setAttribute('placeholder', 'Word');
  input.setAttribute('name', 'word' + i);
}

Something like this?

answered Jan 11, 2013 at 7:42

aug

11.8k10 gold badges76 silver badges96 bronze badges

Comments

Joel Peltonen · Accepted Answer · 2013-01-11 07:49:27Z

1

Tested in Chrome

<input type="button" value="Magical pony time!" onclick="clickhandler()" />

<div id="container"></div>

<script type="text/javascript">
    // contains the counter for elements added
    window.__buttonClickCounter = 0; 

    // Keep reference to container
   var c = document.getElementById('container');

    // Click handler that appends to the contents of the container
    var clickhandler = function() {
        c.innerHTML = c.innerHTML + "<input type='text' placeholder='Word' name='word"+window.__buttonClickCounter+"' value="+window.__buttonClickCounter+" /><br />";
        window.__buttonClickCounter++;
    }
</script>

answered Jan 11, 2013 at 7:49

Joel Peltonen

13.5k7 gold badges68 silver badges108 bronze badges

Comments

Jav_Rock · Accepted Answer · 2013-01-11 08:07:24Z

0

Try

<?php
for($i=1; $i<10; $i++){
?>
<input type='text' placeholder='Word' name='word'<?php echo $i;?>/>
<?php
}
?>

edited Jan 11, 2013 at 8:07

Jav_Rock

22.3k21 gold badges126 silver badges165 bronze badges

answered Jan 11, 2013 at 7:38

웃웃웃웃웃

12k15 gold badges63 silver badges95 bronze badges

Collectives™ on Stack Overflow

Changing from PHP to JS

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related