使用jquery移动导航栏链接提交表单

时间:2012-11-18 22:08:09

标签: javascript jquery-mobile

我在一个页面上有两个表单,我想使用查询移动导航栏中的相应链接单独提交表单。表单提交正常,但页面的内容部分变为空白(我相信jquery mobile ajax正试图转换到未指定的页面)。有没有办法阻止它尝试转换并只提交表单数据?

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);
}   

}); 
});

先谢谢了,非常感谢帮助!!!亚当

1 个答案:

答案 0 :(得分:1)

请尝试return false,如下所示:

  $('#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;
    });