Jump to content

[add] button action=adding new form element problem


zgkhoo

Recommended Posts

<?php
include 'config.php';
include 'opendb.php';

if(isset($_POST['set'])){

$sql="INSERT INTO Result (DrawNumber,DrawDate,Category)
	VALUES ('$_POST[DrawNumber]','$_POST[DrawDate]','$_POST[Category]')";

mysql_query($sql, $con);
}
?>


<html>
<body>
<form action="setdraw.php"" method="POST" >
<table border="1"> 
<tr>
<td><h4>DrawNo</h4></td><td><h4>Set Draw Date(yyyy-mm-dd)</h4></td><td><h4>Set Category</h4></td>
</tr>
<tr>
<td>

<input type="text" name="DrawNumber">
</td>
<td>
<input type="text" name="DrawDate">
</td>
<td>
<select name=category>
<option value=Magnum> Magnum</option>
<option value=PMP> PMP</option>
<option value=Toto> Toto</option>
<option value=Sg> Sg</option>
</select>
</td>
<td>   
<input type="submit" name="add" value="Add">
</td>

</tr>
<tr>  
<td>
<input type="submit" name="set" Value="Set">
</td>

</tr>


</table>

</form>
</body>

</html>

how can i set to the action..when user click "add" button it will auto appear one another bellow form element..just like this?

 

<input type="text" name="DrawNumber">
</td>
<td>
<input type="text" name="DrawDate">
</td>
<td>
<select name=category>
<option value=Magnum> Magnum</option>
<option value=PMP> PMP</option>
<option value=Toto> Toto</option>
<option value=SgPools> Sg</option>
</select>
</td>
<td>   
<input type="submit" name="add" value="Add">
</td>

 

just like the attachment feature like yahoo mail..just click "add more" then it appear more field for attachment ..

thanks..

 

 

Here is a working example I found on google

 

<script language="javascript" type="text/javascript">

function addField() {
var tbody = document.getElementById("tblBody");
var ctr = tbody.getElementsByTagName("input").length + 1;
var input;

if ( ctr > 15 ) {
alert ("If you want to tell the whole world, dont do it all at once please");
}else{

if (document.all){ //input.name doesn't work in IE
input = document.createElement('<input name="field_'+ctr+'">');
}else{
input = document.createElement('input');
input.name = "field_"+ctr;
}

input.id = input.name;
input.type = "text";
input.value = "";
input.className = "textfield";
var cell = document.createElement('td');
cell.style.height = '30px';
cell.appendChild(document.createTextNode(ctr+". "));
cell.appendChild(input);
var row = document.createElement('tr');
row.appendChild(cell);
tbody.appendChild(row);

window.document.the_form.count.value = ctr;

}
}
</script>



<body>




<form name="the_form" id="the_form" method="post" action="">

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody id="tblBody">
<tr>
<td height="30">
1. <input name="field_1" type="text" class="textfield" id="field_1" />
</td>
</tr>
<tr>
<td height="30">
2. <input name="field_2" type="text" class="textfield" id="field_2" />
</td>
</tr>
<tr>
<td height="30">
3. <input name="field_3" type="text" class="textfield" id="field_3" />
</td>
</tr>
<tr>
<td height="30">
4. <input name="field_4" type="text" class="textfield" id="field_4" />
</td>
</tr>

<tbody
</table>
<input name="count" type="hidden" id="count" value="4"/>
<input name="add" type="button" class="button" id="add" value="Add Another" onClick="addField();"/>

</form>


</body>
</html>

 

Here is something good as well

http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.