preventDefault() doesn't prevent form from being send

Question

I have an html snippet

<form action="domains.php#searchdomain" method="post" name="m_domain">
      <a name="searchdomain"></a>
        <table class="dataTable" width="100%" border="0" cellspacing="0" cellpadding="5" id="" style="text-align:center; margin-top:0px; border-left:1px solid #ddd; border-right:1px solid #ddd; border-top:1px solid #ddd;">
          <tr>
            <td align="left" colspan="2"><div id="display_message" <?php echo $sstyle; ?>><?php echo $dis_msg; ?></div></td>
          </tr>
          <tr>
            <td align="left">Search Domain</td>
            <td align="left" style="display:none;" id="apply_text">Replace Selected Domains With</td>
          </tr>

          <tr>
            <td align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td><input class="input_field" name="search_domain" id="search_domain" value="<?php echo $search_domain; ?>" type="text"></td>
                  <td>&nbsp;</td>
                  <td><input type="submit" class="btn blue_button" name="submit" value="Search"></td>
                </tr>
              </table></td>
            <td align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0" id="apply_button" style="display:none;">
                <tr>
                  <td><input class="input_field" name="domain_name_url" id="domain_name_url" value="<?php echo $domain_name_url; ?>" type="text"></td>
                  <td>&nbsp;
                  <input name="domain_replace_id" id="domain_replace_id" 
                  value="" type="hidden">
                  <input name="domain_replace_link" id="domain_replace_link" 
                  value="" type="hidden">
                  </td>
                  <td><input type="submit" class="btn blue_button" name="submit" value="Apply" onclick="return validate();"></td>
                </tr>
              </table></td>
          </tr>
          <tr>
            <td align="center">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td><input type="checkbox" name="status_domain" id="status_domain" <?php if($status_domain){?> checked <?php } ?>>&nbsp;Include inactive campaigns in search.</td>
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                    </tr>
                </table>
            </td>
            <td align="center">&nbsp;</td>
          </tr>

        </table>
        <?php
        echo '<div style="border-bottom:1px solid #ddd; border-left:1px solid #ddd; border-right:1px solid #ddd;  width:100%; padding:10px;">';
        if(sizeof($request_list) > 0)
        {
        echo ' 
        <div class="pg_wrapper">
        <div class="progress" style="width:80%;float: left;position: relative; top: 0; z-index: 999; display: none;"><div class="progress-bar" role="progressbar" aria-valuenow="60"   aria-valuemin="0" aria-valuemax="100" ></div></div><div id="cancel_load" style="float: left; height: 23px; font-size: 12px; vertical-align:middle; padding-left: 5px; display: none;"><a style="color:#428bca;" href="javascript:void(0);" ><strong>Cancel</strong></a>
        </div>
        <div class="clearfix"></div>
        </div>
        ';
        }
        echo '</div>';
        ?>
        <div id="lp_pages_table" style="padding: 10px; border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;">
            <table class="display compact" width="100%" border="0" cellspacing="0" cellpadding="5" id="domains_list" style="margin-top:0px; border:1px solid #ddd;">
                <thead>
                    <tr>
                    <th style="text-align:center;"><input type="checkbox" name="chk_all" class="checkall" id="checkedAll"></th>
                    <th>URL</th>
                    <th>Type</th>
                    <th>ID</th>
                    <th>Campaign</th>
                    <th>Status</th>
                    </tr>
                </thead>
            </table>

        </div>
        </form>

Now I have this following jquery code snippet

<script>
$(document).bind('keyup', function(e) 
{
    if (e.keyCode === 13) 
    {
        alert($('#domain_name_url').is(':focus'));
        if($('#domain_name_url').is(':focus')) 
        {
            alert("focus was on replace");
            e.preventDefault();
            return false;
        }
    }
});
</script>

My issue is,

This would work fine, but the problem is that, since there is one more textbox and one more submit button, so whenever I am pressing enter, the form submits

So I want to restrict submission on something like this.

1. if current focus was on textbox #domain_name_url and the enter was pressed, then the form wont be submitted and the validation function will be called.

2. if the current focus was on textbox #search_domain and enter was pressed then the form will be submitted and validation wont be called.

In the jquery code snippet, the problem is

if($('#domain_name_url').is(':focus')) 
        {
// the flow is entering into this statement, but the preventDefault() seems not working
            alert("focus was on replace");
            e.preventDefault();
            return false;
        }

Answer 1

I'm not sure if this will work in your example, but give it a try:

<script>
$(document).bind('keyup', function(e) 
{
    if (e.keyCode === 13) 
    {
        e.preventDefault();
        alert($('#domain_name_url').is(':focus'));
        if($('#domain_name_url').not(':focus')) // note this has changed to  NOT(':focus')
        {
            $('#domain_name_url').parents("form").submit();
            //alert("focus was on replace");
            //return false;
        }
    }
});
</script>

you may also need to bind to the keydown event rather than keyup

Answer 2

You probably have to stop every time the execution of the submit button:

$(".blue_button").click(function(e) {
    validate();
    e.preventDefault();
});

and inside this event call the validate() function to get data and everything else you need with your data.

That's why submit button, in html, always submit data to the action url of the tag, but not if you stop manually the execution of the submit action. Then in js you have to call the validate() function that checks if user has pressed the enter button and so on.

Answer 3

To prevent sending form, you should prevent onsubmit event. Eg:

$('form[name="m_domain"]').on('submit', function(event){
    event.preventDefault();
    return false;
}