Forum Moderators: coopster

Message Too Old, No Replies

multiple forms on same webpage

multiple forms same webpage

         

marisha

8:27 pm on Oct 4, 2010 (gmt 0)

10+ Year Member



Hello All,

I am designing a webpage that has two forms in it. The first form is visible by default. When the user clicks the submit button the other form appears. I am not able to get any varvale value that has been grenerated as a result of the submission of second form. I am attaching me code

I am not getting any value for the follwing variables when I click the button of the second form.

<html>
<head></head>
<body>
<div id= "tableSelection" >
<form name = "form1" method="post" >
Select the operation you want to perform <br />
<select name="actionToPerform">
<option value= "1" >Enter Recycling Information for Bottles and Cans</option>
</select><br /><br/><br/>
<input type="submit" value="submitMainPage" name="submit">
<input type="hidden" name="form1" value="1"/>
<form>
</div>
<div id="getRowDetails" style="display:none">
<form name = "form2" method="post">
Select The Month :<br />
<select name="Month">
<option value= "1" >January</option>
<option value= "2" >February</option>
<option value= "3" >March</option>
<option value= "4" >April</option>
<option value= "5" >May</option>
<option value= "6" >June</option>
<option value= "7" >July</option>
<option value= "8" >August</option>
<option value= "9" >September</option>
<option value= "10" >October</option>
<option value= "11" >November</option>
<option value= "12" >December</option>
</select><br /><br/><br/>
Select The Year : <br />
<select name="Year">
<option value= "1" >2010</option>
<option value= "2" >2011</option>
<option value= "3" >2012</option>
<option value= "4" >2013</option>
<option value= "5" >2014</option>
<option value= "6" >2015</option>
<option value= "7" >2016</option>
<option value= "8" >2017</option>
<option value= "9" >2018</option>
<option value= "10" >2019</option>
<option value= "11" >2020</option>
<option value= "12" >2021</option>
</select><br /><br/><br/>
Select The Number of records you want to Enter:<br />
<select name="noOfRecords">
<option value= "1" >1</option>
<option value= "2" >2</option>
<option value= "3" >3</option>
<option value= "4" >4</option>
<option value= "5" >5</option>
<option value= "6" >6</option>
<option value= "7" >7</option>
<option value= "8" >8</option>
<option value= "9" >9</option>
<option value= "10" >10</option>
<option value= "11" >11</option>
<option value= "12" >12</option>
</select><br /><br/><br/>
<input type="submit" value="submitUpperLevelData" name="submitDetails">
<input type="hidden" name="form2" value="1"/>
</div>
</form>
<?php
if (array_key_exists('form1', $_POST))
{
$actionToPerform = $_POST["actionToPerform"];
?>
<script language="javascript">
document.getElementById("getRowDetails").style.display = "block";
</script>
<?php
}
else if(array_key_exists('form2', $_POST))
{
$Year = $_POST["$Year"];
$Month = $_POST["$Month"];
$noOfRecords = $_POST["$noOfRecords"];
echo $_POST['noOfRecords'];
echo $_POST['Year'];
echo $_POST['Month'];
echo $_POST['actionToPerform'];
}
?>
</body>

Anyango

8:35 pm on Oct 4, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



did you try print_r($_POST) to see if any values are transfered on your second form submit?

marisha

9:00 pm on Oct 4, 2010 (gmt 0)

10+ Year Member



<?php
if (array_key_exists('form1', $_POST))
{
$actionToPerform = $_POST["actionToPerform"];
print_r($_POST);
This is the output here
Array ( [actionToPerform] => 1 [submit] => submitMainPage [form1] => 1 [Month] => 1 [Year] => 1 [noOfRecords] => 1 [form2] => 1 )

?>
<script language="javascript">
document.getElementById("getRowDetails").style.display = "block";
</script>
<?php
}
else if(array_key_exists('form2', $_POST))
{

print_r($_POST);
I AM NOT GETTING ANY OUTPUT HERE
}
?>
</body>

