need help with dynamic form

doforumda · February 18, 2010

hi

i create a form using jquery. i actually found jquery code from other website and modified it according to my needs. i need help in how can i get data in side all these fields to php file. on php side i am just echoing this data.

html form

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {

            $('#btnAdd').click(function() {

                var num     = $('.clonedInput').length;

                var newNum  = new Number(num + 1);

                var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
     	 
                newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
                $('#input' + num).after(newElem);
            });

        });
    </script>
    <style>
#myForm div {
font-size:14px;
margin-bottom: 10px;
clear: left;
}
#myForm label {
width: 125px;
display: block;
font-size:14px;
font-weight: bold;
color: #999;
float: left;
}
#btnAdd {
margin-left:130px;
}
</style>

</head>

<body>

<form id="myForm" method="post" action="process.php">
<div>
    <label>Firstname: </label><input type="text" name="fname" id="fname"><br>
    </div>
    <div>
    <label>lastname: </label><input type="text" name="lname" id="lname"><br>
    </div>
    <div id="input1" class="clonedInput">
      <label>IM Screen Names:</label>
        <input type="text" name="name1" id="name1" />
        <select name="screenname1" id="screenname1">
          <option value="AIM" selected="selected">AIM</option>
          <option value="gtalk">Google Talk</option>
          <option value="skype">Skype</option>
          <option value="windows live">Windows Live</option>
          <option value="yahoo">Yahoo</option>
        </select><br />
    </div>

    <div>
    	<a href="#" id="btnAdd">Add another</a>
    </div>
    <input type="submit" name="submit" value="Submit">
</form>

</body>
</html>

process.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<?php
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$name1 = $_POST['name1'];
$screenname1 = $_POST['screenname1'];

echo $fname."<br>";
echo $lname."<br>";
echo $name1."<br>";
echo $screenname1."<br>";

?>
</body>
</html>

sader · February 18, 2010

well u can go through all $_POST array like so

foreach($_POST as $key=>$value)

{

echo $key."=".$value."<br>";

}

doforumda · February 18, 2010

still not working.

when i click on link "add another" it adds another fields but when i fill them and press submit button only the last input and select fields values appear.

sader · February 18, 2010

Oh so it looks u have arrays of field with the same name.

To handle this u must do like so

With jquery create fields named "name=fname[]" [] is keypoint here

then in php $_POST['fname'] will become array so

for($i=0; $i<count($_POST['fname']); $i++)
{
echo $_POST['fname'][$i]."<br>";
}

doforumda · February 18, 2010

thanks for your help but if you look at my html form you find out that i am not making firstname and lastname as dynamic fields which are added through jquery. i am only creating "IM Screen Name" dynamically via jquery and it contains one text field and one select menu. so firstname and lastname has no problem while posting the problem is with those which are creating dynamically.

so how can that be accessed on php side?

teamatomic · February 18, 2010

A workaround is this

I have changed it so that your names are now an array. Do with it as you wish.

HTH

Teamatomic

doforumda · February 18, 2010

thanks it is working

now how can i display it. i used two for loops is fine or is there a better way to do this

$fname = $_POST['fname'];
$lname = $_POST['lname'];
$name = $_POST['name'];
$screenname = $_POST['screenname'];
echo $fname."<br>";
echo $lname."<br>";

for($i=0; $i<count($_POST['name']); $i++)
{
echo $_POST['name'][$i]."<br>";
}

for($i=0; $i<count($_POST['screenname']); $i++)
{
echo $_POST['screenname'][$i]."<br>";
}

doforumda · February 18, 2010

A workaround is this

<input type="text" name="name[]" id="name1" />

<select name="screenname[]" id="screenname1">

I have changed it so that your names are now an array. Do with it as you wish.

HTH

Teamatomic

i want to display it this way

name: screenname

teamatomic · February 18, 2010

foreach($screenname as $name)

{

echo "ScreenName:$name<br>";

}

HTH

Teamatomic

doforumda · February 18, 2010

that works thanks

now when logged user wants to edit his info and when he clicks edit he will be taken to this site. lets say he already has some data in db so when he gets to this form he should see that db data in this form so if he wants to edit or remove any data he will be able to do so.

