Using a JS variable inside php code?

Question

I'm attempting to make it so that when you click a button, it'll add new fields to the page. I know that onclick can only take JS functions so I decided to try my luck making a JS script. At first I had tried to do

<html>
<head><title>multiple line test</title><head>
<body>
<script type="text/javascript">
var texters='';
var num=0;
function newInput(nomnom)
{
    texters='';
    num=nomnom+1;
    for (var i=0; i<nomnom; i++)
    {
        texters+='<p>\
        Please specify a file, or a set of files:<br>\
        <input type="file" size="40">\
        </p>\
        <p>\
        Caption : <br> \
        <input type="text" size="30">\
        </p>';\
    }
    document.write(texters+'<div>\
    <input type="submit" value="Send">\
    </div>\
    </form>\
    <br>' + '<input type="button" value="new entry" onclick="newInput(num)">' . '</body></html>');
}
newInput(num);
</script>
</body>
</html>

but that didn't work. So I tried instead to add a little bit of php being that I know it better. I tried this :

<html>
<head><title>multiple line test</title><head>
<body>
<script type="text/javascript">
var texters='';
var num=0;
function newInput(nomnom)
{
    document.write(<?php
    tex='';
    for (var i=0; i<=(nomnom); i++)
    {
        tex.='<p>
        Please specify a file, or a set of files:<br>
        <input type="file" size="40">
        </p>
        <p>
        Caption : <br> 
        <input type="text" size="30">
        </p>';
    }
    echo tex . '<div>
    <input type="submit" value="Send">
    </div>
    </form>
    <br>' . '<input type="button" value="new entry" onclick="newInput(num)">' . '</body></html>';
?>);
}
newInput(num);
</script>
</body>
</html>

But I know that won't work because I can't get the variable I'm using for the number of fields to use out of the JS and into the PHP. Is there any way I could force JS to put that number in $_POST so I can retrieve it without having to make another form? Or is there a better way to do what I'm trying to do?

PHP runs on the server. JavaScript runs in the browser. Understand what that means, and then disentangle the PHP code from the JS code. — Matt Ball
– Matt Ball, Commented Jul 20, 2011 at 17:54
@MattBall: that's usually my response to these types of questions too, but the OP's reference to $_POST makes me believe that they're actually using postback. It's a bit unclear in the question, though. — Paul Sonier
– Paul Sonier, Commented Jul 20, 2011 at 18:01

Paul Sonier · Accepted Answer · 2011-07-20 17:54:51Z

2

You can set a hidden input field on the form, and have the Javascript populate that.

answered Jul 20, 2011 at 17:54

Paul Sonier

39.6k3 gold badges81 silver badges118 bronze badges

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

Comments

Joshua · Accepted Answer · 2011-07-20 18:16:08Z

2

You should try using jquery http://jquery.com/ or a simialr scripting library as it will make manipulating the DOM much easier. Using jquery you can create an onClick function that will do what you want in a few lines of code:

var onClickAddInput = function()
{
    $('div#your_div_id').append('<input type="text" size="30" />');
}

If you need to add more input boxes you could loop the append statement and give the individual input boxes ids that equal the loop number.

edited Jul 20, 2011 at 18:16

answered Jul 20, 2011 at 18:05

Joshua

7919 silver badges24 bronze badges

Comments

aepheus · Accepted Answer · 2011-07-20 19:05:28Z

1

As commented PHP is for serverside, javascript for clientside. html is the ui elements which either can create. If you need something done on the server, do it in PHP, if it needs to be done on the client, do it in javascript. Here is a sample of javascript for you.

function newInput(nomnom)
{
    var tex='';
    for (var i=0; i<=(nomnom); i++)
    {
     tex+='<p>Please specify a file, or a set of files:'; 
     tex+='<br/><input type="file" size="40"></p>'; 
     tex+='<p>Caption :'; 
     tex+='<br/><input type="text" size="30"></p>';
    }
    document.getElementById('form_id').innerHTML += tex;
}

when this function is called, it will create a number of new inputs and add them to the form with the id "form_id".

edited Jul 20, 2011 at 19:05

answered Jul 20, 2011 at 18:08

aepheus

8,2178 gold badges39 silver badges52 bronze badges

2 Comments

bittersweetryan Over a year ago

Don't forget to var the tex variable or it'll end up in the global scope.

SDuke Over a year ago

Thanks that worked, sorry this is the first thing I've done with JS.

Collectives™ on Stack Overflow

Using a JS variable inside php code?

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related