HTML form do some action when hit submit button

Question

I would like to learn about HTML forms  For example  I have 2 input text fields for first name and last name and a submit button  When the submit button is clicked  I would like the webpage to display something like  Your Name is  First Name   Last Name     lt  DOCTYPE html gt   lt html gt      lt body gt         lt form gt           First name   lt input type  text  name  firstname    gt  lt br   gt           Last name   lt input type  text  name  lastname    gt  lt br   gt            lt input type  submit  value  Submit    gt         lt  form gt       lt  body gt   lt  html gt    What do I need to have here in order to have some  action  when I click that button   Edit  Ok now I figure out that I need either PHP or JavaScript here  Can some one suggest or provide a sample code of PHP or Js as a reference for me

User · Answer

index html   lt  DOCTYPE html gt   lt html gt      lt body gt          lt form action  submit php  method  POST  gt           First name   lt input type  text  name  firstname    gt  lt br   gt  lt br   gt           Last name   lt input type  text  name  lastname    gt  lt br   gt            lt input type  submit  value  Submit    gt         lt  form gt       lt  body gt   lt  html gt    After that one more file which page you want to display after pressing the  submit button  submit php   lt html gt     lt body gt       Your First Name is -   lt  php echo   POST  firstname      gt  lt br gt      Your Last Name is -    lt  php echo   POST  lastname      gt      lt  body gt   lt  html gt

User · Answer

Ok  I ll take a stab at this   If you want to work with PHP  you will need to install and configure both PHP and a webserver on your machine   This article might get you started  PHP Manual  Installation on Windows systems  Once you have your environment setup  you can start working with webforms  Directly From the article  Processing form data with PHP      For this example you will need to create two pages  On the first page   we will create a simple HTML form to collect some data  Here is an   example    lt html gt      lt head gt    lt title gt Test Page lt  title gt   lt  head gt      lt body gt          lt h2 gt Data Collection lt  h2 gt  lt p gt       lt form action  process php  method  post  gt             lt table gt               lt tr gt                   lt td gt Name  lt  td gt                   lt td gt  lt input type  text  name  Name   gt  lt  td gt               lt  tr gt                  lt tr gt                   lt td gt Age  lt  td gt                   lt td gt  lt input type  text  name  Age   gt  lt  td gt               lt  tr gt                  lt tr gt                   lt td colspan  2  align  center  gt                   lt input type  submit   gt                   lt  td gt               lt  tr gt           lt  table gt       lt  form gt   lt  body gt   lt  html gt        This page will   send the Name and Age data to the page process php   Now lets create process php to use    the data from the HTML form we made       lt  php        print  Your name is     Name         print   lt br   gt           print  You are     Age     years old          print   lt br   gt       old   25    Age      print  In 25 years you will be      old     years old        gt       As you   may be aware  if you leave out the method  post  part of the form  the   URL with show the data  For example if your name is Bill Jones and you   are 35 years old  our process php page will display as   http   yoursite com process php Name Bill Jones amp Age 35 If you want    you can manually change the URL in this way and the output will change   accordingly    Additional JavaScript Example  This single file example takes the html from your question and ties the onSubmit event of the form to a JavaScript function that pulls the values of the 2 textboxes and displays them in an alert box     Note  document getElementById  fname   value gets the object with the ID tag that equals fname and then pulls it s value - which in this case is the text in the First Name textbox      lt html gt       lt head gt        lt script type  text javascript  gt       function ExampleJS            var jFirst   document getElementById  fname   value          var jLast   document getElementById  lname   value          alert  Your name is      jFirst         jLast                lt  script gt        lt  head gt       lt body gt           lt FORM NAME  myform  onSubmit  JavaScript ExampleJS    gt                First name   lt input type  text  id  fname  name  firstname    gt  lt br   gt               Last name    lt input type  text  id  lname  name  lastname    gt  lt br   gt               lt input name  Submit   type  submit  value  Update    gt           lt  FORM gt       lt  body gt   lt  html gt

[html] HTML form do some "action" when hit submit button

Examples related to html

Examples related to form-submit