i tried this with the code below. let me provide my db table

imid userid username im

1 48 alex gtalk

2 48 alex4 skype

here one user has two data. but the problem is when he comes to this form he sees this data in this way

IM Screen Name: alex(this is text field of the form and he sees his username in it) gtalk (this is select menu in which he see)

IM Screen Name: alex4(this is text field of the form and he sees his username in it) skype (this is select menu in which he see)

as there is only two data of this user so it should appear only two. how can we do this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#btnAdd').click(function() {
                var num     = $('.clonedInput').length;
                var newNum  = new Number(num + 1);
                var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
                newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
                $('#input' + num).after(newElem);
            });

        });
    </script>
    <style>
#myForm div {
font-size:14px;
margin-bottom: 10px;
clear: left;
}
#myForm label {
width: 125px;
display: block;
font-size:14px;
font-weight: bold;
color: #999;
float: left;
}
#btnAdd {
margin-left:130px;
}
</style>

</head>

<body>
<form id="myForm" method="post" action="process.php">
<div>
    <label>First Name: </label><input type="text" name="fname" id="fname"><br>
    </div>
    <div>
    <label>Last Name: </label><input type="text" name="lname" id="lname"><br>
    </div>
    <?php
$connect = mysql_connect("localhost","user","pass");
mysql_select_db("db");
$get_im = mysql_query("SELECT * FROM contactim WHERE userid='$_SESSION[userid]'");
$count = mysql_num_rows($get_im);
while($get_contactim = mysql_fetch_assoc($get_im)) {
	$userim_db = $get_contactim['username'];
	$im_db = $get_contactim['im'];
	//echo $userim_db."<br>";

	for($i = 1; $i <= $count; $i++) {
?>
    <div id="input1" class="clonedInput">
      <label>IM Screen Names:</label>
        <input type="text" name="name[]" id="name1" value="<?php if($userim_db == "") { echo ""; } else { echo $userim_db; } ?>" />
        <select name="screenname[]" id="screenname1">
          <option value="AIM" <?php if($im_db == "AIM") { echo "SELECTED"; } ?>>AIM</option>
          <option value="gtalk" <?php if($im_db == "gtalk") { echo "SELECTED"; } ?>>Google Talk</option>
          <option value="skype" <?php if($im_db == "skype") { echo "SELECTED"; } ?>>Skype</option>
          <option value="windows" <?php if($im_db == "windows") { echo "SELECTED"; } ?>>Windows Live</option>
          <option value="yahoo" <?php if($im_db == "yahoo") { echo "SELECTED"; } ?>>Yahoo</option>
        </select><br />
        <?php
	}
}
	?>
    </div>

    <div>
    	<a href="#" id="btnAdd">Add another</a>
    </div>
    <input type="submit" name="submit" value="Submit">
</form>

</body>
</html>

teamatomic · February 18, 2010

Before you want to do any type of anything based on users you need to fix your database.

imid userid username im

1 48 alex gtalk

2 48 alex4 skype

You have as an example here two different usernames with the same userid. Thats going to cause you problems and before you even try to code you should fix it. I dont mean manually fix it in the DB but in your registration code or where ever/however its created so userid is unique to each user.

HTH

Teamtomic

doforumda · February 18, 2010

Before you want to do any type of anything based on users you need to fix your database.

imid userid username im

1 48 alex gtalk

2 48 alex4 skype

You have as an example here two different usernames with the same userid. Thats going to cause you problems and before you even try to code you should fix it. I dont mean manually fix it in the DB but in your registration code or where ever/however its created so userid is unique to each user.

HTH

Teamtomic

it is not creating any problem db design is fine these usernames are from gtalk and skype not from my own users table. this user id has only one username which is stored in users table. this one here is only for his contact details he might have different usernames in different messangers so he can give all of them here.

teamatomic · February 18, 2010

Because you use a while with a for that loops with the count so if the count is two it is going to display twice, good thing you dont have a gazillion users in there.

HTH

Teamatomic

Sign In

need help with dynamic form

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information