I've spent days getting this far and I hope someone can help me on the final stretch. I have a form inside a modal that I wish to post to a php file with ajax. I'm a novice with jquery and I'm trying to figure out how to get these two bits of jquery to work together.
See fiddle
The Form and Modal
<a href="#my_modal" data-toggle="modal" data-review="submit this information to database">Open Modal</a>
<div class="modal" id="my_modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal header</h4>
</div>
<div class="modal-body">
<form>
<p>some content</p>
<input type="text" name="review" value=""/>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
The Jquery
//Variable is passed to modal
$('#my_modal').on('show.bs.modal', function(e) {
var review = $(e.relatedTarget).data('review');
$(e.currentTarget).find('input[name="review"]').val(review);
});
//Now post my form with the following ajax code when Modal Submit button is pressed.
$.post('insert.php', {review: review},
function(data){
$('#myModal').modal('hide');
$("#message").html(data);
$("#message").fadeIn(500);
$("#message").fadeOut(2500);
});
Change type of button to buttton
instead of submit and add an identifier so you can control the click using javascript click event, replace :
<button type="submit" class="btn btn-primary">Save changes</button>
by :
<button type="button" class="btn btn-primary" id='submit-form'>Save changes</button>
And add click evetn to the button :
$('body').on('#submit-form', 'click', function(){
var review = $('input[name="review"]').val();
$.post('insert.php', {review: review},
function(data){
$('#myModal').modal('hide');
$("#message").html(data);
$("#message").fadeIn(500);
$("#message").fadeOut(2500);
});
})
Keep the modal-footer and modal-body inside the form tag. Add id to submit button and then make ajax call.
$("#submitButtonId").on("click",function(){
//Ajax call here
}
please use the js code like this.
$('.btn').click(function(e) {
var review = $(this).find("input[name=review]").val();
var request = $.ajax({
url: "insert.php",
method: "POST",
data: { review: review },
dataType: "html"
});
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.