PHP/HTML: Creating an element using php, with the click of a button

Question

I've been trying to do something very complicated (in my opinion, because it doesn't quite work the way I want it to). What I want, is that I have a text field where I type in something, then next to that is a button, and when you type in something in the text field, then press the button a new html element will appear (a box with in there the text you typed in the text field). Now, I've been trying this many different ways. Here's the code I'm using now:

<html>

<head>

<style>
div.cat {
width: 200px;
height: 25px;
border: 1px solid black;
}
</style>

</head>

<?php

$form = "<form method=\"post\" action=\"<?php echo $_SERVER['PHP_SELF']; ?>\"><input type=\"text\" name=\"name\"><br><input type=\"submit\" value=\"Submit\"></form>";

function newCategory() {
$categoryname = $_POST['name'];
$category = "<div class=\"cat\"> <?php $categoryname ?> </div>"

echo $category;
}


?>

<body>

<?php
echo $form;

newCategory();
?>

</body>

</html>

Now, the issue seems to be that if you press the button, the newCategory() function won't execute again. Please help!

EDIT: The issue was in the syntax errors. It's still not working the way I want it to work, though I now know what went wrong. I guess I have to use JavaScript.

PHP is a server-side language. It will have finished execution once the page is rendered, so if you're trying to create a new HTML element without a page refresh, this won't work. Use JavaScript instead. — Amal Murali, Feb 26 '14 at 11:52
Please make sure you understand this first: [Reference: Why does the PHP (or other server side) code in my Javascript not work?](http://stackoverflow.com/questions/13840429/reference-why-does-the-php-or-other-server-side-code-in-my-javascript-not-wor) — deceze, Feb 26 '14 at 11:53
saw an error in your code $form should be like this: `$form = "

"` — CodeBird, Feb 26 '14 at 11:57
Thanks, all. Is there any way to do this with php? Or do I really need JavaScript..? — YSbakker, Feb 26 '14 at 13:59

score 5 · Accepted Answer · answered Feb 26 '14 at 12:21

5

try this code...

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<input type="text" id="text1"/>
<input type="button" id="btn" value="Button"/>
<div id="div1">
</div>
<script>
$('#btn').click(function(){
var gettext=document.getElementById("text1").value;
var temp=document.createElement("input");
temp.id="text2";
temp.value=gettext;
$("#div1").html(temp);
});
</script>

answered Feb 26 '14 at 12:21

King-of-IT

578
4
18

Thanks for the reply, it does work but I don't really want to do it this way. Upvote for the effort though. Thanks! – YSbakker Feb 26 '14 at 14:00
@YSbakker then tell me friend...what do u want? i will try my best. – King-of-IT Feb 27 '14 at 05:05
Never mind, this turns out to be the way I want it after all. Thanks a lot. – YSbakker Feb 27 '14 at 14:27
1

@YSbakker its my pleasure. – King-of-IT Feb 28 '14 at 05:14

score 2 · Answer 2 · answered Feb 26 '14 at 12:06

You have syntax error, Replace this to your whole code with this, it is working well

<html>
<head>
<style>
div.cat {
    width: 200px;
    height: 25px;
    border: 1px solid black;
}
</style>
</head>
<?php

    $form = "<form method='post' action='".$_SERVER['PHP_SELF']."'><input type='text' name='name'><br><input type='submit' value='Submit'></form>";

    function newCategory() {
        $categoryname = $_POST['name'];
        $category = "<div class='cat'>".$categoryname."</div>";

        return $category;
    }

?>
<body>
<?php
        echo $form;
        echo newCategory();
    ?>
</body>
</html>

Thanks for putting in so much effort. I now see what went wrong. It's working, though still not the way I want it to work. I guess I need JavaScript then. — YSbakker, Feb 26 '14 at 14:01

score 1 · Answer 3 · answered Feb 26 '14 at 12:02

1

The problem is in this line of code: $category = "<div class=\"cat\"> <?php $categoryname ?> </div>". You cannot have php tags <?php ?> inside another set of php tags.

Just change it to this: $category = "<div class=\"cat\">".$categoryname."</div>";.

And make sure you fix all the other syntax errors as well.

answered Feb 26 '14 at 12:02

2MAS

120
6

I see, I guess I missed those. Thanks for telling. – YSbakker Feb 26 '14 at 14:00

PHP/HTML: Creating an element using php, with the click of a button

3 Answers3