dyninamicly extendable form - javascript

Ok maybe I've overlooked something really simple here, but I can't seem to figure this out. I am trying to make my form dynamicly extendable.
My Problem is i can't get this code working:
<html>
<head>
<?php
$i = 1;
$p = 1;
$r = 1;
?>
<script language="javascript">
function add()
{
document.getElementById("groesse").innerHTML = document.getElementById("grosse").innerHTML+"<input type='text' name='groesse[<?php echo $i;?>]'>";
document.getElementById("preis_l").innerHTML = document.getElementById("preis_l").innerHTML+"<input type='text' name='preis_a[<?php echo $p;?>]'>";
document.getElementById("preis_a").innerHTML = document.getElementById("preis_a").innerHTML+"<input type='text' name='preis_l [<?php echo $r;?>]'><br>";
<?php
$i = $i + 1;
$p = $p + 1;
$r = $r + 1;
?>
}
</script>
</head>
<body>
<?php
if ($_REQUEST['Selected'] == 'Speisekarte')
{
echo '<br><br><br><br>';
echo '<input type="button" value="+" onClick="add()">';
echo '<form action="insert.php" method="submit">';
echo '<table border="1">';
echo '<tr><td>ID</td><td>Name</td><td>Beschreibung</td><td>Größe</td><td>Preis_L</td><td>Preis_A</td></tr>';
echo '<tr><td><input type="text" id="ID" name="ID"></td>';
echo '<td><input type="text" id="Name" name="Name"></td>';
echo '<td><input type="text" id="Beschreibung" name="Beschreibung"></td>';
echo '<td id="groesse"></td>';
echo '<td id="preis_l"></td>';
echo '<td id="preis_a"></td>';
echo '</tr></table><input type="hidden" value="Speisekarte">';
echo '<button type="submit">OK</button></form>';
}
?>
</body>
</html>
I want when someone klicks the +-Button my Form gets 3 Textfields more in the table with the specific ids. I also tried it with div-Tags but that didn't worked too.
I hope someone can help me.

You can't use php clientside, it is parsed on the server only when visitor requests the page by GET or POST, so using $i = $i + 1 will not work clientside. By the way, use $i++ instead.
You could solve this with only javascript or, as an alternative, submit the form and present the form again with the extra fields needed so you can do it with php.
I recommend you have a look at jQuery and check out this answer with demo:
How to use jQuery to add form elements dynamically
(credits to PSL)

Related

My interaction between PHP and JavaScript is not working . What can i do to solve this?

I am echoing in the screen the (id,name,city) from MySQL.
But the problem and the challenge is inserting the values from MySQl into some inputs.
I am using the code:
verificar_id($pdo);
function verificar_id($pdo){
if(isset($_POST['verificar']) && isset($_POST['id_cliente'])){
session_start();
$id_cliente = $_POST['id_cliente'];
$sql= $pdo->prepare("SELECT * FROM `clientes` where `id`=?");
$sql->execute(array($id_cliente));
$info = $sql->fetchAll(PDO::FETCH_ASSOC);
echo "<pre>";
print_r($info);
echo "</pre>";
foreach ($info as $key => $value) {
$_SESSION['id'] = $value['id'];
$_SESSION['nome'] = $value['nome'];
$_SESSION['cidade'] = $value['cidade'];
}
}
}
?>
<script type='text/javascript'>
var nome = document.getElementById('id').value = "<?php echo $_SESSION['id'] ?>"
var nome = document.getElementById('nome').value = "<?php echo $_SESSION['nome'];?>"
var nome = document.getElementById('cidade').value = "<?php echo $_SESSION['cidade'];?
>"
</script>
And My HTML:
<body>
<form method="post" id="form">
<input type="number" name="id_cliente">
<input type="submit" name="verificar">
</form>
<input type="text" name="id" id="id">
<input type="text" name="nome" id="nome">
<input type="text" name="sobrenome" id="cidade">
</body>
And this is the result:
How you can see the result is almost exactly what i wanted: The only problem in all this is the browser is not doing what should do. Of some how, the browser is understanding that this a Js code(and inside the code, it is appearing the same result tha the "print_r", but is not running and i don't know how to solve this.
Someone can help me to solve this problem? Or solve this or show another way to me get the result? Pls.
Maybe another way to insert the values into a input.

How can put my values to mysql from my php table with jquery ajax method

<div id="kutu">
<?php
echo "<table ' border='1' width='200px'>";
echo "<tr>";
echo "<th>#</th>";
echo "<th>Oyuncu Adi</th>";
echo "</tr>";
for ($x = 1; $x <= $playernum; $x++) {
echo "<tr>";
echo "<td>$x </td>";
echo "<td><input id='serdar' type='text' name='player$x' > </td>";
echo "</tr>";
}
echo "</table>";
?>
<p> <input type="submit" value="Kayit Et!"></p>
</div>
Im taking $playernum from other page. In this table I will take players name and I wanna put this names to my mysql db with javascript ajax method. But I couldnt find the way.
My table looks like:
I suggest you change your input-text to the same name like this, instead of player$x:
<form method="POST">
<input type="text" name="player" /><br />
<input type="text" name="player" /><br />
<input type="text" name="player" /><br />
<input type="text" name="player" />
<p id="result"></p>
<button id="btn">Get Player Names</button>
</form>
For the javascript:
<script>
$("form").submit(function(e) {
e.preventDefault();
players = document.getElementsByName("player");
var result = [];
for (var i = 0; i < players.length; i++) {
result[i] = players[i].value;
}
$.post(
'index.php', {
data: result
},
function(msg) {
document.getElementById("result").innerHTML = msg;
}
);
});
</script>
I just created an empty array and stored the values of each input into it. Then sent that array over to the PHP file.
For the index.php file:
$data = $_POST["data"];
echo "From PHP<br/>";
foreach ($data as $d){
echo $d . "<br/>";
}
So you can use the variable $d to access individual player names.
Result image

Hide div once sql query is successful

I am trying to make the div, "yourpick," hide once the POST query is successful. I know I'm checking for the POST in the middle of my form, but can we work around this. Thanks.
echo '<div class="yourpick" style="display:block;">
YOUR PICK:<br><form method="post" action="draft.php">';
echo '<input type="radio" name="pick" value="user1">User1<br>';
if(isset($_POST["pick"])){
$pick = $_POST["pick"];
$picksql = "UPDATE picks SET playerpick='" . $pick . "' WHERE id=$id AND picknum=$picknum";
if ($mysqli->query($picksql) === TRUE) {
echo "Pick Successful!";
echo "<script>document.getElementById('yourpick').style.display = 'none';</script>";
} else {
echo "Error Ocurred. Please contact commisioner.";
}
}
echo "<input type='submit' name='submit' /></form></div>";
It is best imo to use php alternative syntax in the HTML, so if isset($_POST["pick"]), then hide the div:
<?php if(isset($_POST["pick"])): ?>
<div class="yourpick" style="display:block;">
YOUR PICK:<br><form method="post" action="draft.php">
<input type="radio" name="pick" value="user1">User1<br>
<input type="submit" name="submit"></form></div>
<?php endif; ?>
Makes your code all nice and tidy. :)
You do not need Javascript for this:
if (isset($_POST["pick"])) {
$pick = $_POST["pick"];
$picksql = "UPDATE picks
SET playerpick = '$pick'
WHERE id = $id AND picknum = $picknum";
if ($mysqli->query($picksql) === TRUE) {
echo "Pick Successful!";
} else {
echo "Error Ocurred. Please contact commisioner.";
}
}
else {
echo '<div class="yourpick" style="display:block;">'.
'YOUR PICK:<br><form method="post" action="draft.php">'.
'<input type="radio" name="pick" value="user1">User1<br>'.
'<input type="submit" name="submit"></form></div>';
}
Sorry, but I'm not pointing out the obvious security risks of this code.

