Solved

Form Submission to an Include

Posted on 2014-12-31
10
48 Views
Last Modified: 2015-02-16
I have a header as in include in my site and it has a "Request Free Trial" form.  Because I want to have that form visible on all pages I want it in the header include.  Normally my forms submit to the same asp page that the form is on.  Can I have this form submit to header.asp even though it is an include on many pages?
0
Comment
Question by:Bob Schneider
  • 5
  • 3
  • 2
10 Comments
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 356 total points
ID: 40525986
When the include file renders, it is as if the html is a complete and not separated.  However, the processing of any asp code is separated and you would want to do the processing in your main page where you normally do.
0
 
LVL 32

Assisted Solution

by:Big Monty
Big Monty earned 144 total points
ID: 40526040
If your processing code is in header.asp then yes you can submit the form to header.asp. You would need some kind If statement to handle the processing but yes you could do it that way.

A better way would be just to put the processing code in its own page and submit the form there, that way you would not have to worry about divvying up the form and the processing code on the same page
0
 

Author Comment

by:Bob Schneider
ID: 40528095
For clarification, what is the best way to process a form in an include on whatever page the include is on?  They want the form to be omnipresent regardless of landing page.  So let's say the include is on default.asp, contact.asp, and about.asp.  How would I best submit the form from any one of those pages and have it re-open the same page?
0
 
LVL 32

Assisted Solution

by:Big Monty
Big Monty earned 144 total points
ID: 40528122
i would put the processing code of the form into its own page, and then use Request.ServerVariables("http_referer") to get where the form came from to redirect them there

processingPage.asp
'-- form processing code

'-- when you are ready to redirect the user back to the page they came from
sPreviousURL = Request.ServerVariables("HTTP_REFERER")
Response.Redirect sPreviousURL

Open in new window

0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 356 total points
ID: 40528244
I would make your form the include file so you can stick it in whatever page you want.  Set up your processing page as a stand alone asp/vb page.  To process the input, use ajax for something like this.   Then you can use a modal to visually pop up success or missing info.  

At this point, below is about a standard template I would use for everything.  Write as little code on the page as possible and reuse what you can.

<!DOCTYPE html>
<!--#include virtual="/common_files/common_asp_scripts.asp"-->
<%
' this page only asp code
    pagegroup="abc123"
    pagename = "something"
  ' sql = select page_content, page_meta_data from MyCMSTable WHERE Page = pagename
%>
<html>
<!--#include virtual="/common_files/common_css_files.asp"-->
<link href="/css/this_page_only_css" rel="stylesheet" type="text/css" />
<!--#include virtual="/common_files/common_js_files.asp"-->
<script src="/js/this_page_only_js.js"></script>
<script src="/js/this_page_only_2_js.js"></script>
<script>
$(function(){
   // jquery scripts for this page
   // ajax code for common forms
});
</script>
<head>
  <meta charset="utf-8">
  <title><%=page_name%></title>
</head>
<body>
<!--#include virtual="/common_files/common_html_header.asp"-->
<div id="container>
   <div id="main">
          <%=rs("main_page_content")%>
   </div>
   <div id="sidebar">
   <%=rs("side_bar_content")%>
<!--#include virtual="/common_files/common_html_sidebar_group_one.asp"-->
  </div>
</div>
<!--#include virtual="/common_files/common_html_footer.asp"-->
</body>
</html>

Open in new window

0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 

Author Comment

by:Bob Schneider
ID: 40529306
This is where I need to be going.  Still not completely clear on the actual process but I am going to just leave it on the home page for now and then revisit this later.  I want to get the rest of the site up first and then work through this.  I am going to grade and close and then re-post.  I assume that is better than letting the post go dormant?
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 356 total points
ID: 40529539
It is very simple.   Using this example http://getbootstrap.com/examples/jumbotron/ you start with code
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    

    <title>Jumbotron Template for Bootstrap</title>
    <link rel="icon" href="../../favicon.ico">

    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="jumbotron.css" rel="stylesheet">

    
    

   
  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <form class="navbar-form navbar-right">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">Sign in</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </nav>

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
      </div>
    </div>

    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
       </div>
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
      </div>

      <hr>

      <footer>
        <p>&copy; Company 2014</p>
      </footer>
    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
</script>
  </body>
</html>

Open in new window

I would break out as follows
common css
 <link rel="icon" href="../../favicon.ico">
 <!-- Bootstrap core CSS -->
 <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

Open in new window

Common js
 <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>

Open in new window


common navigation
 <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <form class="navbar-form navbar-right">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">Sign in</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </nav>

Open in new window

common footer
 <footer>
        <p>&copy; Company 2014</p>
      </footer>

Open in new window

Now the home page would look like this
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    

    <title>Jumbotron Template for Bootstrap</title>

  <!--#include virtual="/common_files/common_css.asp"-->   
   <!-- *** css for this page only *** -->
 <link href="jumbotron.css" rel="stylesheet">

    
  </head>

  <body>
  <!--#include virtual="/common_files/common_navigation.asp"-->  
   

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
      </div>
    </div>

    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
       </div>
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
      </div>

      <hr>

       <!--#include virtual="/common_files/common_footer.asp"-->
    </div> <!-- /container -->


   <!--#include virtual="/common_files/common_javascript.asp"-->

  </body>
