Getting the Enter Key to trigger submit form

Hi,

I am in big trouble. and I hope that somebody can guide me in the right direction.

I have this page http://kroweb.dk/gfdev/godser_raw/godser.php where everything, except the behavior of the Enter key, is working nicely.

You might want to try to enter "Kronborg" into the searchfield an hit the "Søg" (Search) button. A nice result is returned. Try again with the same phrase and hit the Enter key - and the page is reset and results are empty.

I have tried many things, and I have Googled the problem, but nothing seems to work. The strange thing is that I have a similar setup in most of my other pages, and here is it working perfectly.

What am I doing wrong :)

<?php
session_start();
error_reporting(E_ALL);
ini_set('display_errors', 1);
?>

<!DOCTYPE html>
<html lang="da">
<head>
  <!-- Check for title--> 
  <title>Godser</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="style_godser.css" />
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/select/1.2.4/js/dataTables.select.min.js"></script>
  
</head>


<body>
 
  <!-- Page content start-->        
  <div class="w3-row">

   
    <!-- Main page start -->  

    <div class="w3-row">

      <!-- Column1 start-->         
      <div class="w3-col w3-mobile" style="width:65%; margin-top: 30px; margin-left: 20px; margin-bottom:10px; margin-right: 8px; padding-bottom: 10px;">

        <!-- Form that holds the Sogn to the lonk clicked and the Amt to limit the search --> 
        <form id="search" style="display:none" target="_blank" method="post" action="sognefakta_ByLand.php">
          <input type="text" name="sogn" id="sogn">
          <input type="text" name="amt" id="amt">
        </form>

        <!-- Valgknapper til bred/eksakt søgning -->

        <form style="color:#9F5584; padding-bottom:7px;"> 

          <input type="radio" id="broad" style="position:relative; margin-left: 0px; background-color: #eee;" checked="checked" name="radio1" value="bredt" /> Søg bredt 
          <input type="radio" id="exact" style="position: relative;" name="radio1" value="eksakt"/> Søg eksakt Sogn
          <input type="radio" id="exacts" style="position: relative;" name="radio1" value="eksakts"/> Søg eksakt Gods

        </form> 


        <!-- Søge felt til steder -->
        <form action=""  id="search2" form title="Skriv evt. bare en del af det sted du søger, eller brug % som jokertegn når du søger bredt. Hvis du søger eksakt skal du skrive det eksakte navn på det du søger" style="padding-top:10px; padding-bottom:10px;" method="POST" >

         <input type="search" id="input_1" placeholder= "Søg" style="width: 300px; height: 35px; border: 1px solid #666666;border-radius:2px;color:#666666; color: #9F5584; font-weight: ligther; font-size: 13px; padding-left:10px;" name="query"  value=""/>

         <input type="button" submit title="Klik her, eller tast Enter, for at aktivere søgningen." style="margin-left:15px; padding-right:10px;height:30px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid #grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);" name="soeg" id="Sog" value="Søg"/>


         <input type="reset" id="nulstil" style="margin-left:15px; height:30px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid #grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);" value="Nulstil"/>
       </form>  
       

       <div id="list_items" class ='list'></div>




       <div class="w3-row" style="width:100%;">         
        <br> 
        <hr style= "margin-left: 10px; width: 95%;  border-color: #9F5584;">   
      </div>    


      <!-- Column1 end--> 


      <!-- Binds the click of the Sogn link to the form -->  
      <script>
      $('#list_items').on('click', '#tdata tr > td:nth-child(2) a', function(e) {
        e.preventDefault();
        $('#sogn').val( $(this).parents('tr').find('td:eq(1)').text() ); 
        $('#amt').val( $(this).parents('tr').find('td:eq(3)').text() );
        $('#search').attr( $(this).attr('href') );
        $('#search').trigger('submit');
      });

      </script>

      <script>
        //Variable to be used in the scripts
      var input_1 = document.getElementById('input_1'); //main searchfield
      var SogButton=document.getElementById('Sog'); //"Søg" buttin
      var NustilButton=document.getElementById('nulstil');  //"Nulstil" button 
      
      $(document).ready(function(){ 
        $("#input_1").focus(); 
      });


      function radioBtn(){
       var linkPhp;
       if($("#broad").is(":checked")) {
         linkPhp='ajaxListHtml.php';        
         return linkPhp;
       }else if($("#exact").is(":checked")){
         linkPhp='ajaxListHtml2.php';         
         return linkPhp;  
       }else{        
        linkPhp='ajaxListHtml3.php';         
        return linkPhp;  }
      }    


      // "Søg" button function
      SogButton.addEventListener('click',function (){
        $('#list_items > table').remove();    
        $.ajax({
         url: radioBtn(),
         data: {query:input_1.value},
         method:'POST',
         dataType: 'html'
       }).done(function (res){             
        $('#list_items').html(res);
        $('#tdata').DataTable({responsive: true, searching: true, paging: false, info: true, select: true, "dom": '<"top"if>t', order: []});
        
      });         

     });


        // Return key search function
        input_1.addEventListener('keyup',function(e){
          if(e.keyCode===13 ){            
           $.ajax({
             url: radioBtn(),
             data: {query:input_1.value},
             method:'POST',
             dataType: 'html'
           }).done(function (res){
            $('#list_items').html(res);
            $('#tdata').DataTable({responsive: true, searching: true, paging: false, info: true, select: true, "dom": '<"top"if>t', order: []});
            
          });
         }
       }); 
        

        //"Nulstil" button
        NustilButton.addEventListener('click',function (){
          document.getElementById("exact").checked = false;
          document.getElementById("broad").checked = true;
          $.ajax({
           url: radioBtn(),
           data: {query:input_1.value},
           method:'POST',
           dataType: 'html'
         }).done(function (res){             
          $('#list_items').html(res);
          $('#tdata').DataTable({searching: false, paging: false, info: false, "dom": '<"top"if>', order: []});           
          $('#list_items > table').remove();
          $(document).ready(function(){ 
            $("#input_1").focus();

          });

        });       
       });
        
        
        </script>


      </div>
      <!-- Main page end--> 

    </div>  
  </div>
  <!-- Page content end-->  

  </html>

