Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ General Web Design _ Need Help with Form

Posted by: kanbun Sep 27 2011, 08:24 PM

I am trying to design a form that will list some items with 1 entry field for a name. What I want is to be able to make an entry in the empty field, submit the entry, and then have the page update with the entry replacing the blank entry field. So, for example: my page has a blank entry field for a name - I want to enter a name in this field - SMITH, and then submit the name, and have the new page show the name SMITH in place of the blank entry field for that item. That is to say, one entry, one time for each item. The page saves the entry and eliminates (replaces) the field where the name was entered with that name.

Here's what I have so far:

<p>
<link rel='STYLESHEET' type='text/css' href='Pingree_Football_Home_Food_List.php?sfm_get_ref_file=Pingree_Football_Home_Food_Liststyle.css'>
<script language='JavaScript' src='Pingree_Football_Home_Food_List.php?sfm_get_ref_file=genvalidator.js'>
</script>
<form name='Home_Food_List' method='GET' action='Home_Food_List.php' accept-charset='UTF-8'>
<input type='hidden' name='sfm_form_submitted' value='yes'>
</input>


<body bgcolor="yellow">

<table cellspacing='0' cellpadding='10' border='1' bordercolor='#000000' align="center" width="800">

<tr>
<td>


<table cellspacing='2' cellpadding='2' border='0' width="50%" align="left">
<tr>
<td colspan='2' align='center' class='form_heading'>
Home Food List
</td>
</tr>

<tr>
<td colspan='2' align=left class='form_txtblock'>
<b><font face="cursive" size="4">50 Burger Patties</b></font>
<br>Enter Your Name

</td>
</tr>

<tr>
<td>
</td>

<td class='element_label' align=left>
<input type='text' name='name' size='50'>
</td>
</tr>

<tr>
<td colspan='2' align=left>
<div id='Home_Food_List_Submit_errorloc' class='error_strings'></div>
<input type='submit' name='Submit' value='Submit'>
</td>
</tr>

<tr>
<td colspan='2'>
<hr size="2" color="black" width="100%">
</hr>
</td>

<tr>
<td colspan='2' class='form_txtblock' align=left>
<b><font face="cursive" size="4">50 Burger Patties</b></font>
<br>Enter Your Name

</td>
</tr>

<tr>
<td>
</td>
<td class='element_label' align=left>
<input type='text' name='name2' size='50'>
</td>
</tr>

<tr>
<td colspan='2' align=left>
<div id='Home_Food_List_Submit2_errorloc' class='error_strings'></div>
<input type='submit' name='Submit2' value='Submit'>
</td>
</tr>

<tr>
<td colspan='2'>
<hr size="2" color="black" width="100%">
</hr>
</td>
</table>


<table cellspacing='2' cellpadding='2' border='0' width="50%" align="right">
<tr>
<td colspan='2' align='center' class='form_heading'>
Home Food List
</td>
</tr>

<tr>
<td colspan='2' class='form_txtblock' align=left>
<b><font face="cursive" size="4">50 Burger Patties</b></font>
<br>Enter Your Name

</td>
</tr>

<tr>
<td>
</td>

<td class='element_label' align=left>
<input type='text' name='name' size='50'>
</td>
</tr>

<tr>
<td colspan='2' align=left>
<div id='Home_Food_List_Submit_errorloc' class='error_strings'></div>
<input type='submit' name='Submit' value='Submit'>
</td>
</tr>

<tr>
<td colspan='2'>
<hr size="2" color="black" width="100%">
</hr>
</td>

<tr>
<td colspan='2' class='form_txtblock' align=left>
<b><font face="cursive" size="4">50 Burger Patties</b></font>
<br>Enter Your Name

</td>
</tr>

<tr>
<td>
</td>
<td class='element_label' align=left>
<input type='text' name='name2' size='50'>
</td>
</tr>

<tr>
<td colspan='2' align=left>
<div id='Home_Food_List_Submit2_errorloc' class='error_strings'></div>
<input type='submit' name='Submit2' value='Submit'>
</td>
</tr>

<tr>
<td colspan='2'>
<hr size="2" color="black" width="100%">
</hr>
</td>

</td>
</tr>

</table>
</form>
</p>
</body>

Can somebody point me toward what I need to do?

Many, many thanks for any help.

Posted by: Darin McGrew Sep 28 2011, 01:11 AM

I'm still trying to understand what you're trying to do. If I understand correctly, you want a form like this:

Name: ________ [Submit]

When someone enters a name (e.g., "Smith") and submits the form, then a new form is returned like this:

Name: Smith
Rank: ________ [Submit]

When someone enters a rank (e.g., "Captain") and submits the form, then a new form is returned like this:

