Page 1 of 1
button that adds new text field
Posted: Tue Dec 29, 2009 4:51 am
by kingdm
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
Posted: Tue Dec 29, 2009 6:44 am
by kaszu
What have you search for, found, tried?
Re: button that adds new text field
Posted: Tue Dec 29, 2009 7:28 am
by kingdm
kaszu wrote:What have you search for, found, tried?
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..
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>
This PHP script will print the value, which is quite right, but after this I don't know how to concatenate with the user_id of the one who logged in and saved into a database.
run.php
Code: Select all
<?php
$myInputs = $_POST["myInputs"];
foreach ($myInputs as $eachInput) {
echo $eachInput . "<br>";
}
?>
Re: button that adds new text field
Posted: Wed Dec 30, 2009 4:26 pm
by daedalus__
you can not manipulate php with javascript
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"; }
}
something like that may work
but the code probably won't im doing this off the top of my head.
Re: button that adds new text field
Posted: Wed Dec 30, 2009 4:32 pm
by SimpleManWeb
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.
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>");
Then just hand in a unique id (probably a number) to the function and you will get unique text fields added to your form.
Re: button that adds new text field
Posted: Wed Dec 30, 2009 4:43 pm
by daedalus__
dont bloat the size of your website for something so little