Open in new window

Peter KromanSenior Proposal SpecialistAsked:
Who is Participating?
 
Chris StanyonConnect With a Mentor Commented:
Ahh - I missed the preventDefault() call in the method:

$('#search2').submit(function(e) {

    e.preventDefault();

    $('#list_items > table').remove(); 

Open in new window

Make sure you Sog button is type="submit" and you should be good to go.
0
 
Chris StanyonCommented:
Hey Peter,

You have an AJAX function bound to the Click event of the Sog button, which obviously get's fired when you click the button. Pressing Enter doesn't click the button - it submits the form.

You should try binding to the Submit event of the form instead - which will then get fired when you either click the button or press enter. Remove the event bindings for the button click and keyup function and replace with this:

$('#search2').submit(function(e) {

    $('#list_items > table').remove();    

    $.ajax({
        url: radioBtn(),
        data: {query:input_1.value},
        method:'POST',
        dataType: 'html'
    }).done(function (res){             
        $('#list_items').html(res);
        $('#tdata').DataTable({responsive: true, searching: true, paging: false, info: true, select: true, "dom": '<"top"if>t', order: []});
    });

});

Open in new window

0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
Thanks Chris,

When I comment out the present functions for Sog button and Enter Key and replace them with your suggestion the "Søg" button is not working and the Enter Key is still resetting the page ...

    $.ajax({
        url: radioBtn(),
        data: {query:input_1.value},
        method:'POST',
        dataType: 'html'
    }).done(function (res){             
        $('#list_items').html(res);
        $('#tdata').DataTable({responsive: true, searching: true, paging: false, info: true, select: true, "dom": '<"top"if>t', order: []});
    });

});


      // "Søg" button function
      /*SogButton.addEventListener('click',function (){
        $('#list_items > table').remove();    
        $.ajax({
         url: radioBtn(),
         data: {query:input_1.value},
         method:'POST',
         dataType: 'html'
       }).done(function (res){             
        $('#list_items').html(res);
        $('#tdata').DataTable({responsive: true, searching: true, paging: false, info: true, select: true, "dom": '<"top"if>t', order: []});
        
      });         

     });


        // Return key search function
        searchform.addEventListener('keyup',function(e){
          if(e.keyCode===13 && input_1!==''){            
        $('#list_items > table').remove();    
        $.ajax({
         url: radioBtn(),
         data: {query:input_1.value},
         method:'POST',
         dataType: 'html'
       }).done(function (res){             
        $('#list_items').html(res);
        $('#tdata').DataTable({responsive: true, searching: true, paging: false, info: true, select: true, "dom": '<"top"if>t', order: []});
            
          });
         }
       }); */

Open in new window

0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

 
Peter KromanSenior Proposal SpecialistAuthor Commented:
Have also tried to change the input type to submit for the Sog button - same sad result :)

Sorry - missed something in the first copying. Thes is how it looks looks right now:
     $('#search2').submit(function(e) {

      $('#list_items > table').remove();    

    $.ajax({
        url: radioBtn(),
        data: {query:input_1.value},
        method:'POST',
        dataType: 'html'
    }).done(function (res){             
        $('#list_items').html(res);
        $('#tdata').DataTable({responsive: true, searching: true, paging: false, info: true, select: true, "dom": '<"top"if>t', order: []});
    });

});


      // "Søg" button function
      /*SogButton.addEventListener('click',function (){
        $('#list_items > table').remove();    
        $.ajax({
         url: radioBtn(),
         data: {query:input_1.value},
         method:'POST',
         dataType: 'html'
       }).done(function (res){             
        $('#list_items').html(res);
        $('#tdata').DataTable({responsive: true, searching: true, paging: false, info: true, select: true, "dom": '<"top"if>t', order: []});
        
      });         

     });


        // Return key search function
        searchform.addEventListener('keyup',function(e){
          if(e.keyCode===13 && input_1!==''){            
        $('#list_items > table').remove();    
        $.ajax({
         url: radioBtn(),
         data: {query:input_1.value},
         method:'POST',
         dataType: 'html'
       }).done(function (res){             
        $('#list_items').html(res);
        $('#tdata').DataTable({responsive: true, searching: true, paging: false, info: true, select: true, "dom": '<"top"if>t', order: []});
            
          });
         }
       }); */

Open in new window

0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
Now we are taking business :) :)

Thakns a lot Chris - everything is working nicely now
0
 
Chris StanyonCommented:
Good news Peter :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.