Name: Smith
Rank: Captain
Serial Number: ________ [Submit]

Do I understand correctly?

Posted by: kanbun Sep 28 2011, 05:57 AM

QUOTE(Darin McGrew @ Sep 28 2011, 02:11 AM) *

I'm still trying to understand what you're trying to do. If I understand correctly, you want a form like this:

Name: ________ [Submit]

When someone enters a name (e.g., "Smith") and submits the form, then a new form is returned like this:

Name: Smith
Rank: ________ [Submit]

When someone enters a rank (e.g., "Captain") and submits the form, then a new form is returned like this:

Name: Smith
Rank: Captain
Serial Number: ________ [Submit]

Do I understand correctly?


Yes, but don't need anything but the name.

Name: ________ [Submit]

When someone enters a name (e.g., "Smith") and submits the form, then a new form is returned like this:

Name: Smith
[Submit] ---- (This would be disabled - maybe grayed out - after Smith entered his name. Want just one entry to be saved and no others afterward.)

Thanks.

Posted by: Darin McGrew Sep 28 2011, 08:17 AM

Okay. Then you need to have the server-side program that processes the form data return a new form. Although, if you aren't going to have any input elements, and the submit button is going to be disabled, then it doesn't even need to be a form. It could be just a regular HTML page that displays the name that was entered into the form.

Posted by: kanbun Sep 28 2011, 08:23 AM

QUOTE(Darin McGrew @ Sep 28 2011, 09:17 AM) *

Okay. Then you need to have the server-side program that processes the form data return a new form. Although, if you aren't going to have any input elements, and the submit button is going to be disabled, then it doesn't even need to be a form. It could be just a regular HTML page that displays the name that was entered into the form.



Here's what I am trying to get: http://home.comcast.net/~kanbun/pages/pfsample2.html.

I am ignorant when it comes to server side stuff. That's what I was trying to create in the first place, but if it can be just plain HTML that would be great. Can you suggest code for that? Thanks.

Posted by: Brian Chandler Sep 28 2011, 09:45 AM

What is the purpose of a button marked "Submit" that does nothing? Does it help the user? What does it *mean*?

Perhaps it *means* "Thank you for your order for 50 Burger Patties, Mr Smith" ? If so wouldn't it make more sense to write "Thank you for your order for 50 Burger Patties, Mr Smith" ?

Anyway, you can't do this with "plain HTML". You have to have a (simple) program to output the reponse depending on what was submitted.

Posted by: kanbun Sep 28 2011, 09:50 AM

QUOTE(Brian Chandler @ Sep 28 2011, 10:45 AM) *

What is the purpose of a button marked "Submit" that does nothing? Does it help the user? What does it *mean*?

Perhaps it *means* "Thank you for your order for 50 Burger Patties, Mr Smith" ? If so wouldn't it make more sense to write "Thank you for your order for 50 Burger Patties, Mr Smith" ?

Anyway, you can't do this with "plain HTML". You have to have a (simple) program to output the reponse depending on what was submitted.



Thanks. What ends up in the text aside, I just don't know how to do this with HTML or side server. Just looking for some coding suggestions (simple program) to effect what I'm trying to do. That's all. If you can make a suggestion that would be great.

Posted by: Darin McGrew Sep 28 2011, 10:53 AM

This is a pretty basic function for any server-side program. What kind of server-side program can you run? CGI? PHP? ASP? something else?

Posted by: kanbun Sep 28 2011, 02:47 PM

QUOTE(Darin McGrew @ Sep 28 2011, 11:53 AM) *

This is a pretty basic function for any server-side program. What kind of server-side program can you run? CGI? PHP? ASP? something else?


Can run php or asp.

Posted by: Darin McGrew Sep 28 2011, 05:46 PM

Here's a simple PHP tutorial:
http://us3.php.net/manual/en/tutorial.php

The examples in the "Dealing with Forms" section show the basics of echoing form data back to the user.

Posted by: kanbun Sep 28 2011, 06:36 PM

QUOTE(Darin McGrew @ Sep 28 2011, 06:46 PM) *

Here's a simple PHP tutorial:
http://us3.php.net/manual/en/tutorial.php

The examples in the "Dealing with Forms" section show the basics of echoing form data back to the user.


