preventDefault , return false does not work

Question

as said above the preventDefault does not work , neither return false or stopImmediatePropagation , tried everything i could find/think of but it´s not working. My page redirects me back to my first selection after i input all required fields and click on the button. It should redirect me to the textarea not to the first selection

the html ->

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Sig Generator</title> 
    <script type="text/javascript" src ="jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="sig.js"></script>
</head>
<body>  
    <div id="legalform" align ="center">

            Rechtsform auswählen:<br><br>
            <select id="selection" size="1">        
            </select><br><br>

            <input id="sendLegalForm" type="button" value ="Weiter"/>           
    </div>  

    <div id="fields" align="center">
            <form id="fieldsForm" > 
            <br>
            <br>    
            <input id="sendFields" type="submit" value="Weiter"/>   
            </form>

            <br>

    </div> 

    <div id="display" >


        <textarea  id="textarea" cols="30" rows="20"></textarea>

    </div>

</body>
</html>

and the jquery ->

$(document).ready(function() {

    var $selection ="";

     $.ajax({
         type:'GET',
         url:'http://localhost/php/sig.php?legalforms=true',
         dataType:'json',
         success: function (data){
            $("#display").hide();       
            var selection = [];
            for(var i = 0; i<data.length; i++){
                selection.push('<option>', data[i],'</option>');
            }
            $("#selection").html(selection.join(''));            
            $("#fields").hide();
         },
         error: function(jqXHR,textStatus,errorThrown){  
            console.log(jqXHR);
            console.log(textStatus);
            console.log(errorThrown);
         }
     });

     $("#sendLegalForm").click(function () {    
         selection = $('#selection').val();
         $.ajax({
             type:'GET',
             url:'http://localhost/php/sig.php?selectedLegalform='+ selection,
             dataType:'json',
             success: function (data){  

                 $("#legalform").hide();
                 $("#fields").show();
                 var fieldnames =[];
                 for(property in data.namesToSubmit){
                    fieldnames.push(property);
                 }                   
                 var fields=[];
                 for(var i=0; i<data.textfieldHeaders.length; i++){               
                 fields.push(data.textfieldHeaders[i],'<br>','<input name="',fieldnames[i],'" type="text"                                                       ',data.namesToSubmit[fieldnames[i]] == "required"?"required":"",'>','<br/>');        
                 }                

                 fields.push("<br>", 'Pflichtfelder (*)');
                 $("#fieldsForm").prepend(fields.join(''));              
             },
             error: function(jqXHR,textStatus,errorThrown){
                console.log(jqXHR);
                console.log(textStatus);
                console.log(errorThrown);
             }
         });
     });

     //i have tried with the id of the form and button
      $("#fieldsForm").on('submit',function(e){
          e.preventDefault();  
         // e.stopImmediatePropagation();
          $.ajax({
             type:'POST',
             url: 'http://localhost/php/sig.php?fieldsend='+selection,
             data: $("#fieldsForm").serialize(),
             success: function (data){                  
             $('#fields').hide();
             $('#display').show();
             $("#textarea").html(data);
             },
             error: function(jqXHR,textStatus,errorThrown){
             alert('Bitte alle Pflichtfelder ausfüllen.');
                console.log(jqXHR);
                console.log(textStatus);
                console.log(errorThrown);
             }  
        });

     });

});

Answer 1

As I said, this code should fix your problem:

$("#fieldsForm").off("submit").on('submit', [your function]);

What I am doing above is to remove all bound events and than rebind with the one that I want.

There is a couple of reasons the could make the code works, for example:

Your are binding the event more than once, so the preventDefault wont't work (but it should).
Compatibility issues with the jquery version that you using. Because this bug have been resolved in earlier versions.

preventDefault , return false does not work

Question

1 answers

solution1
0 ACCPTED 2013-07-10 14:19:39

preventDefault , return false does not work

Question

1 answers

solution1 0 ACCPTED 2013-07-10 14:19:39

solution1
0 ACCPTED 2013-07-10 14:19:39