Jump to content

Creating form fields on thefly.

kevgais

By kevgais
in PHP Coding Help

 Share

Recommended Posts

kevgais Member

kevgais

Posted
Posted

Hi Guys,

 

I have a form where users will enter names and email address of people. I have put 5 Rows 2 of input boxes on a form and the data is sent to the mysql database no problem.

 

My problem is that in some case people will need to add more than 5 people. I'm thinking that a 'Add additional person' button that will create 2 new input boxes on the fly is the solution but:

 

1 - I have no idea how to create buttons on the fly

 

and

 

2 - how to send this data to the mysql database as the db only has the 5 fields needed.

 

Does anyone have an idea on the best way forward on this?

 

Cheers for any help at all.

Kev

 

Link to comment
https://forums.phpfreaks.com/topic/105630-creating-form-fields-on-thefly/
Share on other sites
jonsjava Member

jonsjava

Posted
Posted

well, javascript is the answer. and I know of a few places to get that javascript

from http://en.allexperts.com/q/Javascript-1520/add-textbox-control-html.htm

Create a div on the page that has nothing in it, then use the javascript function to set the innerHTML property of the DIV element to whatever you want, including an input tag.

 

e.g., document.getElementById('myDivName').innerHTML =

        "<input type='text' />";

 

RichardRotterdam Member

RichardRotterdam

Posted
Posted

if you want an easy way you could just open up a new page with addition fields for the user names and emails.

so the button would be just a link

<a href="addmoreppl.php" >add more ppl</a>

ofcourse this would ahve a side effect of you losing entered data.

 

for the multiple inserts and post varibles i would use an input array

<form action="page.php" method="post" >
<input name="first_name[]" />
<input name="first_name[]" />
<input name="first_name[]" />

this will result in posting an array

page.php

//if all fields were entered this would echo 3 names
foreach($_POST['first_name'] as $name){
  echo($name);
}

 

 

jonsjava Member

jonsjava

Posted
Posted

incorrect 947740.  I do it this way: (example only, so modify to suit your needs)

$removal = implode($_POST);
foreach($_POST as $key => $value) {
 if ($value != "Submit"){ //removes the submit button from the array
          //do your thing with each
         }
}

What it does, basically, is takes all the posted data, and allows you to manipulate en masse.

jonsjava Member

jonsjava

Posted
Posted

your Javascript form (example)

<html>
<head>
<script>
var arrInput = new Array(0);
  var arrInputValue = new Array(0);

function addInput() {
  arrInput.push(arrInput.length);
  arrInputValue.push("");
  display();
}

function display() {
  document.getElementById('parah').innerHTML="";
  for (intI=0;intI<arrInput.length;intI++) {
    document.getElementById('parah').innerHTML+=createInput(arrInput[intI], arrInputValue[intI]);
  }
}

function saveValue(intId,strValue) {
  arrInputValue[intId]=strValue;
}  

function createInput(id,value) {
  return "<input type='text' id='test "+ id +"' onChange='javascript:saveValue("+ id +",this.value)' value='"+ value +"'><br>";
}

function deleteInput() {
  if (arrInput.length > 0) { 
     arrInput.pop(); 
     arrInputValue.pop();
  }
  display(); 
}

</script>
</head>
<body bgcolor=dddddd>
<form method="POST" action="post.php">
<p id="parah">Click below to dynamically create/remove input boxes in this field</p>

<a href="javascript:addInput()">Add more input field(s)</a><br>
<a href="javascript:deleteInput()">Remove field(s)</a>
<input type="submit" value="Submit" id="submit"></form>

your PHP file (named post.php for this example)

<?php
foreach($_POST as $key => $value) {
 if ($value != "Submit"){ //removes the submit button from the array
          //do your thing with each
         }
}

kevgais Member

kevgais

Posted
  • Author
Posted

thanks jonsjava, I've managed to adapt the javascript perfectly for my needs.

 

I'm just having a problem now with the post.php. Basically what do I need to put in the "//do your thing with each" bit?

 

is this where the sql statement to insert the values to my db goes?

 

again thanks for your help so far.

redarrow Advanced Member

redarrow

Posted
Posted

tell me what u think anyone ...

 

it a way not to use javascript to select more then 1 form field think it better then javascript really.........

 

you can add your own html css flashness........

 

 

 

url code.......example.........

<?php

if($_POST['submit']){

	$email=$_POST['email'];
	$email=implode('<br>',$email);

echo "Thank you for submitting the following email's <br> $email";

exit;

}

?>

<br><br><br>

<center><b><h1>Please select how meny users/email's want to post please!</h1></b></center>

<br><br>

<center>Number of people to email/update database!</center>

<br><br>

<table align="center" width="250" border="4"><tr>
<?php
for($i=1; $i<11; $i++){

echo " <td align='center'><a href='".$_SERVER['php_self']."?id=$i'>$i</a></td>";
}

?>
</tr>

</table>

