How to send data with ajax when pressing enter

Question

form.php

<form action="#" method="POST" enctype="multipart/form-data" style="textalign: center;">    

    <label class="label" for="Fromdate">From Date</label>

    <input type="text" id="datepicker" class="textBox" name="fromDate" />

    <label class="label" for="Todate">To Date</label>

    <input type="text" id="datepicker1" class="textBox" name="toDate" />

    <input type="submit" name="searchby" id="searchby" value="Search" class="buttonLarge" />

    <input type="submit" name="excel" value="Export To Excel" class="buttonLarge" />

</form>

datediff.php

<?php 
if(($_POST['searchby'] == 'Search')){

?>  
<script type="text/javascript">

        var fromDate = $("#datepicker").val();

        var toDate = $("#datepicker1").val();

            $.ajax({
                type: "POST",
                url: "datediff.php",
                data: { fromDate,toDate },
                cache: false,
                success: function (html) {                
                }

            });

</script>

<?php

}

?>

if you have `type="submit"` in your form then your form must submit automatically when pressing enter while your cursor is active inside an Input field — Umair Ayub, Aug 11 '15 at 05:03
There two submit button search & second is Export to Excel I need When i press enter then call ajax function — bharat, Aug 11 '15 at 05:06

Harish Lalwani · Answer 1 · 2015-08-11T06:09:40.583

1

Wrong json { fromDate,toDate }.

And yes it will submit if we press enter. For submitting it through ajax we have to prevent default functionality through event.preventDefault().

$(document).keypress(function(e) {
if(e.which == 13) {
   e.preventDefault();
   search();
 }
});

$('#searchby').click(function(e){ 
  e.preventDefault();
  search(); 
});

function search()
{
  $.ajax({
        type: "POST",
        url: "datediff.php",
        data: { 'fromDate':$('#datepicker').val(), 'toDate':$('#datepicker1').val() },
        cache: false,
        success: function (html) {                
        }

    });
}

edited Aug 11 '15 at 06:09

answered Aug 11 '15 at 05:05

Harish Lalwani

754
5
20

this code, on the page, where ever you will press enter ... form will be submit .... :( – Umair Ayub Aug 11 '15 at 05:07
When i select date ajax working fine same as when i enter name ajax call but value not display name=':$('#FName').val(),fromDate':$('#datepicker').val(), 'toDate':$('#datepicker1').val() – bharat Aug 11 '15 at 05:16
@Umair - to prevent default action I have used event.preventDefault(). – Harish Lalwani Aug 11 '15 at 05:22
1

not event. because inside your function is e so you use e.preventDefault(); @HarishLalwani – aldrin27 Aug 11 '15 at 05:23
Though it worked with event.preventDefault() but e.preventDefault() will be more correct. Thanks @aldrin27 – Harish Lalwani Aug 11 '15 at 05:31
@Harish When i am using given code 1 error has been generate "event is not defined" & ajax not working – bharat Aug 11 '15 at 05:31
use e.preventDefault() instead of event.preventDefault(). What browser are you using? – Harish Lalwani Aug 11 '15 at 05:34
When i am using e.preventDefault() this function working fine Thank you so much – bharat Aug 11 '15 at 05:38
@aldrin27 can you please explain why this worked for me and not for bharat with event.preventDefault(). I used this code in my browser. I did not show any error 'event is not defined'. Using chrome Version 38.0.2125.101, assuming this is a browser issue. – Harish Lalwani Aug 11 '15 at 05:40
One more think when i click on search button ajax not working when i press enter ajax work – bharat Aug 11 '15 at 05:44
Maybe the version of chrome or jquery you had @HarishLalwani – aldrin27 Aug 11 '15 at 05:45
1

@bharat please upvote my comment if this works. Try this: In another line $('#searchby').click(function(e){ //Your ajax here }); – aldrin27 Aug 11 '15 at 05:48
@aldrin27 - sorry forgot to upvote. code edited for search button. – Harish Lalwani Aug 11 '15 at 06:12

How to send data with ajax when pressing enter

1 Answers1