Thanks. I've been reading php and asp tutorials (including this one) and I just cannot make any sense of it. The codes look straightforward enough, but none of what I've seen explains how to implement the file(s). For example, I cannot get the two files shown in this tutorial to display the proscribed output in my editor (I'm running WampServer on my laptop). And, the output is a new page, not a replacement on the original html form.

Update: I have two files (attached), one html, one php. Something isn't right. When I enter info in the html form, it returns an error = "Parse error: syntax error, unexpected '}', expecting ',' or ';' in /home1/mcbcorpn/public_html/Home_Food_List.php on line 10". I have no idea why -or- if the file would be functional if the error is corrected. Any suggestions?Attached File  pfsample2.html ( 2.08k ) Number of downloads: 390
Attached File  Home_Food_List.php ( 250bytes ) Number of downloads: 424

Posted by: Christian J Sep 28 2011, 07:25 PM

QUOTE(kanbun @ Sep 29 2011, 01:36 AM) *

And, the output is a new page, not a replacement on the original html form.

You can put the PHP script and HTML form in the same file, and submit the form page to itself with an empty ACTION attribute:

CODE
<form action="" ...>

Note that when such a page is first loaded the form has not yet been submitted. Use the PHP isset() function to check if the form was submitted or not (and print the result or the form fields accordingly using IF/ELSE clauses).

QUOTE
"Parse error: syntax error, unexpected '}', expecting ',' or ';' in /home1/mcbcorpn/public_html/Home_Food_List.php on line 10". I have no idea why -or- if the file would be functional if the error is corrected.


CODE
echo "<input type='text' name='name' size='50'>"

Line 9 lacks the ending semi-colon, making PHP confused about line 10.

BTW your HTML is very invalid, in both files. Also it's good practice to use PHP htmlspecialchars() or similar to sanitize the user input.

Posted by: kanbun Sep 28 2011, 07:32 PM

QUOTE(Christian J @ Sep 28 2011, 08:25 PM) *

QUOTE(kanbun @ Sep 29 2011, 01:36 AM) *

but none of what I've seen explains how to implement the file(s). For example, I cannot get the two files shown in this tutorial to display the proscribed output in my editor (I'm running WampServer on my laptop).

Not sure I followed that, but WampServer seems to be a way to run Apache and PHP, it's not an (HTML?) editor. So AFAIK you must still view the pages in your web browser (from http://localhost/ or similar).

I can (of course) view the html page in the editor, but the "submit" action returns nothing unless I upload the files to host and view the pages online - then I get the error message on input to the html form. Cannot get anything from 'localhost'.



QUOTE
And, the output is a new page, not a replacement on the original html form.

You can put the PHP script and HTML form in the same file, and submit the form page to itself with an empty ACTION attribute:

CODE
<form action="" ...>

Note that when such a page is first loaded the form has not yet been submitted. Use the PHP isset() function to check if the form was submitted or not (and print the result or the form fields accordingly using IF/ELSE clauses).


I do not understand how to put both in one file. Does the php part go first? In the body? Where? Regardless, I cannot get the form input to function using the code that I have (error above).



Posted by: Christian J Sep 28 2011, 07:35 PM

I edited my reply above since I didn't see your edit. tongue.gif

QUOTE(kanbun @ Sep 29 2011, 02:32 AM) *

I do not understand how to put both in one file. Does the php part go first? In the body? Where?

Put it where you want to print the output, which in this case means in BODY.

I'd generate both the form and the form result with PHP.

Posted by: kanbun Sep 28 2011, 08:25 PM

QUOTE(Christian J @ Sep 28 2011, 08:35 PM) *

I edited my reply above since I didn't see your edit. tongue.gif

QUOTE(kanbun @ Sep 29 2011, 02:32 AM) *

I do not understand how to put both in one file. Does the php part go first? In the body? Where?

Put it where you want to print the output, which in this case means in BODY.

I'd generate both the form and the form result with PHP.


Thanks. I would not know how to combine both the form and result in php. BTW, that html is "borrowed", shall we say. I took something and tried to make it "fit" what I was trying to do. I have a bit of experience with html/css, but have absolutely none with forms and beyond trial and error from php or asp tutorials, I haven't a friggin clue how to do this. I think I understand what's supposed to happen, but I just don't know how to implement the mechanics.

Posted by: Brian Chandler Sep 29 2011, 12:01 AM

QUOTE
Thanks. I would not know how to combine both the form and result in php. BTW, that html is "borrowed", shall we say. I took something and tried to make it "fit" what I was trying to do. I have a bit of experience with html/css, but have absolutely none with forms and beyond trial and error from php or asp tutorials, I haven't a friggin clue how to do this. I think I understand what's supposed to happen, but I just don't know how to implement the mechanics.


You can't learn basic programming by "trial and error". Either you go off and learn the basics: what programming is, how to write simple examples in PHP (for example), and so on, or you hire someone to write the code for you. Unfortunately, unless you have slightly better understanding of things, the latter option may be slower or more expensive, because it is hard for a programmer to understand what you really want to do.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)