asked on

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

Chris Stanyon

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

Peter Kroman

ASKER

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

Peter Kroman

ASKER

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

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Peter Kroman

ASKER

Now we are taking business :) :)

Thakns a lot Chris - everything is working nicely now

Chris Stanyon

Good news Peter :)