If I am removing the else condition and just using
if(array_key_exists('form2', $_POST))
I am getting the output for this POST when it gets loaded. It does not wait for the click event of the button
Array ( [actionToPerform] => 1 [form1] => 1 [Month] => 1 [Year] => 1 [noOfRecords] => 1 [submitDetails] => submitUpperLevelData [form2] => 1 ) Array ( [actionToPerform] => 1 [form1] => 1 [Month] => 1 [Year] => 1 [noOfRecords] => 1 [submitDetails] => submitUpperLevelData [form2] => 1 )

enigma1

12:38 pm on Oct 5, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You cannot nest forms the first form needs to be closed before starting the second although I think you have a typo in this case, check this code:


</select><br /><br/><br/>
<input type="submit" value="submitMainPage" name="submit">
<input type="hidden" name="form1" value="1"/>
<form> // Wrong I think, close the form instead use </form>
</div>
<div id="getRowDetails" style="display:none">
<form name = "form2" method="post">

Anyango

1:55 pm on Oct 5, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Enigma is right, need to close the first form first

Matthew1980

2:20 pm on Oct 5, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi all,

You can have as many submit buttons as you want, it's just a case of making sure that the div switcher you use has the correct submit button associated to it, I use a very similar method for my uploader script, and it works nicely enough. You just need to make sure that the values of the elements are different, purely so that you can distinguish one form from the next...

Cheers,
MRb

marisha

3:28 pm on Oct 5, 2010 (gmt 0)

10+ Year Member



Yes I definitely have made a typing mistake. I am sure that is the reason why I was getting everything in my POST array the moment I clicked my first button. I definitely will correct that error and let everyone know the result.

I am a new coder in Php. My prior experience has been in .Net. Can you suggest me some online resources where I can find tutorials on form design.

I really appreciate your replies. Thank you

rocknbil

3:59 pm on Oct 5, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



What you need to do is *something* like this, all in one form. You won't be able to collect data from two forms without Javascript, which will cause issues for Javascript-disabled clients.

<form....>
<div id="visible-first">
<!-- your visible stuff here -->
<p id="next-paragraph"><input type="button" onclick="open_other_div();" value="Next"></p>
</div>
<div id="visible-next">
<!-- your hidden stuff here -->
<p><input type="submit" value="Submit"></p>
</div>
</form>

The reasoning and notes:

- Putting it all in one form will simplify your programming tasks.

- An input type of button has no inherent action and requires Javascript to do anything. Set the CSS of next-paragraph to display: none and on load, use JS to make it visible so it will be visible to Javascript enabled browsers, and invisible to non-Javascript browsers, making your form accessible to all.

- Inversely, set the CSS for hidden-next to display:block and on load of the page set it to display:none. If JS is disabled, it will be visible, but for JS enabled clients, it will be hidden as you've planned. Then when the first button is clicked, open hidden-next and hide next-paragraph (display:none) so it's not confusing as to which button to click.

- The Javascript functions for this are just examples and need to be written, for example only.

marisha

3:44 pm on Oct 8, 2010 (gmt 0)

10+ Year Member



Hello,

I fixed that problem of forms now I have two forms and events are being handled properly.
I have a functionality to implement I am not sure how
Logic goes this way
1) User Selects the Table or Data that he wants to update e.g Data for Recycling Bottles and Cans(He clicks submit button)
2) My Form 2 becomes visible in which he selects the MONTH , YEAR and no of RECORDS he has to enter(He clicks submit button)
3) I am dynamically generating a table structure that contains the fields he has to enter like if he selects 4 RECORDS to be entered 4 Rows appear.(I have <select> as one of the fields that I am generating from the data form the database)

