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 KromanSales ExecutiveAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
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 KromanSales ExecutiveAuthor 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
Peter KromanSales ExecutiveAuthor 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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Chris StanyonWebDevCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Peter KromanSales ExecutiveAuthor Commented:
Now we are taking business :) :)

Thakns a lot Chris - everything is working nicely now
0
Chris StanyonWebDevCommented:
Good news Peter :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.