Having Issue with form

Question

How can i submit form using Enter key

I am able to submit form using button click

Here is my code :

<form role="form" method="post" class="form-horizontal" id="leave_days">
 <div class="form-group">
 <label class="col-sm-2 control-label">Category Name</label>
 <div class="col-sm-9">
 <input type="text" name="txt_catname" id="txt_catename" class="form-control" placeholder="Enter Category Name" />
 </div> 
 </div> 
 <div class="col-sm-9">
 <button type="button" data-style="expand-right" id="btn_reg" class="btn btn-info ladda-button">
 </div>
</form>

Answer 1

<button type="button" data-style="expand-right" id="btn_reg" class="btn btn-info ladda-button">

type="button"will not submit a form on enter type="submit" so it will submit form on enter

 type="submit" 

• Vijay Astound: but also refresh page
• jeoj: @VijayAstound, if you don't want to refresh the page, you don't want to "submit" the form; you want to use Ajax to POST the contents of the form to the server. Using vanilla Javascript: developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest or using jQuery: api.jquery.com/jquery.ajax

Answer 2

Add a listener to your input to check for the correct keycode in Javascript. Notice the onkeydown-attribute added to your input

HTML:

<form role="form" method="post" class="form-horizontal" id="leave_days">
 <div class="form-group">
 <label class="col-sm-2 control-label">Category Name</label>
 <div class="col-sm-9">
 <input type="text" name="txt_catname" id="txt_catename" class="form-control" placeholder="Enter Category Name" onkeydown="checkForEnter(this, event);" />
 </div> 
 </div>
 <div class="col-sm-9">
 <button type="button" data-style="expand-right" id="btn_reg" class="btn btn-info ladda-button">Submit</button>
 </div>
</form>

On keycode 13, which is enter, get the form and submit it.

Javascript:

function checkForEnter(element, event) {
 if(event.keyCode == 13) // 13 is enter
 document.getElementById("leave_days").submit();
}

https://jsfiddle.net/8L5t119L/

OR just change your button to a submit input inside the form tags, like this:

<input type="submit" data-style="expand-right" id="btn_reg" class="btn btn-info ladda-button" value="Submit" />

• Vijay Astound: i dont want to refresh page,in your code page refreshed
• jeoj: @VijayAstound, if you don't want to refresh the page, you don't want to "submit" the form; you want to use Ajax to POST the contents of the form to the server. Using vanilla Javascript: developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest or using jQuery: api.jquery.com/jquery.ajax

Answer 3

You can use jQuery for this:

<script type="text/javascript">
 $(document).ready(function () {
 var makeAllFormSubmitOnEnter = function () {
 $('form input, form select').live('keypress', function (e) {
 if (e.which && e.which == 13) {
 $(this).parents('form').submit();
 return false;
 } else {
 return true;
 }
 });
 };
 makeAllFormSubmitOnEnter();
 });
</script>

• NullPoiиteя: why he needs javascript ? i dont think there is any need to js for that

Answer 4

Add the following script in your code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
 $(document).ready(function () {
 $('#txt_catename').keypress(function (e) {
 if (e.which == 13) {
 $("#leave_days").submit();
 }
 });
 });
</script>

• NullPoiиteя: why he needs javascript ?
• Jai: @NullPoiиteя, so even we have type="button" if we put some value in the text box and hit enter key so form won't get submitted.

Answer 5

finally i got answer

$("#leave_days").keyDown(function(e)){
 var fromto = $("#txt_catename").val();
 var key = e.which;
 if (key == 13) {
 if(fromto ==""){
 alert("Please Enter Category Name");
 document.getElementById('txt_catename').focus();
 return false;
 }
 if(fromto !=""){
 $.ajax({
 type : "post",
 url : "category-mgt/ajax/add-cat.php",
 data : "category="+fromto,
 success : function(data) {
 //alert(data); return false;
 if (data==1) { 
 alert('Category Added'); 
 $('#leave_days').trigger("reset");
 $('#dataTable').DataTable().ajax.reload(); 
 }else if(data==2){
 alert('Category Allready Exist'); 
 $('#leave_days').trigger("reset");
 } else {
 alert('something is going wrong please check this..');
 return false;
 //location.reload();
 }
 }
 });
 }
 return false;
 } 
 });
});