Now I have to find a way in which when the clicks the button after submitting all this data I have to insert it in Database(more than one rows through iteration

I am attaching my code and snapshot of the form.

Please suggest me a good php Dataentry Form tutorial

Thanks

<html>
<head></head>
<body>
<div id= "tableSelection" >
<form name = "form1" method="post" >
Select the operation you want to perform <br />
<select name="actionToPerform">
<option value= "1" >Enter Recycling Information for Bottles and Cans</option>
</select><br /><br/><br/>
<input type="submit" value="submitMainPage" name="submit">
<input type="hidden" name="form1" value="1"/>
</form>
</div>
<div id="getRowDetails" style="display:none">
<form name = "form2" method="post">
Select The Month :<br />
<select name="Month">
<option value= "1" >January</option>
<option value= "2" >February</option>
<option value= "3" >March</option>
<option value= "4" >April</option>
<option value= "5" >May</option>
<option value= "6" >June</option>
<option value= "7" >July</option>
<option value= "8" >August</option>
<option value= "9" >September</option>
<option value= "10" >October</option>
<option value= "11" >November</option>
<option value= "12" >December</option>
</select><br /><br/><br/>
Select The Year : <br />
<select name="Year">
<option value= "1" >2010</option>
<option value= "2" >2011</option>
<option value= "3" >2012</option>
<option value= "4" >2013</option>
<option value= "5" >2014</option>
<option value= "6" >2015</option>
<option value= "7" >2016</option>
<option value= "8" >2017</option>
<option value= "9" >2018</option>
<option value= "10" >2019</option>
<option value= "11" >2020</option>
<option value= "12" >2021</option>
</select><br /><br/><br/>
Select The Number of records you want to Enter:<br />
<select name="noOfRecords">
<option value= "1" >1</option>
<option value= "2" >2</option>
<option value= "3" >3</option>
<option value= "4" >4</option>
<option value= "5" >5</option>
<option value= "6" >6</option>
<option value= "7" >7</option>
<option value= "8" >8</option>
<option value= "9" >9</option>
<option value= "10" >10</option>
<option value= "11" >11</option>
<option value= "12" >12</option>
</select><br /><br/><br/>
<input type="submit" value="submitUpperLevelData" name="submitDetails">
<input type="hidden" name="form2" value="1"/>
</form>
</div>
<div id="submitAggregateData" style="display:none">
<form name = "form3" method="post">
<input type='submit' value='submitAgrregateData' name='submitDetails'>";
</form>
</div>

<?php
if (array_key_exists('form1', $_POST))
{
$actionToPerform = $_POST["actionToPerform"];
?>
<script language="javascript">
document.getElementById("getRowDetails").style.display = "block";
</script>
<?php
}
if(array_key_exists('form2', $_POST))
{
$NoOfRec = $_POST["noOfRecords"];
?>
<script language="javascript">
document.getElementById("getRowDetails").style.display = "block";
</script>
<?php
$db="sustain";
$host = "example.edu";
$username = "username";
$password = "password";
$link = mysql_connect('deleted', 'deleted', 'deleted');
if (! $link) die(mysql_error());
mysql_select_db($db , $link) or die("Couldn't open $db: ".mysql_error());
$resultBusinessConnections = mysql_query("select ID,Name from Business_Connections;");
$VendorNameArray = array();
while($nt=mysql_fetch_array($resultBusinessConnections))
{

$VendorNameArray[$nt[ID]] = $nt[Name];
}
echo "</br>";
echo "<table>";
echo"<tr>";
echo"<td>Vendor</td>";
echo"<td>Date</td>";
echo"<td>Net Weight</td>";
echo"</tr>";
for($i=1;$i<=$NoOfRec;$i++)
{
echo "<tr>";
echo"<td>";
echo "<select name = '$i'.'s'>";
foreach($VendorNameArray as $ID => $Name)
{
echo "<option value = '$ID'>$Name</option>";
}
echo "</select>";
echo"</td>";
echo"<td>";
echo "<input type='text' name = '$i'.'d'>";
echo"</td>";
echo"<td>";
echo "<input type='text' name = '$i'.w>";
echo"</td>";
echo "</tr>";
}
echo "<input type='submit' value='submitAgrregateData' name='submitDetails'>";

echo "</table>";
}
?>
</body>

[edited by: coopster at 11:12 am (utc) on Oct 11, 2010]
[edit reason] user/password details changed [/edit]

marisha

6:20 am on Oct 9, 2010 (gmt 0)

10+ Year Member



Hi All,
Now I know what exactly I want. I want a functionality similar to .Net DataGrid View....

Can anyone help me

paperso

6:23 am on Oct 10, 2010 (gmt 0)

10+ Year Member



@ marisha!

If you're refering to grid view, correct me if im wrong (i dont know .net), check this out:

Eyesis Data Grid Control (PHP)

It displays data on your mysql database and you can sort it out.

eyesis [dot] ca/demos/eyedatagrid/ex5.php