Solved

FORM and Submit button display

Posted on 2014-11-10
6
255 Views
Last Modified: 2014-11-10
I have a form which includes a section with a function. Based on user's input (selection of an option), user is given additional fields to complete. Right now the form is working correctly. EXCEPT, the submit button is visible before the option is selected.
User first completes some personal information.
Then, based on a selection, additional fields are displayed.
I don't want to see the submit button until after the option is selected.

I am attaching the complete code.
FORM.txt
0
Comment
Question by:Malloy1446
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 33

Expert Comment

by:Big Monty
ID: 40433714
first, add an ID to your submit button, so you can reference it to show/hide

<input id="btnSubmit" type="submit" value="Submit Request">

Open in new window


then, either through css or javascript, hide the button on page load. below is an example using javascript/jquery since you already have it present:

	$(function()
		{
                    $('#btnSubmit').hide();

		$(" input[name='ILLRequestType']").click(function()
                     .......

Open in new window


finally, add an event handler for the change event of the field. I'm unsure of which field you want to show/hide the button on, so as an example, I'm just going to attach it to a field called "fld":

<script>

	$(function()
		{
                $('#btnSubmit').hide();

		$(" input[name='ILLRequestType']").click(function()
		
		{
		var type=$(this).val();

			if(type==="Journal Article"){
				$('.chooseJournal').show();
				$('.chooseBook').hide();
 				$('.chooseAudiovisual').hide();
      
    		}
    		if(type==="Book"){
       			$('.chooseJournal').hide();
      			$('.chooseBook').show();
 				$('.chooseAudiovisual').hide();
    		
    		}
    		if(type==="Audiovisual"){
       			$('.chooseJournal').hide();
      			$('.chooseBook').hide();
 				$('.chooseAudiovisual').show();
    		}
    
})

              $(" input[name='fld']").change(function() {
                    //-- put in whatever your criteria is for showing the button. for example, if you want to make sure certain fields contain a value, you would do an IF statement here checking those fields

                 //-- your last line if the criteria is met would be
                 $('#btnSubmit').show();
            
                } else {    //-- criteria not met, hide button
                      $('#btnSubmit').hide();
                }
              });
  
})

</script>

Open in new window

0
 

Author Comment

by:Malloy1446
ID: 40433784
I need the SUBMIT button to display AFTER the user selects the "ILLRequestType".
It would display for each "ILLRequestType"

After adding an ID to the submit button, could the .show be added to the existing function or does submit button function need it's own function code.
0
 
LVL 33

Expert Comment

by:Big Monty
ID: 40433791
since that is a radio field, you should be able to show the button in the click event that you already have:

$(function()
		{
		$(" input[name='ILLRequestType']").click(function()
		
		{
		var type=$(this).val();
                $('#btnSubmit').show();

			if(type==="Journal Article"){
				$('.chooseJournal').show();
				$('.chooseBook').hide();
 				$('.chooseAudiovisual').hide();
      
    		}
    		if(type==="Book"){
       			$('.chooseJournal').hide();
      			$('.chooseBook').show();
 				$('.chooseAudiovisual').hide();
    		
    		}
    		if(type==="Audiovisual"){
       			$('.chooseJournal').hide();
      			$('.chooseBook').hide();
 				$('.chooseAudiovisual').show();
    		}
    
})
  
})

Open in new window

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Malloy1446
ID: 40433832
I assigned an ID to the submit button and addded
            $('#btnSubmit').show();

to the IF statements function. The Submit button is still appearing before the user clicks on the option "ILLRequestType".

I am attaching the <script>
script.txt
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 40433833
Malloy1446,  I updated your question topics by adding jquery and javascript and removing sql and asp.

padas
Topic Advisor
0
 
LVL 33

Accepted Solution

by:
Big Monty earned 500 total points
ID: 40433846
you need to hide the button on page load:

<script>

	$(function()
		{
                 $('#btnSubmit').hide();
		$(" input[name='ILLRequestType']").click(function()
		
		{
		var type=$(this).val();
		
			if(type==="Journal Article"){
				$('.chooseJournal').show();
				$('.chooseBook').hide();
 				$('.chooseAudiovisual').hide();
 				$('#btnSubmit').show();
      
    		}
    		if(type==="Book"){
       			$('.chooseJournal').hide();
      			$('.chooseBook').show();
 				$('.chooseAudiovisual').hide();
 				$('#btnSubmit').show();

    		}
    		if(type==="Audiovisual"){
       			$('.chooseJournal').hide();
      			$('.chooseBook').hide();
 				$('.chooseAudiovisual').show();
 				$('#btnSubmit').show();
    		}
    
})
  
})

</script>

Open in new window

0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

691 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