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