I am trying to write php code in script tag but something seems to be going wrong. Here is the complete code:
<!DOCTYPE html>
<?php
if(isset($_GET['column-count']))
$var = $_GET['column-count'];
?>
<html>
<head>
<title>Index</title>
<script>
function send_column_count(){
var col_count = document.getElementById('num-cols').value;
alert(col_count);
document.getElementById('column-count-id').value = col_count ;
var temp = document.getElementById('column-count- id').value;
alert(temp);
<?php
for($i = 0;$i < $var ;$i = $i+1){
$temp = "col".$i;
echo " <input type='text' placeholder='column- name' id='" . $temp . "' />";
}
?>
alert('Reached here');
return true;
}
</script>
</head>
<body>
<form align="center" method="GET" action="" >
<h1>Snippt</h1>
<select id="num-cols" onchange="send_column_count()">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<input type="hidden" name="column-count" id="column-count-id" value="7" />
<input type="submit" name="Submit" value="Create Table" />
</form>
</body>
</html>
Now the console shows the error message : Unexpected token < I am not able to understand what's going wrong!
Your original logic is totally flawed. You do not even need PHP to dynamically add the fields. But anyhow, I'm posting the correct version for your app which sort of works the same way you want it to work (with PHP):
<!DOCTYPE html>
<?php
$var = 0;
if(isset($_GET['column-count']))
$var = $_GET['column-count'];
?>
<html>
<head>
<title>Index</title>
<script>
function send_column_count(){
var col_count = document.getElementById('num-cols').value;
alert(col_count);
document.location.href = location.href.split('?')[0]+"?column-count="+col_count;
}
</script>
</head>
<body>
<?php
for($i = 0;$i < $var ;$i = $i+1){
$temp = "col" . $i;
echo " <input type='text' placeholder='column- name' id='" . $temp . "' />";
}
?>
<form align="center" method="GET" action="" >
<h1>Snippt</h1>
<select id="num-cols" onchange="send_column_count()">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<input type="hidden" name="column-count" id="column-count-id" value="7" />
<input type="submit" name="Submit" value="Create Table" />
</form>
</body>
</html>
EDIT: The JS way:
function send_col_count() {
var col_count = document.getElementById('num-cols').value;
var htmlConstructed = "";
for(i=0;i<col_count;i++) {
htmlConstructed += "<input type='text' id='col"+i+"' />";
}
document.getElementById('myCustomFields').innerHTML = htmlConstructed;
}
// and somewhere in body:
<div id="myCustomFields"></div>