Question

I have two forms on a single page and I want to submit the forms individually using the corresponding links from a query mobile navbar. The forms submit fine but the content portion of the page goes blank (I believe the jquery mobile ajax is trying to transition to a page that is not specified). Is there a way to stop it trying to transition and just submit the form data?

HTML:

<div class="ui-grid-a">
            <div class="ui-block-a">
            <form name="adminform" id="adminform">
                  <legend>Administrator</legend>

                  <input type="text" name="user_id" id="user_id" value="<?php echo $user_data['user_id'];?>" />

                  <label for="first_name">First name*:</label>
                  <input type="text" name="first_name" id="first_name" value="<?php echo $user_data['first_name'];?>" placeholder="First name" />

                  <label for="last_name">Last Name*:</label>
                  <input type="text" name="last_name" id="last_name" value="<?php echo $user_data['last_name'];?>" placeholder="Last Name" />

                  <label for="email">E-Mail*:</label>
                  <input type="email" name="email" id="email" value="<?php echo $user_data['email'];?>" placeholder="E-Mail" />

            </form>

            </div><!--end block a-->
            <div class="ui-block-b">
              <form name="companyform" id="companyform" action="" method="post">

                  <legend>Billing Address</legend>

                  <!--<label for="companyid">Company Id:</label>-->
                  <input type="hidden" name="companyid" id="companyid" value="<?php echo $company_data['company_id'];?>" />

                  <label for="company_name">Company Name*:</label>
                  <input type="text" name="company_name" id="company_name" value="<?php echo $company_data['company_name'];?>" />

                  <label for="company_website">Website:</label>
                  <input type="text" name="company_website" id="company_website" value="<?php echo $company_data['company_website'];?>" />

                  <label for="company_address">Address*:</label>
                  <input type="text" name="company_address" id="company_address" value="<?php echo $company_data['company_address'];?>" />

                  <label for="company_suite">Suite:</label>
                  <input type="text" name="company_suite" id="company_suite" value="<?php echo $company_data['company_suite'];?>" />

                  <label for="company_city">City*:</label>
                  <input type="text" name="company_city" id="company_city" value="<?php echo $company_data['company_city'];?>" />

                  <label for="company_state">State*:</label>
                  <input type="text" name="company_state" id="company_state" value="<?php echo $company_data['company_state'];?>" />

                  <label for="company_postal_code">Postal Code*:</label>
                  <input type="text" name="company_postal_code" id="company_postal_code" value="<?php echo $company_data['company_postal_code'];?>" />

                  <label for="company_telephone">Telephone*:</label>
                  <input type="text" name="company_telephone" id="company_telephone" value="<?php echo $company_data['company_telephone'];?>" />

                  <label for="company_fax">Fax:</label>
                  <input type="text" name="company_fax" id="company_fax" value="<?php echo $company_data['company_fax'];?>" />

              </form>

              <div id="companyupdatestatus"></div>
            </div><!--end block b-->  
        </div><!--end grid a-->

        <div data-role="navbar">
            <ul>
                <li><a id="updateadmin" data-icon="check" data-ajax="false">Update Admin</a></li>
                <li><a id="updatecompany" data-icon="check" data-ajax="false">Update Company Info</a></li>
                <li><a href="passwordchangeform.php" data-role="button" data-icon="check" data-transition="pop" data-rel="dialog">Change Password</a></li>
            </ul>
        </div>        

       </div>

Javascript:

$('#updatecompany').click(function() {
var company = $('#companyform').serializeArray();
/*$('#companyupdatestatus').html(company);*/

$.ajax({
type: "POST",
url: 'companyupdate.php',
data: company,
success: function(company) {
    $('#companyupdatestatus').html(company);
}   

}); 
});

Thanks in advanced, would really appreciate the help!!! Adam

Answer 1

Try return false like this:

  $('#updatecompany').click(function() {
       var company = $('#companyform').serializeArray();
       /*$('#companyupdatestatus').html(company);*/

    $.ajax({
    type: "POST",
    url: 'companyupdate.php',
    data: company,
    success: function(company) {
        $('#companyupdatestatus').html(company);
    }   

    }); 

         return false;
    });