Solved

my onSubmit event doesn't work on IE

Posted on 2011-03-17
7
655 Views
Last Modified: 2012-05-11
I am using normal form on coldfusion and my javascript code is very simple to ask for confirmation before submitting a form. when i click on submit button it asks me for confirmation, but even if i press cancel, it still submits the form and it should not be. Only on IE it happen (and i m runnign IE 8). it works fine on FF and Chrome.

any help will be greatly appreciated.
here is the javaScript>>

<script>
<script>
    function confirmSubmit(){
         
             var msg = "it's a test";
                if (confirm(msg)) 
                {      
                   return true;    
                }                   	
                else
                {
        	       return false;    
                }
                   
    }
</script>

Here Is my form inside a CFM coldfusion page>>>

<form id="reqform" action="components/actions.cfc?method=insertData&num=#session.sid#" method="post" class="loginForm" onsubmit="return confirmSubmit();">         
   

	  	
		
	  
		<fieldset>  	
            <legend>Enter Dates</legend>	
                <label> Start Date <span>*</span></label> 
	  	 		<input type="text" name="start_date" id="start_date" value="" class="required">
               
                <label>End Date <span>*</span></label>
	  	 		<input type="text" name="end_date" id="end_date" value="" class="required">
               
		
	    </fieldset>
		
    			
	
    		
            <input type="submit" name="insert" value="Save" class="submit">
            <input type="submit" name="apply" value="Submit" class="submit">
        </fieldset>       					
</form>

Open in new window

here is the javaScript>>

<script>
<script>
    function confirmSubmit(){
         
             var msg = "it's a test";
                if (confirm(msg)) 
                {      
                   return true;    
                }                   	
                else
                {
        	       return false;    
                }
                   
    }
</script>

Here Is my form inside a CFM coldfusion page>>>

<form id="reqform" action="components/actions.cfc?method=insertData&num=#session.sid#" method="post" class="loginForm" onsubmit="return confirmSubmit();">         
   

	  	
		
	  
		<fieldset>  	
            <legend>Enter Dates</legend>	
                <label> Start Date <span>*</span></label> 
	  	 		<input type="text" name="start_date" id="start_date" value="" class="required">
               
                <label>End Date <span>*</span></label>
	  	 		<input type="text" name="end_date" id="end_date" value="" class="required">
               
		
	    </fieldset>
		
    			
	
    		
            <input type="submit" name="insert" value="Save" class="submit">
            <input type="submit" name="apply" value="Submit" class="submit">
        </fieldset>       					
</form>

Open in new window

0
Comment
Question by:khan02
  • 5
  • 2
7 Comments
 
LVL 36

Expert Comment

by:SidFishes
ID: 35160542
without looking too closely yet i'd say you've got a typo

<script> <<< remove this
<script>
0
 

Author Comment

by:khan02
ID: 35160567
here is the script>>>>

<script language="Javascript">
    function confirmSubmit(){
         
             var msg = "it's a test'.";
                if (confirm(msg))
                {      
                   return true;    
                }                         
                else
                {
                     return false;    
                }
                   
    }
</script>
0
 
LVL 36

Expert Comment

by:SidFishes
ID: 35160604
according to your posted example it's actually

<script> <<<< this is unclosed and will cause issues. remove it
<script>
    function confirmSubmit(){
         
             var msg = "it's a test";
                if (confirm(msg))
                {      
                   return true;    
                }                         
                else
                {
                     return false;    
                }
                   
    }
</script>
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:khan02
ID: 35160674
it was a copy paste error on this forum, but i don't have this duplicate <script> tag on my form.
0
 

Author Comment

by:khan02
ID: 35160737
seems like my script is fine, but some how it's conflicting with jquery validation. I have the following jquery validation before this script (see below). if i comment those validation script, then it works fine else it just doesn't work.


<script>
$(document).ready(function() {
      $("#start_date").datepicker(
          {
              minDate: new Date(),
              beforeShowDay: $.datepicker.noWeekends
          }
      );
      $("#end_date").datepicker(
          {
             minDate: new Date(),
             beforeShowDay: $.datepicker.noWeekends
            }
      
      );

})
</script>


 <script>
$().ready(function() {
      $("#reqform").validate({
            rules: {            
                  
                  start_date: {
                        required: true                        
                  },
                  end_date: {
                        required: true                  
                  }
            },
            messages: {                                                
                  start_date: {required: "Please enter a valid start date"},
                  end_date: {required: "Please enter a valid end date"}
                  
            }
      });
            
});
</script>
0
 

Accepted Solution

by:
khan02 earned 0 total points
ID: 35160764
Here is a Complete FORM>>>>



<link rel="stylesheet" type="text/css" href="css/form.css" media="screen" />
<link rel="stylesheet" type="text/css" href="jquery/css/ui-lightness/jquery-ui-1.8.9.custom.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/view.css" media="screen" />

<script type="text/javascript" src="jquery/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery.validate.js"></script>
<script type="text/javascript" src="jquery/js/cmxforms.js"></script>


<script>
$(document).ready(function() {
      $("#start_date").datepicker(
          {
              minDate: new Date(),
              beforeShowDay: $.datepicker.noWeekends
          }
      );
      $("#end_date").datepicker(
          {
             minDate: new Date(),
             beforeShowDay: $.datepicker.noWeekends
            }
      
      );

})
</script>


 <script>
$().ready(function() {
      $("#reqform").validate({
            rules: {            
                  start_date: {
                        required: true                        
                  },
                  end_date: {
                        required: true                  
                  }
            },
            messages: {                  
                  start_date: {required: "Please enter a valid start date"},
                  end_date: {required: "Please enter a valid end date"}
                  
            }
      });
            
});
</script>



<script language="Javascript">
    function formConfirm(){
         
             var msg = "it's a test'.";
                if (confirm(msg))
                {      
                   document.getElementById('reqform').submit();    
                }                         
                else
                {
                     return false;    
                }
                   
    }
</script>

 <cfoutput>  
<!--- components/actions.cfc?method=insertData&num=#session.sid# --->
<form id="reqform" action="components/actions.cfc?method=insertData&num=#session.sid#" method="post" class="loginForm" onSubmit="return formConfirm();">        
               
            <fieldset>        
            <legend>Enter Dates</legend>      
                <label> Start Date <span>*</span></label>
                           <input type="text" name="start_date" id="start_date" value="" class="required">
               
                <label>End Date <span>*</span></label>
                           <input type="text" name="end_date" id="end_date" value="" class="required">
               
                        <input type="hidden" name="type" value="d"><!--- Updated Oct 26, 2009 --->
          </fieldset>
            
                      
            <fieldset>
            <legend>Enter Comments</legend>
            <label>Comments
                    <textarea name="comments" id="comments"></textarea>
                            Comment will be seen by Coordinator and Administrator.
                </label>
                
            <input type="submit" name="insert" value="Save" class="submit">
            <input type="submit" name="apply" value="Submit" class="submit">
        </fieldset>                                     
</form>
</cfoutput>

0
 

Author Closing Comment

by:khan02
ID: 35957317
i giving credit to myself since i had to find an alternate way, and no one else answered anything abt this..
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
This article discusses how to create an extensible mechanism for linked drop downs.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will learn how to dynamically set the form action using jQuery.

786 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