Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 170
  • Last Modified:

Based on response in a form display additional form data and then submit responses to database

I have a form that collects personal information and then based on one field selection (field: RequestType), additional data fields are displayed and eventually all data is sent to an MSAccess database. I do not understand how to display the additional data on the same page after the selection of the RequestType. I did have the form working when the additional request types were not needed.

Code is attached.
Request.txt
0
Malloy1446
Asked:
Malloy1446
  • 2
1 Solution
 
Scott Fell, EE MVEDeveloperCommented:
You will want to do this client side although you could do it sever side but that would be a page refresh.  This is a more modern way.
http://jsbin.com/kolamawejive/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
  <style>
    .chooseJournal,.chooseBook{display:none;}
  </style>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <script>
    $(function(){
  $(" input[name='ILLRequestType']").click(function(){
    var type=$(this).val();
    if(type==="Journal Article"){
       $('.chooseJournal').show();
      $('.chooseBook').hide();
       
    }
    if(type==="Book"){
       $('.chooseJournal').hide();
      $('.chooseBook').show();
       
    }
    
  })
  
})
  </script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<form method="POST" action="Submit.asp" onsubmit="return validateForm()" name="FrontPage_Form1">


<!-------------------- PERSONAL INFORMATION -------------------->

	<p><b>First Name:&nbsp; </b>
	<input type="text" name="RequestorsFName" size="100"></p>
  
	<p><b>Last Name:&nbsp; </b>
	<input type="text" name="RequestorsLName" size="100"></p>
  
	<p><b>Email:&nbsp;</b>
	<input type="text" name="RequestorsEmail" size="75"></p>

	<p><b>Phone Number:&nbsp;</b>
	<input type="text" name="RequestorsPhone" size="75"></p>



<!------------------------------------ TYPE OF REQUEST ------------------------------------>
<!-------------------- BASED ON RESPONSE, APPROPRIATE FORM WILL DISPLAY -------------------->
  
	<p><b>Type of Request:&nbsp;</b>
	<blockquote>
		<input type="radio" name="ILLRequestType" value="Journal Article">Journal Article<br>
		<input type="radio" name="ILLRequestType" value="Book">Book<br>
		<input type="radio" name="ILLRequestType" value="Audiovisual">Audiovisual
	</blockquote>



<!------------------------------------ BOOK REQUEST ------------------------------------>
<!---- IF BOOK SELECTED, FOLLOWING DATA IS COLLECTED -------------------->
<div class="chooseBook">
	<p><b>Author/Editor:&nbsp; </b>
	<input type="text" name="ILLBookAuthor" size="100"></p>
  
	<p><b>Title:&nbsp; </b>
	<input type="text" name="ILLBookTitle" size="100"></p>
  
	<p><b>Publisher:&nbsp; </b>
	<input type="text" name="ILLBookPublisher" size="100"></p>
  </div>


<!--  JOURNAL ARTICLE REQUEST --->
  <div class="chooseJournal">
<!-- - IF JOURNAL ARTICLE IS SELECTED, FOLLOWING DATA IS COLLECTED --->

	<p><b>Journal Title:&nbsp; </b>
	<input type="text" name="ILLJournalTitle" size="100"></p>
  
	<p><b>ArticleTitle:&nbsp; </b>
	<input type="text" name="ILLJournalArticle" size="100"></p>
  
	<p><b>Publication Date:&nbsp; </b>
	<input type="text" name="ILLJournalPubDate" size="100"></p>
  </div>


<input type="hidden" name="SubmitDate" value="<%=Date()%>">
<input type="hidden" name="ChartID" value="<%=session("ChartID")%>">
<input type="submit" value="Submit Request">

</form> 


</body>
</html>

Open in new window

0
 
Scott Fell, EE MVEDeveloperCommented:
If you want to do it server side, you would add each item in a separate form.

<form name="form1">

Main form info

</form>
<%
if request.form("somevalue")="Book" then
%> 
<form name="book">
Book Form
</form>
<%end if%>

Open in new window

0

Featured Post

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now