button that adds new text field
Moderator: General Moderators
button that adds new text field
I have a problem in here which requires redundant use of input fields. My system is somewhat like an application form automation. A user can login and then edit his application form. Part of it is asking if he/she has a son/daughter. I want to have a button "Add Dependents" that will add an input field 'name' and 'birthday'.. I know this is PHP related matters, but this specific module needs Javascript, anyone can help?
Re: button that adds new text field
What have you search for, found, tried?
Re: button that adds new text field
I found this code, and tried to analyze, but I can't seem to understand how to manipulate PHP here. Example, how to know that this dependents belong to the member who login..kaszu wrote:What have you search for, found, tried?
Code: Select all
<html>
<head>
<script type="text/javascript">
var counter = 1;
var limit = 10;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>
</head>
<form method="POST" action="run.php">
<div id="dynamicInput">
Entry 1<br><input type="text" name="myInputs[]">
</div>
<input type="button" value="Add another text input" onClick="addInput('dynamicInput');">
<input type="submit" name="submit" />
</form>
</html>run.php
Code: Select all
<?php
$myInputs = $_POST["myInputs"];
foreach ($myInputs as $eachInput) {
echo $eachInput . "<br>";
}
?>- daedalus__
- DevNet Resident
- Posts: 1925
- Joined: Thu Feb 09, 2006 4:52 pm
Re: button that adds new text field
you can not manipulate php with javascript
something like that may work
but the code probably won't im doing this off the top of my head.
Code: Select all
<html>
<head>
<script>see javacsript below...</script>
</head>
<body>
<form>
<span>Do you have children?</span>
<input type="button" name="oisadjf" value="Add a child" />
</form>
</body>
</html>
Code: Select all
i = 0;
document.forms[0].elements[0].onclick = function ()
{
form = document.forms[0];
input = document.createElement("input");
input.type = "text";
input.name = "child_" + i++;
form.appendChild(input);
if (form.elements[0].value != "Add another child") { form.elements[0].value = "Add another child"; }
}
but the code probably won't im doing this off the top of my head.
- SimpleManWeb
- Forum Commoner
- Posts: 57
- Joined: Wed Dec 30, 2009 4:15 pm
- Location: New Hampshire, USA
Re: button that adds new text field
I would recommend using JQuery for this. Using the .append function you can easily add new fields/divs/spans etc... to your form. You could use a function like this to accomplish what you need.
Then just hand in a unique id (probably a number) to the function and you will get unique text fields added to your form.
Code: Select all
function addFormField(id) {
$("#divTxt").append("<p id='row" + id + "'><label for='txt" + id + "'>Field " + id + " <input type='text' size='20' name='txt[]' id='txt" + id + "'> <a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'>Remove</a><p>");- daedalus__
- DevNet Resident
- Posts: 1925
- Joined: Thu Feb 09, 2006 4:52 pm
Re: button that adds new text field
dont bloat the size of your website for something so little