<?php
if($_GET['id']==1 || $_GET['id']==2 || $_GET['id']==3 || $_GET['id']==4 || $_GET['id']==5
|| $_GET['id']==6 || $_GET['id']==7 || $_GET['id']==8 || $_GET['id']==9 || $_GET['id']==10){

?>

<form method="POST" action="">

<?php 

$num=$_GET['id'];

for($i=0; $i<$num; $i++){

echo" <center> <br> Username! <br> <input type='text' name='username[]'>	

<br><br>

Email address! <br> <input type='text' name='email[]'> <br><br>";

}

?>

<center><input type="submit" name="submit" value="SEND!"></center>

</form>

<?php } ?>

RichardRotterdam Member

RichardRotterdam

Posted
Posted

thanks jonsjava, I've managed to adapt the javascript perfectly for my needs.

 

I'm just having a problem now with the post.php. Basically what do I need to put in the "//do your thing with each" bit?

 

is this where the sql statement to insert the values to my db goes?

 

again thanks for your help so far.

nope this is where you filter the array for emails and names first after you have done that then you create and sql query

kevgais Member

kevgais

Posted
  • Author
Posted

tell me what u think anyone ...

 

it a way not to use javascript to select more then 1 form field think it better then javascript really.........

 

you can add your own html css flashness........

 

 

 

url code.......example.........

<?php

if($_POST['submit']){

	$email=$_POST['email'];
	$email=implode('<br>',$email);

echo "Thank you for submitting the following email's <br> $email";

exit;

}

?>

<br><br><br>

<center><b><h1>Please select how meny users/email's want to post please!</h1></b></center>

<br><br>

<center>Number of people to email/update database!</center>

<br><br>

<table align="center" width="250" border="4"><tr>
<?php
for($i=1; $i<11; $i++){

echo " <td align='center'><a href='".$_SERVER['php_self']."?id=$i'>$i</a></td>";
}

?>
</tr>

</table>

<?php
if($_GET['id']==1 || $_GET['id']==2 || $_GET['id']==3 || $_GET['id']==4 || $_GET['id']==5
|| $_GET['id']==6 || $_GET['id']==7 || $_GET['id']==8 || $_GET['id']==9 || $_GET['id']==10){

?>

<form method="POST" action="">

<?php 

$num=$_GET['id'];

for($i=0; $i<$num; $i++){

echo" <center> <br> Username! <br> <input type='text' name='username[]'>	

<br><br>

Email address! <br> <input type='text' name='email[]'> <br><br>";

}

?>

<center><input type="submit" name="submit" value="SEND!"></center>

</form>

<?php } ?>

 

cheers redarrow, this was my original idea but thought it was too difficult.

 

this looks perfect.

947740 Regular Member

947740

Posted
Posted 

<html>
<head>
<title>Title</title>
<script language='javascript' type='text/javascript'>
function addField() {
var textfields = document.getElementById("textfields");

textfields.innerHTML += "<input type='text' name='username[]' /><input type='text' name='email[]' /><br />";

}
</script>
</head>
<body>
<form name='theform' action='form.php' method='POST'>
<div id='textfields'>
<input type='text' name='username[]' /><input type='text' name='email[]' /><br />
<input type='text' name='username[]' /><input type='text' name='email[]' /><br />
<input type='text' name='username[]' /><input type='text' name='email[]' /><br />
<input type='text' name='username[]' /><input type='text' name='email[]' /><br />
</div>
<input type='submit' name='submit' value='Submit' />
</form>
<a href='javascript:addField()'>Add another user</a>

</body>
</html>

 

You may want to add Username: and Email: before the text fields, or above them.

 

If you want to see it in action, go here: http://www.iowatelecom.net/~scarruthers/formfields.html

 

I know jonsjava posted something, but I thought this was a lot simpler.  All this does is add fields, nothing else.

RichardRotterdam Member

RichardRotterdam

Posted
Posted

here is my add on to that. That previous script works except...

the values dissapear once a new element gets inject.

this one doesnt however it does use mootools

<script src="mootools-release-1.11.js" language='javascript' type='text/javascript'></script>
<script language='javascript' type='text/javascript'>
function addField() {
//get all input elements
var inputElements=$('textfields').getChildren();
//clone the first element username 
var userInput=inputElements[0].clone();
userInput.value="";//if it had a value make it empty

//clone the second element email
var emailInput=inputElements[1].clone();
emailInput.value="";//if it had a value make it empty

// get the last element
lastElement=$('textfields').getLast();	
//inject after the last element
userInput.injectAfter(lastElement);

// get the last element again
lastElement=$('textfields').getLast();

//inject after the last element
emailInput.injectAfter(lastElement);

//still needs a break in the end
var brElement=new Element('br');

// get the last element for the last time
lastElement=$('textfields').getLast();

//put a break in it
brElement.injectAfter(lastElement);

}
</script>
</head>
<body>
<form name='theform' action='form.php' method='POST' >
<div id='textfields'>
<input type='text' name='username[]' /><input type='text' name='email[]' /><br />

</div>
<input type='submit' name='submit' value='Submit' />
</form>
<a href='javascript:addField()'>Add another user</a>

</body>
</html>

RichardRotterdam Member

RichardRotterdam

Posted
Posted

my code does work i tested it did you include the mootools script?

<script src="mootools-release-1.11.js" language='javascript' type='text/javascript'></script>

 

otherwise download it

www.mootools.net

or get it from the include (rename to js)

 

[attachment deleted by admin]

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • 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.