Javascript Validation for Dynamic HTML Textboxes and PHP

Okay so I've searched multiple questions that are similar to mine, but aren't quite the same problem. All I'm trying to do is check each textbox in a table to see if it is a numerical value or not. This textbox has a quantity value, so it should only take numbers. Most of my code's in HTML and PHP.
The hidden input is a numerical value that creates the number of rows in the table that comes from the previous page.
I feel like I'm so close but yet so far away....
function validate() {
var submitOK = true;
var alertstring = "";
var x1 = document.getElementsByClassName('validate-it');
for(var i=0; i
" />
<?
$userinput = $_POST['productnumber'];
$count = 0;
do {
echo '<tr>'; ?>
<td>
<select name="product<?=$count?>" rel="cost<?=$count?>">
<option value="0"></option> <?
$sql1 = "select product_id, product_name from product";
$rs=mysqli_query($db,$sql1);
while($row=mysqli_fetch_array($rs)){ ?>
<option selected="selected" value="<?=$row[0] ?>"><?= $row[1] ?></option>
<?}?></select>
<? echo '<td> <input type="text" class="validate-it" name="quantity' .$count. '" value="" /> </td>';
echo '<td> <input type="text" id="cost'.$count.'" name="unitprice' .$count. '" value="" /> </td>';
echo '<td id="totalprice".$count> </td>';
echo '</tr>';
$count = $count + 1;
}
while($count < $userinput);
?>
I might be wrong, but I believe you should "register" new dynamic HTML elements you add on your page in order for jQuery to be aware of them.
Here are few useful links, in case everything else is working for you - then you just need to bind your new elements to these events and you'll be good to go:
Event binding on dynamically created elements?
Jquery how to bind click event on dynamically created elements?
Hope it helps! :)

How to dynamically create buttons names and detect which button is pressed in PHP?

This is an experiment int PHP that I'm currently working on. It'll be part of a bigger file.
The idea is, the program will generate a set of submit buttons in a form and a unique name will be assigned to each button in this convention: btn[the order of button]
The page will then poll to find if any button was pressed using isset(). Here's what I've got so far.
<html>
<head>
<title>Test Dynamic Naming</title>
</head>
<body>
<form action="testDynamicNaming.php" method="POST">
<?php
$row = 9;
for($i = 0; $i < $row; $i++) {
$name = 'btn['.$i.']';
?>
<input type="submit" name="<?php echo $name; ?>" value="<?php echo $name; ?>"/>
<?php
echo "<br>";
}
?>
</form>
<?php
extract($_REQUEST);
for($i = 0; $i < $row; $i++) {
$name = 'btn['.$i.']';
if(isset($_POST[$name])) {
echo "<br><br>".$name.' is pressed.';
}
// OR
if(isset($$name)) {
echo "<br><br>".$name.' is pressed.';
}
}
?>
</body>
</html>
I managed to set the name and values of the button as I wanted but the page couldn't detect the button that was pressed. What am I missing here, or is there any other way that I could accomplish the same task?
if(isset($_POST['btn'])){
foreach($_POST['btn'] as $key => $value){
echo "Button {$key}:{$value} pressed";
}
}
you may use
if(isset($_POST['btn'][$i])) {
echo "<br><br>".$_POST['btn'][$i].' is pressed.';
}
Maybe use javascript?
easy e.g.
<input type="submit" name="<?php echo $name; ?>" onclick="document.getElementById('<?php echo $name; ?>_pressed').value='true';" value="1"/>
<input type="hidden" id="<?php echo $name; ?>_pressed" name="x1_pressed" value="false">
if(isset($_POST[$name]) == "true") {

Categories