Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    HTML Form Submit button to html_form_action

    Hi Guys,

    I am new at HTML Form, and I am struggling a lot with getting the submit button pressed and then taking all the entered data to a results page (html_form_action)

    Scenario:
    I am creating an inhouse web based program that can help the consultants with their daily tasks, this web based program will babsically hav drop down boxes where they can choose different tasks aswell s times and dates. when the press the submit button all of the information that they have entered should be sent to a seperate page and stored on a DB, so I can print the stats end of every month.

    Can someone please help me, I am really struggling with this...

    The current html_form_action code is:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="Generator" content="Serif WebPlus X5">
    <meta http-equiv='X-UA-Compatible' content='IE=EmulateIE8' ><title>html_form_action.asp</title>
    <style type="text/css">
    body {margin: 0px; padding: 0px;}
    </style>
    <script type="text/javascript" src="wpscripts/jspngfix.js"></script>
    <script type="text/javascript">
    var blankSrc = "wpscripts/blank.gif";
    </script>
    </head>
    
    <body text="#000000" style="background-color:#ffffff;background-image:url(wpimages/wpd4bfa01c_06.jpg);background-repeat:repeat;background-position:top center;background-attachment:scroll; text-align:center; height:850px;">
    <div style="background-color:transparent;text-align:left;margin-left:auto;margin-right:auto;position:relative;width:1250px;height:850px;">
    <img src="wpimages/wp9749e1fb_06.png" width="416" height="213" border="0" id="pic_6" alt="" onload="OnLoadPngFix()" style="position:absolute;left:0px;top:0px;">
    <map id="map0" name="map0">
        <area shape="rect" coords="11,29,52,46" href="index.html" alt="">
    </map>
    <img src="wpimages/wp32afde79_06.png" width="64" height="69" border="0" id="art_2" title="" alt="HOME" onload="OnLoadPngFix()" usemap="#map0" style="position:absolute;left:1px;top:781px;">
    <div id="frag_14" style="position:absolute;left:350px;top:228px;width:49px;height:75px; text-align:left;">
        <body>
        
        <tr>
    
    <th>User</th>
    
    <th>Requested By</th>
    
    <th>Type</th>
    
    <th>Start Time</th>
    
    <th>To Time</th>
    
    <th>From Date</th>
    
    <th>To Date</th>
    
    <th>Comments</th>
    
    </tr>
        <%
        Response.Write("User " & stats("txtUser") & "<br>")
        Response.Write("Requested By " & stats("txtRequested By") & "<br>")
        Response.Write("Type " & stats("txtType") & "<br>")
        Response.Write("Time " & stats("txtTime") & "<br>")
        Response.Write("To Time " & stats("txtTo Time") & "<br>")
        Response.Write("From Date " & stats("txtFrom Date") & "<br>")
        Response.Write("To Date " & stats("txtTo Date") & "<br>")
        Response.Write("Comments " & stats("Comments") & "<br>")
        %>
        </body>
        </html>
        
    </div>
    </div>
    </body>
    </html>
    that is all I have come up with so far as I am not very experienced..

    thank you in advance

    Torsian
    Last edited by VIPStephan; 07-09-2012 at 12:31 PM. Reason: added code BB tags

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,928
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    I see no form and no submit button but a lot of invalid HTML.

  • #3
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry about that

    Hahahaha sorry, I just gave the html for the html_form_action - told ya I am a real doofus here is the code for the stats form:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="Generator" content="Serif WebPlus X5">
    <meta http-equiv='X-UA-Compatible' content='IE=EmulateIE8' ><title>stats</title>
    <!--Page Head-->
    <title>jQuery UI Datepicker with days (or nights) between dates</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/black-tie/jquery-ui.css" media="screen" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script> 	
    
    <style type="text/css">body{ font: 60.0% "Trebuchet MS", sans-serif; margin: 50px;}</style>
    
    <script type="text/javascript">
    $(function() {
          $('#from').datepicker({
          		numberOfMonths: 2, 
          		firstDay: 1,
                dateFormat: 'DD dd-mm-yy', 
                minDate: '0', 
                maxDate: '+2Y',
                      onSelect: function(dateStr) {
                            var min = $(this).datepicker('getDate');
                            $('#to').datepicker('option', 'minDate', min || '0');
                            datepicked();
                }});
          $('#to').datepicker({
          		numberOfMonths: 2, 
          		firstDay: 1,
                dateFormat: 'DD dd-mm-yy', 
                minDate: '0', 
                maxDate: '+2Y',
                      onSelect: function(dateStr) {
                            var max = $(this).datepicker('getDate');
                            $('#from').datepicker('option', 'maxDate', max || '+2Y');
                            datepicked();                                                
                }});
    });
    		
    var datepicked = function() { 
    
    	var from = $('#from');
        var to = $('#to');
        var nights = $('#nights');
     
        	var fromDate = from.datepicker('getDate')
     
            var toDate = to.datepicker('getDate')
     
          		if (toDate && fromDate) {
          		var difference = 0;
                var oneDay = 1000*60*60*24; 
                var difference = Math.ceil((toDate.getTime() - fromDate.getTime()) / oneDay); 
                nights.val(difference);
    
                } 
    } 
    
    </script> 
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    
    <style type="text/css">
    <!--
    .pinkdate {
    	color: #FF0080;bold;
    }
    .white {
    	color: #FFF;bold;
    }
    .white {
    	color: #FFF;bold;
    }
    .white {
    	color: #FFF;bold;
    }
    body,td,th {
    	font-size: 17px;
    }
    -->
    </style>
    <script type="text/javascript">
    function validate_times( form )
    {
        if( ltrim(rtrim(form.elements['COMMENT'].value,' '),' ')=="" ) { alert("Please give your comment"); form.elements['COMMENT'].focus(); return false; }
        return true;
    }
    </script>
    <style type="text/css">
    body {margin: 0px; padding: 0px;}
    .Body-C
    {
        font-family:"Georgia", serif; color:#ffa50c; font-size:16.0px; line-height:1.13em;
    }
    .Body-C-C0
    {
        font-family:"Verdana", sans-serif; color:#ffffff; font-size:13.0px; line-height:1.23em;
    }
    .Normal-C
    {
        font-family:"Verdana", sans-serif; color:#ffffff; font-size:13.0px; line-height:1.23em;
    }
    </style>
    <script type="text/javascript" src="wpscripts/jspngfix.js"></script>
    <link rel="stylesheet" href="wpscripts/wpstyles.css" type="text/css">
    <script type="text/javascript">var blankSrc = "wpscripts/blank.gif";
    </script>
    </head>
    
    <body text="#000000" style="background-color:#000000;background-image:url(wpimages/wpd4bfa01c_06.jpg);background-repeat:repeat;background-position:top center;background-attachment:scroll; text-align:center; height:789px;">
    <img src="wpimages/wp49446090_06.png" width="385" height="455" border="0" id="pic_11" alt="" onload="OnLoadPngFix()" style="position:absolute;left:766px;top:0px;">
    <div id="Details" style="position:absolute;left:20px;top:211px;width:433px;height:220px; text-align:left;">
        
        <form action="process.php" method="post">
        
        <p>
        
        <span class="white"><strong>User</span>
        
        </p>
        
        <select name="agent">
            <option>MHLW009 - Lorinda Wilkinson</option>
            <option>MHGC000 - George Curtin</option>
            <option>MHZP000 - Zenobia Potgieter</option>
            <option>MHGP000 - Gerna du Plessis</option>
      </select>
        </p>
        <p>
        
        <span class="white"><strong>Requested By    </span>
          
        </p>
        
        <select name="requestedby">
              <option>Leona Makkink</option>
              <option>Users</option>
              <option>Other</option>
      </select>
        
      <p>
        <span class="white"><strong>Type      </span>:
            
        </p>
        <select name="jobdescription" size="1" id="Typeinput">
              <option>158dl</option>
              <option>032d1</option>
              <option>140d1</option>
              <option>517d1</option>
              <option>484d1</option>
              <option>sms197</option>
              <option>relation code</option>
              <option>system letters</option>
              <option>purge briewe</option>
              <option>Purge A-nr</option>
              <option>IT bb</option>
              <option>Purge BB</option>
              <option>Printer</option>
              <option>Outook</option>
              <option>Health & Safety</option>
              <option>Salary Code</option>
              <option>Limits</option>
              <option>Drukstukke doen</option>
              <option>Drukstukke nasien</option>
              <option>xml log</option>
              <option>ad hoc testing</option>
              <option>SCR report</option>
              <option>usr grp oudit</option>
              <option>usr xfer</option>
              <option>Bertus stats</option>
              <option>yorick stats</option>
              <option>meetings</option>
              <option>Nerve Centre</option>
              <option>Line count</option>
              <option>Other</option>
      </select>
        </p>
      <div id="txt_6" style="position:absolute;left:817px;top:769px;width:196px;height:20px;overflow:hidden;">
      <p class="Wp-Body-P"><span class="Body-C">Monday, July 9, 2012</span></p>
    </div>
    <div id="frag_1" style="position:absolute;left:597px;top:128px;width:197px;height:288px; text-align:left;">
        <script type='text/javascript'>
          var picker_ui;
          function raise_picker_ui(input, date_format) {
            /* Remove any old one */
            if(picker_ui && picker_ui.parentNode)
              picker_ui.parentNode.removeChild(picker_ui);
        
            /* Construct a new one */
            var year, month; /* Used below */
            var tr, td, a; /* Used below. */
        
            picker_ui = document.createElement("table");
            var thead = document.createElement("thead");
        
            function new_navigation_cell(caption, change) {
              td = document.createElement("td");
              a = document.createElement("a");
              a.href = "#";
              a.onclick = function() {
                month+=change;
                if(month < 0) {
                  year--;
                  month = 11;
                } else if(month > 11) {
                  year++;
                  month = 0;
                }
                show_month();
                return false;
              }
              a.appendChild(document.createTextNode( caption ));
              td.appendChild(a);
              return td;
            }
        
            /* Header row */
            tr = document.createElement("tr");
        
            tr.appendChild( new_navigation_cell("<", -1) );
        
            var month_th = document.createElement("th");
            month_th.colSpan = 5;
            month_th.style.textAlign = "center";
            month_th.appendChild( document.createTextNode( "Loading..." ) );
            tr.appendChild(month_th);
        
            tr.appendChild( new_navigation_cell(">", +1) );
        
            thead.appendChild(tr);
        
            /* Day row */
            var days = ["M", "T", "W", "T", "F", "S", "S"];
            tr = document.createElement("tr");
            for(var i in days) {
              td = document.createElement("td");
              td.appendChild( document.createTextNode( days[i] ) );
              tr.appendChild(td);
            }
            thead.appendChild(tr);
        
            picker_ui.appendChild(thead);
            
            /* On to the body */
            var tbody = document.createElement("tbody");
            picker_ui.appendChild(tbody);
        
            /* Javascript already has good date support */
            var now = new Date();
            month = now.getMonth();
            year = now.getFullYear();
        
            function pad_2(n) {
              n = "" + n;
              if(n.length<2) n = "0" + n;
              return n;
            }
            function formatted_date(year, month, day) {
              day = pad_2(day);
              month = pad_2(month + 1);
              if (date_format == "dd/mm/yyyy"){
                return [day, month, year].join("/");
              } else {
                return [year, month, day].join("-");
              }
            }
            function show_month() {
              while(tbody.firstChild)
                tbody.removeChild(tbody.firstChild);
        
              month_th.firstChild.data = pad_2(month + 1) + " " + year;
              
              var cursor = new Date(year, month, 1);
              var start_day = cursor.getDay();
              
              var monday = 1; /* 0 is Sunday for Date() */
        
              function new_date_row() {
                tr = document.createElement("tr");
                return tr;
              }
              function new_date_cell(day_of_month) {
                td = document.createElement("td");
                if(day_of_month) {
                  a = document.createElement("a");
                  a.href = "#";
                  a.onclick = function() {
                    input.value = formatted_date(year, month, day_of_month);
                    picker_ui.parentNode.removeChild(picker_ui);
                  }
                  a.appendChild(document.createTextNode( day_of_month ));
        
                  /* Change this to suit your style */
                  if(
                    year == now.getFullYear() &&
                    month == now.getMonth() &&
                    day_of_month == now.getDate()
                  ) td.style.background = "#ccc";
        
                  td.appendChild( a );
                } else {
                  td.appendChild(document.createTextNode("-"));
                }
                return td;
              }
        
              for(var i = monday; i % 7 != start_day; i++) {
                if(i % 7 == monday) tbody.appendChild( new_date_row() );
        
                tr.appendChild( new_date_cell() );
              }
              while(cursor.getMonth() == month) {
                if(cursor.getDay() == monday) tbody.appendChild( new_date_row() );
        
                tr.appendChild( new_date_cell( cursor.getDate() ) );
                
                /* Move on a day */
                cursor.setDate( cursor.getDate() + 1);
              }
            }
            show_month();
            
            /* Find out where the input is */
            var x=0;
            var y=0;
            for(var e = input; e.offsetParent; e = e.offsetParent) {
              x+=e.offsetLeft;
              y+=e.offsetTop;
            }
        
            picker_ui.style.position = "absolute";
            picker_ui.style.top = y + "px";
            picker_ui.style.left = x + "px";
        
            /* Change this to suit your style */
            picker_ui.style.background = "white";
            picker_ui.style.border = "1px solid #888";
        
            document.body.appendChild(picker_ui);
            return false;
          }
        </script>
    </div>
    <form id="times" name="Comments_1b" onsubmit="return validate_times(this)" action="" method="post" target="_self" enctype="application/x-www-form-urlencoded" style="margin:0px;">
    <div id="txt_37" style="position:absolute;left:480px;top:354px;width:58px;height:16px;overflow:hidden;">
    <p class="Wp-Body-P"><span class="Body-C-C0">To Date</span></p>
    </div>
    <div id="txt_33" style="position:absolute;left:481px;top:242px;width:75px;height:16px;overflow:hidden;">
    <p class="Wp-Body-P"><label for="combo_1"><span class="Body-C-C0">Start Time</span></label></p>
    </div>
    <select id="combo_1" name="time" size="1" style="position:absolute; left:578px; top:239px;">
        <option value="Blank">.</option>
        <option value="6:30am">6:30am</option>
        <option value="6:35am">6:35am</option>
        <option value="6:40am">6:40am</option>
        <option value="6:45am">6:45am</option>
        <option value="6:50am">6:50am</option>
        <option value="6:55am">6:55am</option>
        <option value="7:00am">7:00am</option>
        <option value="7:05am">7:05am</option>
        <option value="7:10am">7:10am</option>
        <option value="7:15am">7:15am</option>
        <option value="7:20am">7:20am</option>
        <option value="7:25am">7:25am</option>
        <option value="7:30am">7:30am</option>
        <option value="7:35am">7:35am</option>
        <option value="7:40am">7:40am</option>
        <option value="7:45am">7:45am</option>
        <option value="7:50am">7:50am</option>
        <option value="7:55am">7:55am</option>
        <option value="8:00am">8:00am</option>
        <option value="8:05am">8:05am</option>
        <option value="8:10am">8:10am</option>
        <option value="8:15am">8:15am</option>
        <option value="8:20am">8:20am</option>
        <option value="8:25am">8:25am</option>
        <option value="8:30am">8:30am</option>
        <option value="8:35am">8:35am</option>
        <option value="8:40am">8:40am</option>
        <option value="8:45am">8:45am</option>
        <option value="8:50am">8:50am</option>
        <option value="8:55am">8:55am</option>
        <option value="9.00am">9.00am</option>
        <option value="10.00am">10.00am</option>
        <option value="11.00am">11.00am</option>
        <option value="12.00am">12.00am</option>
        <option value="1.00pm">1.00pm</option>
        <option value="2.00pm">2.00pm</option>
        <option value="3.00pm">3.00pm</option>
        <option value="4.00pm">4.00pm</option>
        <option value="5.00pm">5.00pm</option>
    </select>
    <div id="txt_32" style="position:absolute;left:480px;top:321px;width:73px;height:16px;overflow:hidden;">
    <p class="Wp-Body-P"><label for="fromdate"><span class="Body-C-C0">From Date</span></label></p>
    </div>
    <input type="text" id="fromdate" name="my-date" value="" style="position:absolute; left:578px; top:315px; width:148px;" onfocus='return raise_picker_ui(this, "dd/mm/yyyy")'>
    <div id="txt_36" style="position:absolute;left:482px;top:285px;width:81px;height:17px;overflow:hidden;">
    <p class="Wp-Body-P"><label for="comments"><span class="Body-C-C0">End Time</span></label></p>
    </div>
    <textarea id="comments" rows="16" cols="30" name="COMMENT" style="position:absolute; left:580px; top:381px; width:260px; height:262px;"></textarea>
    <div id="txt_35" style="position:absolute;left:481px;top:425px;width:73px;height:16px;overflow:hidden;">
    <p class="Wp-Normal-P"><label for="reset"><span class="Normal-C">Comments</span></label></p>
    </div>
    <input type="reset" style="position:absolute; left:656px; top:662px; width:76px; height:22px;" id="reset" value="Reset">
    <input type="text" id="todate" name="my-date" value="" style="position:absolute; left:579px; top:348px; width:148px;" onfocus='return raise_picker_ui(this, "dd/mm/yyyy")'>
    <select id="combo_3" name="time" size="1" style="position:absolute; left:578px; top:280px;">
        <option value="Blank">.</option>
        <option value="6:30am">6:30am</option>
        <option value="6:35am">6:35am</option>
        <option value="6:40am">6:40am</option>
        <option value="6:45am">6:45am</option>
        <option value="6:50am">6:50am</option>
        <option value="6:55am">6:55am</option>
        <option value="7:00am">7:00am</option>
        <option value="7:05am">7:05am</option>
        <option value="7:10am">7:10am</option>
        <option value="7:15am">7:15am</option>
        <option value="7:20am">7:20am</option>
        <option value="7:25am">7:25am</option>
        <option value="7:30am">7:30am</option>
        <option value="7:35am">7:35am</option>
        <option value="7:40am">7:40am</option>
        <option value="7:45am">7:45am</option>
        <option value="7:50am">7:50am</option>
        <option value="7:55am">7:55am</option>
        <option value="8:00am">8:00am</option>
        <option value="8:05am">8:05am</option>
        <option value="8:10am">8:10am</option>
        <option value="8:15am">8:15am</option>
        <option value="8:20am">8:20am</option>
        <option value="8:25am">8:25am</option>
        <option value="8:30am">8:30am</option>
        <option value="8:35am">8:35am</option>
        <option value="8:40am">8:40am</option>
        <option value="8:45am">8:45am</option>
        <option value="8:50am">8:50am</option>
        <option value="8:55am">8:55am</option>
        <option value="9.00am">9.00am</option>
        <option value="10.00am">10.00am</option>
        <option value="11.00am">11.00am</option>
        <option value="12.00am">12.00am</option>
        <option value="1.00pm">1.00pm</option>
        <option value="2.00pm">2.00pm</option>
        <option value="3.00pm">3.00pm</option>
        <option value="4.00pm">4.00pm</option>
        <option value="5.00pm">5.00pm</option>
    </select>
    <div id="txt_38" style="position:absolute;left:659px;top:240px;width:46px;height:20px;overflow:hidden;">
    <p class="Wp-Body-P"><label for="starttime"><span class="Body-C-C0">Time</span></label></p>
    </div>
    <textarea id="starttime" rows="1" cols="14" name="Time" style="position:absolute; left:713px; top:239px; width:132px; height:22px;"></textarea>
    <div id="txt_39" style="position:absolute;left:659px;top:281px;width:54px;height:20px;overflow:hidden;">
    <p class="Wp-Body-P"><label for="totime"><span class="Body-C-C0">To Time</span></label></p>
    </div>
    <textarea id="totime" rows="1" cols="14" name="Time" style="position:absolute; left:714px; top:280px; width:132px; height:22px;"></textarea>
    </form>
    <img src="wpimages/wp9749e1fb_06.png" width="416" height="213" border="0" id="pic_6" alt="" onload="OnLoadPngFix()" style="position:absolute; left:70.8; top:0px;">
    <map id="map0" name="map0">
        <area shape="rect" coords="11,29,52,46" href="index.html" alt="">
    </map>
    <img src="wpimages/wp9294ba52_06.png" width="64" height="67" border="0" id="art_2" title="" alt="HOME" onload="OnLoadPngFix()" usemap="#map0" style="position:absolute;left:1px;top:722px;">
    <div id="txt_40" style="position:absolute;left:1013px;top:769px;width:87px;height:20px;overflow:hidden;">
    <p class="Wp-Body-P"><span class="Body-C">8:45 AM</span></p>
    </div>
    <form id="form_28" name="SDM" action="http://127.0.0.1/SDM/tables.php" accept-charset="UTF-8" method="get" target="_self" enctype="application/x-www-form-urlencoded" style="margin:0px;">
    </form>
    <div id="submit" style="position:absolute;left:186px;top:627px;width:192px;height:192px; text-align:left;">
        <form name="input" action="html_form_action.asp" method="get">
        <input type="submit" value="Submit" />
        </form> 
    </div>
    <script type="text/javascript" src="wpscripts/jsValidation.js"></script>
    </div>
    </body>
    </html>
    I think it is no secret that I am blond hahahahaha

    thanks again
    Last edited by VIPStephan; 07-09-2012 at 06:07 PM. Reason: added code BB tags

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,928
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    OK, first of all, if you post any code please put it in between [CODE][/CODE] tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.

    Now, to submit a form you need to tell it where to submit it. This is done with the action attribue which gets a path to a file with the processing script. In your code the action attribute is empty which is not allowed according to the HTML specs:
    Code:
    <form id="times" name="Comments_1b" onsubmit="return validate_times(this)" action="" method="post" target="_self" enctype="application/x-www-form-urlencoded" style="margin:0px;">
    So, if you want to load a separate page and display the info they entered you need to set up another document with the appropriate server side script (looks like you’re using ASP.NET) and put the path to that file into the action attribute.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •