html 通过AJAX提交HTML Bootstrap表单

Posted 2021-05-11

$('.submitButton').on('click',function(){
    $('#peddlerForm').trigger('submit');	
});

$('#peddlerForm').on('submit',function(event){

    var form = $(this);

    // Visual cue to user, also prevents multiple submission
    $('.submitButton').button('loading');

    // Clear error messages
    $('#formError, .errorMessage').addClass('hidden');
    $('.has-error').removeClass('has-error');

    // Validate form fields
    var error = false;
    var focused = false;
    
    var myField = $('#myField').val();
    if (myField == '')
    {
        $('#fieldContainer').addClass('has-error');
        $('#fieldError').html('Please enter a value.').removeClass('hidden');
        $('#myField').focus();
        focused = true;
        error = true;
    }
    
    var myField2 = $('#myField2').val();
    if (myField2 == '')
    {
        $('#field2Container').addClass('has-error');
        $('#field2Error').html('Please enter a value.').removeClass('hidden');
        if (focused == false)
        {
            $('#myField2').focus();
        }
        error = true;
    }
    
    // Get parameters
    var postData = $(this).serializeArray();
    
    // Add parameters and massage data
    postData.push({name:'gender', value:gender});
    postData.push({name:'yard', value:yard});
    postData.push({name:'scale', value:scale});

    addNewPeddler(postData).done(function(response){
        
        // 'response' should be a JSON string in one of the following formats:
        //      {"success":"true"}
        //      {"success":"false","error":{"message":"Test message","field":"TestField"}}
        
        if (response.success == true){
            window.location = redirect;
        } else {
            $('#'+response.error.field+'Container').addClass('has-error');
            $('#'+response.error.field+'Error').html(response.error.message).removeClass('hidden');
            $('#'+response.error.field).focus();
        }
    }).always(function(){
        $('.submitButton').button('reset');    		
    });
    
    // Prevent default form submission
    event.preventDefault();
});

function addNewPeddler(postData)
{
    return $.ajax({
        url:'peddler/add.php',
        data:postData
        type:'POST',
        dataType:'json'
    });
}

<div class="row">
    <div class="col-xs-12">
    	<form class="form-horizontal" role="form" id="myForm">
		
		<div class="alert alert-danger hidden" id="formError"></div>
		
		<div class="form-group" id="fieldContainer">
			<label for="field" class="col-sm-2 control-label">My Field</label>
			<div class="col-sm-3">
				<input class="form-control" id="myField" name="myField" type="text" />
				<span id="fieldError" class="help-block hidden errorMessage"></span>
			</div>
		</div>
		
		<div class="form-group" id="field2Container">
			<label for="field2" class="col-sm-2 control-label">My Field 2</label>
			<div class="col-sm-3">
				<input class="form-control" id="myField2" name="myField2" type="text" />
				<span id="field2Error" class="help-block hidden errorMessage"></span>
			</div>
		</div>
		
		<button type="button" class="submitButton">Submit</button>
    	</form>
    	
    </div>
    
</div>

<!-- Optional: If you want a button to reside outside of the form -->
<button type="button" class="submitButton">Submit</button>