I have the next submit buttons inside a post form:
<div class="col-md-4 col-sm-4">
<button type="submit" class="btn btn-default btn-block" value="True" id="subButton" name="is_attending" onclick="FbotonOn()">Yes, i'm in!</button>
</div>
<div class="col-md-4 col-sm-4">
<button type="submit" class="btn btn-default btn-block" value="False" id="subButton" name="is_attending" onclick="FbotonOf()">Sorry, i can't!</button>
</div>
And this jQuery:
$('#post-form').on('submit', function(e) {
e.preventDefault();
$("#subButton").click(function(e){
e.preventDefault();
var my_button = $(this).val();
$.ajax({
type : "POST",
url: "{% url 'guest_update' %}",
data: {
guest_id : "{{ guest.guest_id }}",
invites_names : $('#name').val(),
phone_no : $('#phone').val(),
best_wishes : $('#wishes').val(),
with_partner : $('#myCheck:checked').val(),
partner_name : $('#partner_name').val(),
is_attending : my_button,
csrfmiddlewaretoken: '{{ csrf_token }}',
dataType: "json",
},
success: function(data){
$('output').html(data.msg)
},
failure: function() {
}
});
});
});
Every time I try to submit a form and press the first button, it works, but the second one, it doesn't. I've tried also without the click function but if a press the second button, I receive the first one value. Where am I wrong?
UPDATE1 Swati was right. The same id for the buttons was the issue.
<div class="col-md-4 col-sm-4">
<button type="submit" class="btn btn-default btn-block" value="True" id="subButton" name="is_attending" onclick="FbotonOn()">Yes, i'm in!</button>
</div>
<div class="col-md-4 col-sm-4">
<button type="submit" class="btn btn-default btn-block" value="False" id="subButton2" name="is_attending" onclick="FbotonOf()">Sorry, i can't!</button>
</div>