</html>

Open in new window

If you are pulling the home page and jumbotron content from your database, it may look more like below using the include files we created just above.  Try it with static html first, then you can add asp code in both the main content area and the include file.  
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>

<%
  ' add any asp for page processing like request.form, request.querystring'

  ' create recordsset (rs) for main content   

  ' create recordset (rs_jumbotron) for jumbotron


%>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="<%=rs("page_meta")%>">
    <meta name="author" content="">
    

    <title><%=rs("page_title")%></title>

  <!--#include virtual="/common_files/common_css.asp"-->   
   <!-- *** css for this page only *** -->
 <link href="jumbotron.css" rel="stylesheet">

    
  </head>

  <body>
  <!--#include virtual="/common_files/common_navigation.asp"-->  
   

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
        <%
        do until rs_jumbotron.eof
          rs_jumbotron("jumbotron_heading")
          rs_jumbotron("jumbotron_conteint")
        rs_jumbotron.movenext
        loop
         %>
      </div>
    </div>

    <div class="container">
      <!-- Example row of columns -->
       <%=rs("MainContent") %>

      <hr>

       <!--#include virtual="/common_files/common_footer.asp"-->
    </div> <!-- /container -->


   <!--#include virtual="/common_files/common_javascript.asp"-->

  </body>
</html>

Open in new window

The gotcha to keep in mind with include files is they (the include files) will process first before the script on the page .  This means you can pass variables from the include file to the page, but you can't pass variables from the page to the include file.  

This means you can put things like log in information in your include file.

This is basically how wordpress, joomla and the like work.   You can also add separate recordsets for things like navigation.  Then include the nav in every page.  If you are doing this in dreamweaver and automatically creating your recordsets, dreamweaver will want to place the connection file in the include file.  Make sure you take it out and only include your connection string once on the page above where you add other recordsets and below where you test for log in if that is used.
<%
' add recordset for navigation ("rsNav") here
%>
<ul id="nav">
<%
	do until rsNav.eof
		' check to see what the current page is
		' if the current nav item matches the page name 
		' then add the css class "current_page" to change the color of the nav item
		nav_class=""
		if pageName = rsNav("page_name") then
			nav_class = "current_page"
		end if
		response.write "<li class='"&nav_class&"''><a href='"&rsNav("page_id")&"'>"&rsNav("page_name")&"</li>"

	rsNav.movenext
	loop
%>
</ul>

Open in new window

0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 356 total points
ID: 40529554
Then you can add an include file in the correct place for your form and processing

<%
good_email_form="no" then 
email_error=""
if request.form("add_my_email")<>"" then
	'make sure data is good
	if request.form("firstname")<>"" and request.form("lastname")<>"" then
		' code to update your database
		good_email_form="yes"
		else
		email_error="Please submit both your first and last name"
	end if
end if
if email_error<>"" then
	response.write "<div class='error'>email_error</div>"
end if
if good_email_form="yes" then
	response.write "<div class='success'>Thank you</div>"
end if
if good_email_form="no" then ' only show i'
%>

<form method="post" action="">

<input name="firstname" placeholder="First Name">
<input name="lastname" placeholder="Last Name">
<input name="add_my_email" placeholder="Email Address">
</form>
<%
end if
%>

Open in new window

0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 356 total points
ID: 40529555
added newsletter sign up
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>

<%
  ' add any asp for page processing like request.form, request.querystring'

  ' create recordsset (rs) for main content   

  ' create recordset (rs_jumbotron) for jumbotron


%>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="<%=rs("page_meta")%>">
    <meta name="author" content="">
    

    <title><%=rs("page_title")%></title>

  <!--#include virtual="/common_files/common_css.asp"-->   
   <!-- *** css for this page only *** -->
 <link href="jumbotron.css" rel="stylesheet">

    
  </head>

  <body>
  <!--#include virtual="/common_files/common_navigation.asp"-->  
   

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
        <%
        do until rs_jumbotron.eof
          rs_jumbotron("jumbotron_heading")
          rs_jumbotron("jumbotron_conteint")
        rs_jumbotron.movenext
        loop
         %>
      </div>
    </div>

    <div class="container">
    	<!--#include virtual="/common_files/newsletter_sign_up.asp"-->
      <!-- Example row of columns -->
       <%=rs("MainContent") %>

      <hr>

       <!--#include virtual="/common_files/common_footer.asp"-->
    </div> <!-- /container -->


   <!--#include virtual="/common_files/common_javascript.asp"-->

  </body>
</html>

Open in new window

0
 

Author Comment

by:Bob Schneider
ID: 40542155
Still trying to find some time to re-visit this.  I decided I don't want to close it out just yet but really overwhelmed right now.
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now