button that adds new text field

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
kingdm
Forum Commoner
Posts: 27
Joined: Thu Dec 03, 2009 9:32 am

button that adds new text field

Post 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?
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: button that adds new text field

Post by kaszu »

What have you search for, found, tried?
kingdm
Forum Commoner
Posts: 27
Joined: Thu Dec 03, 2009 9:32 am

Re: button that adds new text field

Post 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>";
}
?>
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: button that adds new text field

Post 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.
User avatar
SimpleManWeb
Forum Commoner
Posts: 57
Joined: Wed Dec 30, 2009 4:15 pm
Location: New Hampshire, USA

Re: button that adds new text field

Post 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.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: button that adds new text field

Post by daedalus__ »

dont bloat the size of your website for something so little
Post Reply