PHP-jQuery: Form with 2 buttons and 2 actions. Second Button is calling the actions of the first button
<p>I have a form with 2 actions and whenever I try to execute the second action, the first one gets called for some reason.</p>

<p>The first action is to search and populate the form with some data retrieved from a database. This part works.</p>

<p>The second actions is to submit the form after some additional data is manually entered into the form. For some reason, whenever I click on this second button, the function for the first button gets executed but not the second one.</p>

<p>I have each click function in separate scripts.</p>

<p><strong>First Function:</strong></p>

<pre><code>&lt;script&gt;
$('document').ready(function()
{
    $('#register-submit-btn').attr('disabled', 'disabled');
    $("#find-details-btn").click(function(){
     /* validation */
    $("#register-form").validate({
      rules:
      {
            id: {
            required: true,
            minlength: 11,
            },
            second_id: {
            required: true,
            minlength: 6,
            },
            enter_date: {
            required: true,
            },
       },
       messages:
       {
            id:{
                      required: "Message Here.",
                      minlength: "Message Here",
                     },
            second_id:{
                      required: "Message Here.",
                      minlength: "Message Here",
                     },
            enter_date:{
                      required: "Message Here.",
                     },
       },
       submitHandler: checkGetData
       });

   function checkGetData()
   {
        var data = $("#register-form").serialize();
        $.ajax({
        type : 'POST',
        url  : 'validate_get_data.php',
        data : data,
        cache: false,
        beforeSend: function()
        {
            $("#detailsmsg").fadeOut();
            $("#find-details-btn").html('&lt;img src="include/btn-ajax-loader.gif" /&gt; &amp;nbsp; Searching...');
            $('#find-details-btn').attr('disabled', 'disabled');
        },

        success :  function()
           {
                //some actions go here to populate data into proper fields.
           }
        });
        return false;
      } 
   });
});
&lt;/script&gt;
</code></pre>

<p><strong>second script</strong></p>

<pre><code>&lt;script&gt;
$('document').ready(function()
{
    $("#register-submit-btn").click(function(){

            var data = $("#register-form").serialize();

            $.ajax({
            type : 'POST',
            url  : 'update_data.php',
            data : data,
            cache: false,
            beforeSend: function()
            {
                $("#detailsmsg").fadeOut();
                $("#register-submit-btn").html('&lt;img src="include/btn-ajax-loader.gif" /&gt; &amp;nbsp; Sending...');
                $('#register-submit-btn').attr('disabled', 'disabled');
                $('#find-details-btn').attr('disabled', 'disabled');
            },
            success :  function(data)
               {
//Actions to display a success message after data is inserted goes here.
                    }
                });
                    return false;
            //}
        }
    });
});
&lt;/script&gt;
</code></pre>

<p>When in click on the register-submit-btn. What I get are the actions of the first script that should be triggered when I click on the find-details-btn. As a matter of fact, even the animation for the find-details-btn is executed when I click on the register-submit-btn.</p>

<p>Any ideas why the second button is working as if it was the first button?</p>

<p>Thanks in advance,</p>

<p><strong>EDIT: Added Form structure per request.</strong></p>

<pre><code>    &lt;form class="register-form" id="register-form" action="" method="POST"&gt;             
        &lt;div class="form-group"&gt;
            &lt;label class="control-label bold"&gt;ID&lt;/label&gt;
            &lt;input class="form-control placeholder-no-fix" type="text" maxlength="11" placeholder="Cedula Number" id="first_id" name="first_id" /&gt; 
        &lt;/div&gt;

        &lt;div class="form-actions"&gt;
        &lt;button type="submit" name="find-details-btn" id="find-details-btn" class="btn btn-success uppercase"&gt;Find Details&lt;/button&gt;
        &lt;/div&gt;

        &lt;div class="alert alert-danger display-hide" id="detailsmsg"&gt;
            &lt;!-- messages goes here --&gt;
        &lt;/div&gt;

        &lt;div id="details_found" class="hidden"&gt;
        &lt;p class="font-blue bold"&gt; Details Found &lt;/p&gt;
        &lt;div class="form-group"&gt;
            &lt;label class="control-label"&gt;Name&lt;/label&gt;
            &lt;input class="form-control placeholder-no-fix" type="text" value="" id="f_name" name="f_name" readonly /&gt; &lt;/div&gt;
            &lt;div class="form-group"&gt;
            &lt;label class="control-label"&gt;Second ID&lt;/label&gt;
            &lt;input class="form-control placeholder-no-fix" type="text" value="" id="second_id" name="second_id" readonly /&gt; 
        &lt;/div&gt;
        &lt;p class="font-blue bold"&gt; Enter your details below: &lt;/p&gt;
        &lt;div class="form-group"&gt;
            &lt;label class="control-label"&gt;Details 1&lt;/label&gt;
            &lt;input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="" id="details_1" name="details_1" /&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
            &lt;label class="control-label"&gt;Details 2&lt;/label&gt;
            &lt;input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="" id="details_2" name="details_2" /&gt; 
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
            &lt;label class="control-label"&gt;Details 3&lt;/label&gt;
            &lt;input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="" id="details_3" name="details_3" /&gt; 
        &lt;/div&gt;

        &lt;/div&gt;
        &lt;div class="form-actions"&gt;
            &lt;button type="button" id="register-back-btn" name="register-back-btn" class="btn green btn-outline"&gt;Back&lt;/button&gt;
            &lt;button type="submit" id="register-submit-btn" name="register-submit-btn" class="btn btn-success uppercase pull-right"&gt;Submit&lt;/button&gt;
        &lt;/div&gt;
    &lt;/form&gt;
</code></pre>