Develop Reference

Form submit when button with font awesome icon is clicked

Form properly gets submitted with proper functionalities, but when clicked on font icon then it is not able to get the value and name from button...
<form onsubmit="handleSubmit(event)">
<div class="buttons">
<button name="super" value="12344321" type="submit" class="btn btn info"> Submit
<i class="fas fa-arrow-right"></i>
</button>
</div>
</form>
Here is my js code:
event.submitter.setAttribute('disabled', 'disabled');
let name= event.submitter.name;
console.log("name" +name);
let id = event.submitter.value;
console.log("id " +id);

findByIdAndRemove confirm pop up

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>

Disable/enable button using jquery

I have a button that will disable if a certain condition occurs. Its like when the order_status is Accepted then the button for Accept is disabled. Its same in the other buttons when the order_status is Pending then the Send button is disabled. How can I achieve that?
Whats happening right now is I can disable the button for ASD but when I change the #asd to #submitAccept it didn't disable the Accept button, how that's possible?
But for now, help me how can I achieve when the order_status is Accepted the Button for Accept is disabled. I hope you can help me guys with my prob, I don't know what to do. Really appreciate any help from you guys, Thanks!
Heres my code right now.
function viewOrder(order_id, order_id, user_id, order_date, order_time, order_deliveryCharge, order_totalAmount, address, coordinates, driver_number, order_status) {
document.getElementById("t_order_id").setAttribute("value", order_id);
document.getElementsByName("ORDER_ID_MODAL_2")[0].setAttribute("value", order_id);
document.getElementById("t_user_id").setAttribute("value", user_id);
document.getElementById("t_order_date").setAttribute("value", order_date);
document.getElementById("t_order_time").setAttribute("value", order_time);
document.getElementById("t_order_deliveryCharge").setAttribute("value", order_deliveryCharge);
document.getElementById("t_order_totalAmount").setAttribute("value", order_totalAmount);
document.getElementById("t_address").setAttribute("value", address);
document.getElementById("t_coordinates").setAttribute("value", coordinates);
document.getElementById("t_drivers_number").setAttribute("value", driver_number);
document.getElementById("t_order_status").setAttribute("value", order_status);
document.getElementById("ORDER_MODAL_ACCEPT").setAttribute("value", order_id);
document.getElementById("ORDER_MODAL_DELIVER").setAttribute("value", order_id);
document.getElementById("ORDER_MODAL_CANCEL").setAttribute("value", order_id);
$(document).on("click", "#asd", function () { // MY JQUERY
if ($("#t_order_status").val() == "Accepted") {
$("#asd").prop("disabled", true);
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="form-group">
<label for="order_status" class="col-sm-2 control-label" style="width:20%;">Order Status</label>
<input type="text" class="form-control" name="order_status" id="t_order_status" style="width:80%;" placeholder="" value="" required="required" readonly>
</div>
<button type="button" input style="background-color:#4CAF50;color:white;border-color:#000000;" name="submitDelivered" id="submitDelivered" class="btn btn-success" data-toggle="modal" data-target="#myDeliverModal" onclick="deliver('<?= $_POST['order_id'] ?>')" > Delivered </button>
<button type="button" input style="background-color:#0000FF;color:white;border-color:#000000;" name="submitAccept" id="submitAccept" class="btn btn-success" data-toggle="modal" data-target="#myAcceptModal" onclick="accept('<?= $_POST['order_id'] ?>')" > Accept </button>
<button type="button" style="background-color:#FFFF00;color:black;border-color:#000000;" class="btn btn-success" data-toggle="modal" data-target="#myDropdown" onclick="send('<?= $_POST['order_id'] ?>')"> Send </button>
<button type="button" input style="background-color:#f44336;color:white;border-color:#000000;" name="submitCancel" id="submitCancel" class="btn btn-success" data-toggle="modal" data-target="#myCancelModal" onclick="cancel('<?= $_POST['order_id'] ?>')">Cancel</button>
<button type="button" name="asd" id="asd" class="btn btn-primary" onclick="asd"> ASD </button>

Use the .disabled method and set it to true.
window.onload = function() {
if(document.getElementById("t_order_status").value == "Accepted") {
document.getElementById("asd").disabled = true;
}
}

How to add fontawesome spinner inside onclick?

So I have this code inside my php echo;
<input type="submit" value="Send Love" class="btn btn-primary" onclick="this.form.submit(); this.disabled=true; this.value=\'Sending Love…\';" />
As you can see the text will change onclick and the button will be disabled and the form will be submitted. But what i'm trying to do is add a fontawesome spinner besides Sending so the button will have a spinner when its being submitted. I tried adding it but it doesn't show up and it breaks the output of the code; I also tried using '\'\ like with the Sending but it still doesn't show up and the onclick functions are broken.
<input type="submit" value="Send Love" class="btn btn-primary" onclick="this.form.submit(); this.disabled=true; this.value=\'<i class="fa fa-spinner fa-spin"></i> Sending Love…\';" />
So anyone could help me fix this thing? Really want to add that spinner. Thanks in advance!

You have to take <button ... > for that. Try this:
<button type="submit" class="btn btn-primary" onclick="sendLove(this);" > Send Love</button>
<script>
function sendLove(this1)
{
//alert('asdasd');
this1.disabled=true;
this1.innerHTML='<i class="fa fa-spinner fa-spin"></i> Sending Love…';
}
</script>
Hello, here is full-fledged working example..
https://jsbin.com/bezomapeba/edit?html,js,console,output

Made it to work using Chay22's suggestion of using jquery click
Button:
<button type="submit" id="sendbtn" class="btn btn-primary">Send Love</button>`
Script:
$('#sendbtn').click(function(){
this.form.submit();
this.disabled=true;
this.innerHTML='<i class="fa fa-spinner fa-spin"></i> Sending Love…';
});

the problem is of browser's part, cos he think it html and handle it, try to do that with js, echo '<input type="submit" value="Send Love" class="btn btn-primary" onclick="this.form.submit(); this.disabled=true; this.value=\'<i class="fa fa-spinner fa-spin">Sending Love…</i>\';>';
JavaScript's way

Hope this is helpful and better. Add a div above your submit button
<div class="loading" style="display: none;"><i class="fa fa-spinner fa-spin"></i> Progressing …</div>
or add button like below
<button type="submit" class="btn btn-primary"><i style="display:none" class="fa fa-spinner fa-spin loading"></i> Send Love</button>
$(document).ready(function(){
$("#sendbtn").click(function(){ // your submit button id
var isValid = document.querySelector('#myform')
if (isValid.checkValidity())
$(".loading").show();
});
});

Smallest, lightweight, and reusable
We made a custom jQuery.fn:
jQuery.fn.extend({
spin: function () {
this.data("original-html", this.html());
var i = '<i class="fa fa-spinner fa-pulse fa-3x fa-fw" style="font-size:16px; margin-right:10px"></i>';
this.html(i + this.html());
this.attr("disabled", "disabled");
},
reset: function () {
this.html(this.data("original-html"));
this.attr("disabled", null);
}
});
This can be used as follows:
$("button").click(function () {
var b = $(this);
b.spin();
$.ajax({
url: "",
button: b,
success: function (result) {
// do something
b.reset();
}
});
});

Using $(this) with css class selectors in Jquery

I have below HTML to display and download tracks . What i need is to hide Play button , Download button and the share button when user clicks share button(what i really need is to show social media buttons after hiding the default buttons) .
<form action="index.php" method="post">
<div id="53">
Track Name :- <b>Get Low</b>
<br />By :- DJ perera
<br />
<button class="playback btn btn-primary btn-sm weezy"><i class="fa fa-play"></i> Play</button>
<audio src="../members/memberfiles/16/Get Low.mp3">
Your browser does not support HTML5 audio.
</audio>
<button class="btn btn-sm btn-success weezy" type="submit" name="dwn"><i class="fa fa-download"></i> Download MP3</button>
<button class="sharer btn btn-sm btn-danger weezy" type="button"><span class="fa fa-share-alt"></span> Share</button>
<br />
<input type="hidden" value="Get Low.mp3" name="file_name">
<input type="hidden" value="bWVtYmVyZmlsZXMvMTYvR2V0IExvdy5tcDM=" name="link">
</div>
</form>
<br>
<form action="index.php" method="post">
<div id="52">
Track Name :- <b>Eclips - Hardwell</b>
<br />By :- DJ perera
<br />
<button class="playback btn btn-primary btn-sm weezy"><i class="fa fa-play"></i> Play</button>
<audio src="../members/memberfiles/16/Eclips - Hardwell.mp3">
Your browser does not support HTML5 audio.
</audio>
<button class="btn btn-sm btn-success weezy" type="submit" name="dwn"><i class="fa fa-download"></i> Download MP3</button>
<button class="sharer btn btn-sm btn-danger weezy" type="button"><span class="fa fa-share-alt"></span> Share</button>
<br />
<input type="hidden" value="Eclips - Hardwell.mp3" name="file_name">
<input type="hidden" value="bWVtYmVyZmlsZXMvMTYvRWNsaXBzIC0gSGFyZHdlbGwubXAz" name="link">
</div>
</form>
<br>
<script type="text/javascript">
$(document).ready(function(){
$('.sharer').click(function(){
$('.weezy').slideUp();
});
});
</script>
i already have above js code to hide play , download and share buttons when a user clicks share button . The Problem is since im using css class selectors , when user press Share button it hide all the play buttons , download buttons and share buttons from the webpage . what i need to achieve is that when a user click share button i need to hide only buttons that belong into that form only .
i have already tried doing this . but it won't work
<script type="text/javascript">
$(document).ready(function(){
$('.sharer').click(function(){
$(this).$('.weezy').slideUp();
});
});
</script>
and
<script type="text/javascript">
$(document).ready(function(){
$('.sharer').click(function(){
$(this).find('.weezy').slideUp();
});
});
</script>
and this
<script type="text/javascript">
$(document).ready(function(){
$('.sharer').click(function(){
$('.weezy',this).slideUp();
});
});
</script>
Kindly point out what went wrong since im new to javascript . Thanks

Use .closest() to select the closest parent form element of the clicked element. From there, select the desired element within that form.
Example Here
$('.sharer').on('click', function () {
$(this).closest('form').find('.weezy').slideUp();
});