I want to make the pop-up alert to confirm deleting a comment. But the problem is it deletes the first comment, even if I select any other comments. What I mean is if I have 3 comments of the same user and when I click the delete button on the 3rd or 2nd comment it deletes the 1st comment. I don't know the reason. Without the use of confirm alert, deleting works fine. My attempt is below.
<form id="deletcomment" class="delete-form" action="/home/<%=home._id%>/comments/<%=comment._id%>?_method=DELETE" method="POST">
<!--<input class="btn btn-xs btn-danger" type="submit" value="Delete Comment">-->
<-- if i use the above with out onclick event it works with out problem -->
<input class= "btn btn-xs btn-danger" type="button" onclick="myFunctioncommnt()" value="Delete Comment">
</form>
<script>
function myFunctioncommnt(){
if(confirm("Are you sure you want to Delete it?")){
document.getElementById("deletcomment").submit();
}
}
</script>
router.delete("/:comment_id", middleware.checkCommentOwnership,function(req,res){
//find by id and delete
Comment.findByIdAndRemove(req.params.comment_id, function(err){
if(err){
res.redirect("back")
}else{
req.flash("success", "Comment Deleted")
res.redirect("/home/"+req.params.id);
}
})
})
i just find an answer to my question for the above. I guess it will be helpful to those of you who are in similar problem like me.
The problem is, we need to assign a unique id to the form so 'document.getElementById' can find the specific comment from database that we want to delete.
<form id="<%=comment._id%>" class="delete-form" action="/home/<%=home._id%>/comments/<%=comment._id%>?_method=DELETE" method="POST">
<input class= "btn btn-xs btn-danger" type="button" onclick="myFunctioncommnt('<%=comment._id%>')" value="Delete Comment">
</form>
<script>
function myFunctioncommnt(id){
if(confirm("Are you sure you want to Delete it?")){
document.getElementById(id).submit();
}
}
</script>
Related
Using laravel, I have a list of user details obtained from the database with edit and remove button at the end of each record. When i click the remove button, the particular record gets removed, but when I added a modal such that when the delete button is clicked, a model appears, but adding the functionality to the confirmation "Yes" button of the modal got tricky, as it deleted the first record no matter which user i need to delete. How do i get the clicked user to be deleted when the modal button is clicked?
I have tried to assign each button the id of the current row.
#foreach($admins as $admin)
<tr>
<td>{{$admin['id']}}</td>
<td>{{$admin['name']}}</td>
<td>{{$admin['email']}}</td>
<td>
<button type="button" class="btn btn-block btn-danger" data- toggle="modal" data-target="#modal-danger" id="{{$admin['id']}}">Remove</button>
</td>
</tr>
#endforeach
<!-- The Button From Modal -->
<button type="button" class="btn btn-outline">Remove</button>
I did it with JS. You can show your modal with $('#modal-danger').modal('show')
So you can add a onClick event to your button that fill a hidden input.
Your button that make the modal appear:
<button type="button" class="btn btn-block btn-danger" onClick="showModal({{$admin['id']}})">Remove</button>
Your hidden input (somewhere in your page):
<input type="hidden" id="id-to-remove" />
Your button from modal:
<button type="button" class="btn btn-outline" onclick="realRemove()">Remove</button>
Your JS:
function showModal(id) {
$('#id-to-remove').val(id);
$('#modal-danger').modal('show');
}
function realRemove() {
$('#modal-danger').modal('hide');
var id = $('#id-to-remove').val();
alert('You can now remove ID ' + id + ' from your database!');
}
This should work
Since you are using jQuery you can use attribute method to get the current clicked user id and pass to the URL:
Your HTML button class
$(".my-btn").click(function(){
var userID = $(this).attr("data-user");
if (typeof userID !== typeof undefined && userID !== false) {
if(userID.length > 0) {
// There you go the user id of the clicked user
console.log(userID);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="my-btn" data-user="user_id_123">Remove</button>
I suggest you to refer the following URL for your further questions regarding attr method https://www.w3schools.com/jquery/html_attr.asp
make a global variable to store the target id and assingn the id to it when clicking the button on the target row
<button type="button" class="btn btn-block btn-danger" data- toggle="modal" data-target="#modal-danger" id="{{$admin['id']}}" onClick=someFunction({{$admin['id']}})>Remove</button>
target_id=0
function someFunction(id) {
target_id=id
}
and then make another function to trigger when clicking on the remove button in the model and from that access the global variable for the target id
that's the optimal way to do it as I can think cheers.
function next() {
return confirm('Are you sure you want to Foo');
}
<form method="GET" action="/foo" onsubmit="next()">
<input type="hidden" name="delete" value={{$foo} />
<button class="btn btn-warning" type="submit"> Foo</button>
</form>
I am trying to give the user the option to verify that they want to submit the form. Currently the above code shows the popup confirm box, but the form will submit regardless if 'ok' or 'cancel' is clicked.
My understanding of 'confirm()' was that if 'cancel' was clicked the form submission would be stopped.
How does Confirm() work, and how is it best implemented?
You need to precede the next() with a return in your HTML:
function next() {
return confirm('Are you sure you want to Foo');
}
<form method="GET" action="/foo" onsubmit="return next()">
<input type="hidden" name="delete" value={{$foo} />
<button class="btn btn-warning" type="submit"> Foo</button>
</form>
To stop submission, the onsubmit handler needs to return false, which you missed. confirm() returns false when the modal is dismissed.
I have a form which has two Options, Submit and Overwrite.
It looks like this:
[ INPUT FIELD ]
[Submit] [Overwrite]
The Overwrite Button only appears when the value already is in the Database.
The HTML Code is:
<input type="text" name="target" id="target">
<button id="submit" name="submit" type="submit" class="btn btn-primary"> Submit </button>
<button id="overwrite" name="overwrite" type="submit" class="btn btn-primary"> Overwrite </button>
The JS Code is:
if(!problem){
data = "submit=save";
jQuery('#overwrite').click(function(){
$(this).toggleClass('selected');
if( $(this).hasClass('selected') ){
data+="&overwrite=on";
console.log( "overwrite=on" );
}
});
sendToBean(href, data);
jQuery.each(langs, function(i, lang){
sendToBean(href, data);
});
}
}
If I only have the Submit button, it works.
If I only have the Overwrite button, it works.
But if I have both, the Overwrite button wont work anymore.
Does anyone have a solution to this problem?
put retrun false in the anonymous callback function will do the trick. since you declare that the button is a submit button
if(!problem){
data = "submit=save";
jQuery('#overwrite').click(function(){
$(this).toggleClass('selected');
if( $(this).hasClass('selected') ){
data+="&overwrite=on";
console.log( "overwrite=on" );
}
return false;
});
sendToBean(href, data);
jQuery.each(langs, function(i, lang){
sendToBean(href, data);
});
}
}
When you click the submit button the page will be refreshed and the overwrite will return to the initial format and the selected will disappear, Try to change the input type to button :
<button id="overwrite" name="overwrite" type="button" class="btn btn-primary"> Overwrite </button>
Hope this helps.
Remove <input type=""> for Overwrite button you may use <button>
Overwrite
<input type="text" name="target" id="target">
<input type="submit" id="btnSubmit" name="btnSubmit" class="btn btn-primary" value="submit"/>
<input type="submit" id="btnOverwrite" name="btnOverwrite" class="btn btn-primary" value="Overwrite"/>
$(document).ready(function(){
$("#btnOverwrite").unbind("click").bind("click",function(e){
e.preventDefault();
alert("overwrite called");
});
$("#btnSubmit").unbind("click").bind("click",function(e){
e.preventDefault();
alert("submit called");
})
});
Review fiddle
https://jsfiddle.net/dipakchavda2912/rwdakvyg/
I have html page that has several button. I want to update my database column when I click a button.
In index.html
<form action="db.php" method="post">
<button type="submit" id="1_y" class="btn btn-success">1.Lambayı Yeşil Yak</button>
<button type="submit" id="1_k" class="btn btn-danger">1.Lambayı Kırmızı Yak</button></form>
And it looks like that
http://prntscr.com/fa5eba
My db table Webtek
http://prntscr.com/fa5ffl
What I want is to update 'birinci_lamba' to 1 when 1_y is clicked and update 'birinci_lamba' again to 0 when 1_k is clicked.
So, what should be my db.php page ? Or any other advise to do that ?
You use a from-tag, so you should use <input.. instead of <button... You seem to use bootstrap and <input class="btn btn-danger" /> should also work.
Then, you need to give your inputs a name attribute:
<form action="db.php" method="post">
<input type="submit" name="1_y" id="1_y" class="btn btn-success">1.Lambayı Yeşil Yak />
<input type="submit" name="1_k" id="1_k" class="btn btn-danger">1.Lambayı Kırmızı Yak /></form>
Your db.php file could look like that:
<?php
if(isset($_POST['1_k'])){
mysql_query("..."); //your update-query
} elseif(isset($_POST['1_y']){
mysql_query("..."); //your other update-query
}
i have a contact form with jQuery validate method. When the user click on "Reset"-button the hole contact form should be go to the initial state.
This is the button looks like:
<form class="form" method="post" action="" name="contact" id="contact">
<button type="button" id="cancel" class="btn btn-danger btn-lg">Reset</button>
</form>
And the JS-Code in my "$(document).ready-function" is:
$('#cancel').on('click', function () {
$("#contact").validate().resetForm();
$("#contact").removeClass("has-error");
});
Problem: The error Text and the Input-fields will be deleted. But the red border (.has-error) or the green border (.has-success) don't be deleted.
i've created an JSFiddle for you:
http://jsfiddle.net/bBc8c/1/
One Button is clear the input text, the other is delete the error Messages.
I need a Button which reset both (Text, Error Message) and the main problem the red border from the has-* classes.
One Button is declared as type=submit the other is type=button:
<button type="button" id="cancel" class="btn btn-danger btn-lg">Reset 1</button>
<button type="reset" id="cancel2" class="btn btn-danger btn-lg">Reset 2</button>
Your Updated Fiddle
JS Update
$('#cancel').on('click', function () {
$("#contact").validate().resetForm();
$("#contact").find('.has-error').removeClass("has-error");
$("#contact").find('.has-success').removeClass("has-success");
$('#contact').find('.form-control-feedback').remove()
});
For bootstrapvalidator, this might useful when the form being display via bootstrap modal,
$("#editModal").on('hidden.bs.modal', function () {
//Removing the error elements from the from-group
$('.form-group').removeClass('has-error has-feedback');
$('.form-group').find('small.help-block').hide();
$('.form-group').find('i.form-control-feedback').hide();
});
#J Santosh answer worked for Bootstrap 3, great work.
For Bootstrap 4 I have done following changes:
$('#cancel').on('click', function () {
$("#contact").validate().resetForm();
$("#contact").find('.is-invalid').removeClass("is-invalid");
$("#contact").find('.is-valid').removeClass("is-valid");
$("#contact").find('.invalid-feedback').remove();
$("#contact").find('.valid-feedback').remove();
});
Simply have to change the class names. Hope it helps!
I'd reset the form by just using an input[type="reset"] (no jQuery required)
<form class="form" method="post" action="" name="contact" id="contact">
<input type="reset" class="btn btn-danger btn-lg" />
</form>
i've created an JSFiddle for you:
http://jsfiddle.net/bBc8c/1/
One Button is clear the input text, the other is delete the error Messages.
I need a Button which reset both (Text, Error Message) and the main problem the red border from the has-* classes.
One Button is declared as type=submit the other is type=button:
<button type="button" id="cancel" class="btn btn-danger btn-lg">Reset 1</button>
<button type="reset" id="cancel2" class="btn btn-danger btn-lg">Reset 2</button>
Regards