How to change submit value on click - javascript

I have a simple form
HTML
<form action="#Url.Action("Controler", "FES")" method="POST">
<button name="upload" type="submit" id="upload-fes-btn-control" class="btn btn-danger">Contrôler</button>
</form>
The request time when submitting may sometimes be long (more than 30s, bc of business logic on big file...)
I want to change the value of the button after user has clicked on it. The objective is to display a font-awesome loader instead of the initial text (<i class="fas fa-spinner fa-pulse"></i>). There is the jQuery snippet I use to achieve this...
jQuery
$("#upload-fes-btn-control").click(function () {
$(this).attr('value', '<i class="fas fa-spinner fa-pulse"></i>');
});
I'm facing an error due to this code in my Controller
A potentially dangerous Request.Form value was detected from the client
Controller
if (Request.Form["upload"] != null)
{
//Logic with ViewModel...
}
How can I change the text displayed in the button from text to fa image loader without throwing that error ?

use this code $(this).html('<i class="fa fa-spinner fa-pulse"></i>');
$("#upload-fes-btn-control").click(function (e) {
e.preventDefault();
$(this).html('<i class="fa fa-spinner fa-pulse"></i>');
//example after page load
setTimeout(function(){
$("#upload-fes-btn-control").html('');
$("#upload-fes-btn-control").html('Contrôler');
}, 5000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<form action="#Url.Action("Controler", "FES")" method="POST">
<button name="upload" type="submit" id="upload-fes-btn-control" class="btn btn-danger">Contrôler</button>
</form>

Related

Alter text in Button after Ajax call

I'm hitting some trouble in trying to change the text in a button after a user clicks on the wishlist link. The Ajax call is working successfully right now and the data is updated correctly in the DB, currently the function displays a notification pop up in the browser when a user clicks on wishlist, but I would like to change the "wishlist" part of the button to "Added to wishlist" after a successful submission.
EDIT:
I have added $("#btn span").text("Added to wishlist");
But it's still not working.
function wish($p_id){
var w_id = $p_id;
var email = $(".wish").data("user");
if(email != 0){
$.ajax({
url:"function.php",
method:"post",
data:{w_id:w_id,email:email},
success: function($wish){
if($wish > 0){
notif({
msg:"Product Already Added to wishlist!!!",
type:"warning",
width:330,
height:40,
timeout:1000,
})
}else{
$("#btn span").text("Added to wishlist");
notif({
msg:"Added to wishlist",
type:"success",
width:330,
height:40,
timeout:1000,
})
}
}
})
}
}
and the HTML part
<a href='$add_wish' id="btn"class='btn btn-default add-to-cart wish' data-user='$s_email' onclick='wish($id)'>
<i class='glyphicon glyphicon-heart'></i> Wishlist
</a>
The issue is that in this code:
$("#btn span").text("Added to wishlist");
your selector is missing the target. It tries to find an element with the ID of "btn", which is fine, but then it tries to look for a <span> element inside that, which doesn't exist.
It's trivial to resolve of course by wrapping the text in the expected <span>:
$("#btn span").text("Added to wishlist");
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href='$add_wish' id="btn"class='btn btn-default add-to-cart wish' data-user='$s_email' onclick='wish($id)'>
<i class='glyphicon glyphicon-heart'></i>
<span>Wishlist</span>
</a>
N.B. Note that writing simply
$("#btn").text("Added to wishlist")
is undesirable because it will erase the <i> containing the icon.
Demo (for comparison with above):
$("#btn").text("Added to wishlist");
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href='$add_wish' id="btn"class='btn btn-default add-to-cart wish' data-user='$s_email' onclick='wish($id)'>
<i class='glyphicon glyphicon-heart'></i>
Wishlist
</a>
Relevant documentation: https://api.jquery.com/category/selectors/
Identify your button by adding an id and put your text inside a span
<a href='$add_wish' id='my_button' class='btn btn-default add-to-cart wish' data-user='$s_email' onclick='wish($id)'>
<i class='glyphicon glyphicon-heart'></i> <span>Wishlist</span>
</a>
You have to change the innerText of the span, just add the following code after the product is added :
document.querySelector('#my_button span').innerText = 'Added to wishlist';

Toggle Button to change text, icon and show search bar

I do have a header with a navigation bar. The navigation includes a search button that each time is clicked should change the word from "Search" to "Close Search" and open the search bar initially not displayed below the navigation bar. I tried different ways with .html, .text but the text in the search button sometimes does work and others doesn't. I tried different approaches, but it is not consistent. Every time I click on the "Search" button, it should change the text and open and close the search bar, not just once. I tried using toggle() as well. I paste here below the code for button and search bar.
Also, the search button should display a search icon, defined by the class "btn-search-icon", which disappears once the searchbar closes and the button has the text "close search". The search bar below has a "search" field, submit button and a cancel button. The cancel button should remove the value in the search field. This step works but it reloads the page and as a consequence it closes the search bar, while it should stay open.
Any ideas? I appreciate any help.
HTML:
<button class="bg-btn btn-search btn-search-icon" id="searchBtnBar" type="submit" value="true">Search</button>
div class="container search-bar-container">
<form id="bgSearchBar">
<input type="search" name="searchfield" value="Search" class="searchField">
<button class="bgsearchbtn">Search <i class="fa-solid fa-arrow-right"></i></button>
<button class="bgcancelhbtn"></button>
</form>
</div>
JQuery:
$('#bgSearchBar').hide();
$("#searchBtnBar").click(function () {
$(this).fadeOut(function () {
$(this).text(($(this).text() == 'Search') ? 'Close Search' : 'Search').fadeIn();
})
$(this).toggleClass('btn-search-icon');
$('#bgSearchBar').fadeIn();
})
$(".bgcancelhbtn").on("click", function(event) {
$(".searchField").val("");
});
I tried to make minimal changes so it would work.
$('#bgSearchBar').hide();
$("#searchBtnBar").click(function() {
var flag = ($(this).text() == 'Search');
$(this).fadeOut(function() {
$(this).text(flag ? 'Close Search' : 'Search').fadeIn();
})
$(this).toggleClass('btn-search-icon');
if (flag) {
$('#bgSearchBar').fadeIn();
} else {
$('#bgSearchBar').fadeOut();
}
})
$(".bgcancelhbtn").on("click", function(event) {
$(".searchField").val("");
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<button class="bg-btn btn-search btn-search-icon" id="searchBtnBar">Search</button>
<div class="container search-bar-container">
<form id="bgSearchBar">
<input type="search" name="searchfield" value="Search" class="searchField">
<button class="bgsearchbtn">Search <i class="fa-solid fa-arrow-right"></i></button>
<button class="bgcancelhbtn" onclick="this.closest('form').reset(); return false">Cancel</button>
</form>
</div>

How to install Facebook pixel event code in a php button?

So I have a simple PHP share button fo facebook and I want to add pixel event code in it that tracks the button when it's clicked
Here is the code for the button:
<div class="row" style="margin-top: 10px;">
<div class="col-md-5 col-md-offset-1">
<a target="_blank" class="btn btn-block btn-social c-btn-square c-btn-uppercase btn-md btn-facebook" href="{{$facebook_link}}">
<i class="fab fa-facebook"></i> Share on Facebook
Where should I exactly put the code for the event which is:
<script>
fbq('track', 'SubmitApplication');
</script>
Welcome. You must handle event when button click.
Try this:
<script type="text/javascript">
var facebookButton = document.querySelector('a.btn-facebook');
facebookButton.addEventListener("click", () => {
fbq('track', 'SubmitApplication');
});
</script>

Change attach icon into loading icon while attaching file

I want to change the attach icon into loading and then change it into check icon after attaching the file.
<button class="btn btn-primary fileinput-button" data-tooltip="tooltip" data-original-title="Import">
<i class="fa fa-paperclip" aria-hidden="true"></i>
<input id="fileupload" class="fileupload" type="file" name="files">
</button>
$("button").on('click', function() {
var $this = $(this).find(".fa");
$this.removeClass("fa-paperclip").addClass("fa-circle-o-notch fa-spin");
setTimeout(function() {// or do your ajax stuff here
$this.removeClass("fa-circle-o-notch fa-spin").addClass('fa-paperclip');
},5000);
});
if your using a class to show an icon here's what you can do
$("button").click(function(){
$("YourElementHere").addClass("fa fa-loading");//just a sample
//then if you have ajax here on Success function include below code
//$("YourElementHere").removeClass("fa fa-loading"); //remove the class for loading
//$("YourElementHere").addClass("fa fa-check"); //add the icon check
});

Bootstrap change button value

I'm having trouble changing a button value in bootstrap. I can change it using jQuery, but i'm changing it from a modal dialog. I looked elsewhere on SO but I couldn't find anything that seemed to match my specific issue?
Steps:
Click button. Change button text on main html form. Upon clicking the
button it changes the text, closes the modal, and then immediately
the text changes back to what it was originally. It should just change the text and stay that way, obviously.
$("#validate-rv-button").click(function () {
$("#review-history-validate").val("Review History");
});
HTML
<input id="review-history-validate" type="button" class="rvButtons btn btn-outline-warning btn-sm" data-toggle="modal" data-target="#review-history" value="Validate" />
Any help would be much appreciated.
Another way to do it with <button></button>
<button id="review-history-validate" type="button" class="rvButtons btn btn-outline-warning btn-sm" data-toggle="modal" data-target="#review-history" />Validate</button>
in jquery:
$("#validate-rv-button").click(function () {
$("#review-history-validate").text("Review History");
});
I believe you got the naming wrong.
This works:
$("#review-history-validate").click(function () {
document.getElementById("review-history-validate").value = "My value";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="review-history-validate" type="button" class="rvButtons btn btn-outline-warning btn-sm" data-toggle="modal" data-target="#review-history" value="elo" />
Or jQuery only as your question:
$("#review-history-validate").click(function () {
$("#review-history-validate").val("My value");
});

Categories