Bruce Bruce - 3 months ago 9
Ajax Question

Prevent onclick jquery function to allow an onclick ajax submission

<div class="alert alert-success" id="1">
<form style="height:42px;" lpformnum="1">
<h4 class="pull-left" style="text-transform: capitalize; width:11%;">
Title:
</h4>
<textarea class="pull-left" style="margin-right:1%;">
This is a msg
</textarea>
<h4 class="pull-left" style="text-transform: capitalize; width:6%;">
Title 2:
</h4>
<input class="pull-left" style="width:8%; margin-right:1%; " type="text"
id="myid" value=""
/>
<button class="pull-left btn btn-primary" id="update" value="1" type="submit"
style="width:7%; margin-right:1%;" name="credits">Submit</button>
<button class="pull-left btn btn-danger" type="submit" id="delete" style="width:6%"
value="" name="credits">Delete</button>
</form>
</div>


<script>
$(".alert").click(function(){
$(this).fadeOut(300, function(){
var checkValues = $(this).attr('id');
var checkPost = $(this).children("textarea").text();
var checkType = $(this).children("span").attr('class');
var checkName = $(this).children("span").attr('class');
$.ajax({
url: '/se/test.php',
type: 'post',
data: {id:checkValues, posti:checkPost, types:checkType, name:checkName},
success:function(data){
$(this).remove(); // location.reload();
}
});
});
});
</script>


The above code works great, but I need to allow the buttons inside the div.alert to submit the form via ajax on click.

<script>
$('button[id=update]').click(function(){
e.preventDefault();
var checkValues = $(this).children("#update").val();
var checkCred = $(this).children("#ucredits").val();
var checkPost = $(this).children("textarea").text();
var checkType = $(this).children("i").text();
$.ajax({
type: "POST",
url: "update_social_cred.php",
data: { id: checkValues, credits: checkCred, text: checkPost, type: checkType },
success:function(result) {
}
});
});
</script>


However I have tried this many different ways, and either the button doesn't submit the form, or it attempts to submit the form via a standard submission instead of via ajax.

How do I prevent the .alert click function thus allowing the buttons to submit the forms via ajax?

Answer
$('.alert.alert-success').on('click', 'button[id=update]', function(e) {
        e.preventDefault();
        e.stopPropagation();
        var checkValues = $(this).children("#update").val();
        var checkCred = $(this).children("#ucredits").val();
        var checkPost = $(this).children("textarea").text();
        var checkType = $(this).children("i").text();
        $.ajax({
            type: "POST",
            url: "update_social_cred.php",
            data: { id: checkValues, credits: checkCred, text: checkPost, type: checkType  },
            success:function(result) {
            }
        });
    });

The difference is the click handler...

$('.alert.alert-success').on('click', 'button[id=update]', function(e) {

target the dynamic element, .alert.alert-success, then bind an event .on('click', then the item the event is bound to - button[id-update]. Then pass the event itself to the function - function(e)

This will target the button click and your e.preventDefault(); will actually work. the e in e.preventDefault is the event. You weren't passing it through the function, so the submit button was doing what a submit button does.

Comments