Javascript Word Counter w/ enabled Disabled buttons - javascript

What I'm trying to do is;
-Right arrow disable until I start typing
-when I click that counts the words in the text box and image changes to the left arrow
-when I click the left arrow that restarts the progress.
Right now it doesn't really display the result it just shows that for a second and changes the image but auto restarts everything in a second and right arrow button is enabled all the time.
$(document).ready(function() {
$("input").click(function() {
var words = $.trim($("textarea").val()).split(" ");
document.getElementById("resultDiv").innerHTML = words.length;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wordcounter">
<form action="" method="get" name="frm" onSubmit="TextCount();">
<!--Text Area-->
<textarea id="mytext"></textarea><br/>
<!--Image Flipped Here-->
<input type="image" id="submit" src="imgs/arrow_button_metal_green_right_T.png" alt="Submit" onclick="document.getElementById('submit').src='imgs/arrow_button_metal_green_left_T.png'">
<br/>
<!--Result-->
<div id="resultDiv">0</div> Characters
</form>
</div>

You've configured your form to perform a GET request. When you click your input type="image" element, the form's submission event fires and performs the GET request to the page. Since there's no handler code for these requests, your page effectively goes through a "refresh" as you've noticed.
To prevent this behavior, capture the event object from the fired click event and use it to preventDefault() in your callback function:
$(document).ready(function() {
$("input").click(function(e) {
e.preventDefault();
var words = $.trim($("textarea").val()).split(" ");
document.getElementById("resultDiv").innerHTML = words.length;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wordcounter">
<form action="" method="get" name="frm" onSubmit="TextCount();">
<!--Text Area-->
<textarea id="mytext"></textarea><br/>
<!--Image Flipped Here-->
<input type="image" id="submit" src="imgs/arrow_button_metal_green_right_T.png" alt="Submit" onclick="document.getElementById('submit').src='imgs/arrow_button_metal_green_left_T.png'">
<br/>
<!--Result-->
<div id="resultDiv">0</div> Characters
</form>
</div>

Probably better off using focus instead of click, in case the user uses tab or something.
$(document).ready(function() {
$('input').blur(function () {
$('#submit').attr("disabled", "disabled");
});
$("input").focus(function () {
$('#submit').prop('disabled', false);
var words = $.trim($("textarea").val()).split(" ");
$("#resultDiv").innerHTML = words.length;
});
$("#submit").click(function(){
var imageSource = $(this).attr('src');
if(imageSource == "imgs/arrow_button_metal_green_left_T.png"){
$(this).attr("src","imgs/arrow_button_metal_green_right_T.png");
}else{
$(this).attr("src","imgs/arrow_button_metal_green_left_T.png");
}
});
});
You can get resultDiv easier with jQuery.

Related

disable click button on submit

I try to update this jquery script in pure js (with bootstrap 5). The goal is to not allow someone to click twice on the payment button. Sorry I am not very strong in js.
My goal is to have the same reaction that the jquery script.
I tried to follow the process on this page :
Disabling a button in vanilla JavaScript and in jQuery
Thank you
My current script
<form name="checkout_confirmation" action="http://............/Process" method="post" id="checkout_confirmation" role="form" onsubmit="return checkCheckBox(this)"><section class="checkout_confirmation" id="checkout_confirmation">
div class="text-end" id="process_button" class="processButton">
<button type="submit" data-button="payNow" class="btn btn-success">Confirmer la commande avec paiement</button> </div>
</div>
</form>
<script>
$('form[name="checkout_confirmation"]').submit(function() {
$('form[name="checkout_confirmation"] button[data-button="payNow"]').html('Confirm the payment').prop('disabled', true);
});
</script>
Now the script update
<script>
var button = document.getElementById('checkout_confirmation');
button.addEventListener('submit', function() {
alert('Confirm the payment');
});
button.disabled = false;
button.click(); // No output
button.prop("disabled", true);
</script>
setAttribute can be used in JavaScript to set the attribute of the button as disabled.
Element.setAttribute("disabled", true);
This can be used to disabled the button.
So when someone clicked on the submit button, you can disable the button till the data is processed.
Check the below demo code:
const btn = document.getElementById("submit-data");
btn.addEventListener("click", submitForm);
function submitForm(){
btn.setAttribute("disabled", true);
btn.innerText = "Submitting..";
let userName = document.getElementById("user-name").value;
console.log("Name: ", userName);
setTimeout(() => {
btn.removeAttribute("disabled");
btn.innerText = "Submit";
}, 3000);
}
<form type="POST">
<label for="user-name">Full Name</label>
<input type="text" id="user-name" placeholder="Your Full Name" />
<br /><br /><br />
<button id="submit-data">Submit</button>
</form>
You have two problems:
Submit events fire on form elements, not button elements.
getElementById gets an element by its id and neither your button nor your form has an id. (See this question).
Could you not use e.preventDefault() to stop the default behaviour of the button being pressed?
More can be read here: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Trigger script only when user press in submit button

I am executing a script through a function
<script language="javascript">
function showVariantDetail(str) {
url = "insurancemodel.php?ncvd=" + str;
getRequest(url, "txtVariantDetails");
}
</script>
The script is executing perfectly through
<div id="txtVariantDetails">
</div>
But i want the script to execute when the user press in submit button
<div class="search-box-left"></div>
<div class="search-box-right">
<input name="" type="submit" value="Calculate" class="red-btn" />
</div>
can anyone guide on how to ensure when only the user presses in submit button then the txtVariantDetails script to be processed only
Thanks
try jquery on click
$('#submitDemo').on("click",function() {
// your stuff
});
You can use click handler for the submit input.
$("input[type=submit]").on("click",function(event){
event.preventDefault();
showVariantDetail(str);
}
If you do not want to deal with jQuery:
let redButton = document.querySelector(".red-btn");
redButton.addEventListener("click",function(e){
e.preventDefault();
let buttonValue = redButton.value;
showVariantDetails(buttonValue);
});
Change Html Like below
<div class="search-box-left"></div>
<div class="search-box-right">
<input type="button" value="Calculate" class="red-btn" />
</div>
JS
<script language="javascript">
function showVariantDetail(str) {
url = "insurancemodel.php?ncvd=" + str;
getRequest(url, "txtVariantDetails");
}
$(document).on('click','.red-btn',function() {
// var str="" //get your string here
showVariantDetail(str)
});
</script>

loading screen appears after jquery alert

I'm trying to create a loading screen for it to appear when the form is being submitted, it works great except on Safari, the problem is that if you were to click enter or submit an alert appears but when you click okay for the alert to go away the loading appears because of the submit event and doesn't go away. I've tried numerous this but i cant seem to figure it out, i'm a beginner in jquery.
To summarize, on safari after alert, loading screen appears when it's not suppose too and doesn't go away.
Preferably I would like for the loading screen to appear only when the form is being submitted. or the alternative is for the loading screen not to show in a safari browser.
<script>
var form = document.getElementById('formID'); // form has to have ID: <form id="formID">
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('safari') != -1) {
if (ua.indexOf('chrome') > -1) {
} else {
form.noValidate = true;
form.addEventListener('submit', function(event) { /*listen for form submitting */
if (!event.target.checkValidity()) {
event.preventDefault(); /*dismiss the default functionality*/
alert('Please, fill the form before you submit'); /*error message*/
$("#formID").attr("id", "form");
$(".circularG1").addClass("active");
$(".circularbrg").addClass("active");
}
}, false);
}
}
</script>
<!--loading screen appears while form submit's-->
<script type="text/javascript">
$(document).ready(function() {
$('#formID').submit(function() {
var pass = true; //some validations
if (pass == false) {
return false;
$(".circularG1").addClass('active'); //hides loading if clicked
$(".circularbrg").addClass('active'); // hides loading if clicked
} else {
$(".circularG1, .active").removeClass('active'); //shows loading if clicked
$(".circularbrg, .active").removeClass('active'); // shows loading if clicked
}
});
});
</script>
<!--^--END--^-->
<!-- 3. Add this script for Function of Hamburger Menu -->
<script>
$(document).ready(function() {
$(".icon").on("click", function() {
$("header .nav ul").toggleClass("open", 200);
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<div class="circularG1 active">
<div id="circularG_1" class="circularG"></div>
<div id="circularG_2" class="circularG"></div>
<div id="circularG_3" class="circularG"></div>
<div id="circularG_4" class="circularG"></div>
<div id="circularG_5" class="circularG"></div>
<div id="circularG_6" class="circularG"></div>
<div id="circularG_7" class="circularG"></div>
<div id="circularG_8" class="circularG"></div>
</div>
<div class="circularbrg active"></div>
<form id="formID" class="Form" action="" method="post">
<input name="fname" type="text" placeholder="First Name" maxlength="50" min="2" required>
<input name="lname" type="text" placeholder="Last Name" maxlength="50" min="2" required>
<input type="submit" name="submit" class="submit">
</form>
The best way to resolve this issue is to remove the alert line altogether and use a different method. For example, add a div inside your form html:
<div id="form-message"></div>
Then in your jQuery, replace the alert line with:
$('#form-message').text('Please, fill the form before you submit');
This is better in terms of usability as actual alerts are rarely (if ever) used on websites these days.
Hope this helps!

Disabled button on click with jquery mobile

html:
<script src="http://zurb.com/playground/javascripts/plugins/jquery.textchange.min.js"></script>
<form>
<input type="text" name="comment" id="comment" placeholder="Comment" maxlength="140" value=""/>
<div id="charactersLeft"></div>
<input type="submit" id="commentButton" data-icon="edit" data-inline="true" data-mini="true" data-theme="b" value="Send" disabled="disabled"/>
</form>
<div id="actionList">
</div>
js:
$('#comment').bind('hastext', function () {
$('#commentButton').button('enable');
});
$('#comment').bind('notext', function () {
$('#commentButton').button('disable');
});
$('#comment').bind('textchange', function (event, previousText) {
$('#charactersLeft').html( 140 - parseInt($(this).val().length) );
});
$('#commentButton').click(
function(){
$('#actionList').prepend('<p class="item">' + $('input[name=comment]').val().trim() + '</p>');
$('#commentForm').each (function(){ this.reset(); });
//document.getElementById('commentForm').reset();
$(this).button('disable');
}
);
On Fiddle its works another, that on my machine. So, test local. The problem is: when I write a comment, than I click on the button, comment apears in #actionList, the button blocked. Nice. But. If I want to write a new comment, the button will be disabled. I have text in input, but I cant click button. I deleted my new text in input, and than I can write something and button finally enabled.
Its very strange, how to fix it? Thanks.
I added the line, to remove comment once posted:
$('#comment').val("");
I also replaced your hastext and notext functions with this code, added in the textchange function:
var tb_value = this.value;
if (tb_value == "") {
$('#commentButton').button('disable');
} else {
$('#commentButton').button('enable');
}
See the Fiddle.

Need JQuery to stop repeating for every button thats clicked

The basics of the functions work, but for every cancel button thats clicked, the next button will add that number of clicks to it. For example if a user clicks a cancel button once, then next time a different button with a different id is clicked, firebug shows the page that contains the form (page2) to load that many times, instead of once. This all generated dynamically, so there may be up to 10 of these div's on the parent page. What should happen is:
user clicks the readonly textbox on the parent page
onfocus empties that div from parent page and loads the child page
3.form from the child page is in the readonly's textbox space now
user either submits a comment or cancels
either action should put the readonly textbox back in the page
(up to this point, this all works)
when pressing another div to leave a comment that page should only load once, not as many times from clicking the previous buttons.
In the 1st page I have:
<head>
<script type="text/javascript">
$(document).ready(function(){
var ajaxInProgress = false;
$(function(){
if (ajaxInProgress) return;
$('.ce').focus(function(){
var cid = this.id;
$('#comfield'+cid).empty();
$('#comfield'+cid).load('content_comment.php?id=<%=intmemberid%>&cid=' + cid);
});
});
</script>
</head>
<body>
<div id="comform"
<div id="comfield2">
<input class="ce" id="2" type="text" value="Write a comment..." readonly="readonly" />
</div>
</div>
<div id="comdata2"></div>
<div id="comform"
<div id="comfield3">
<input class="ce" id="3" type="text" value="Write a comment..." readonly="readonly" />
</div>
</div>
<div id="comdata3"></div>
</body>
In page 2 I have
<script type="text/javascript">
$(document).ready(function() {
document.commentform2.comment.focus();
$("#cancelcomment2").click(function(){
$('#comfield2').empty();
$('#comfield2').html('<input class="ce" id="2" type="text" value="Write a comment..." readonly="readonly" />');
var ajaxInProgress = false;
$(function(){
$('.ce').focus(function(){
if (ajaxInProgress) return;
var cid = this.id;
$('#comfield'+cid).empty();
$('#comfield'+cid).load('content_comment.php?id=55&cid=' + cid);
});
});
});
$("#submitcomment").click(function(){
$('#formcomment').ajaxForm(function (data, textStatus){
$('#formcomment').clearForm();
$('#comfield2').empty();
$('#comfield2').html('<input class="ce" id="2" type="text" value="Write a comment..." readonly="readonly" />');
$('#comdata2').append(data).fadeIn(700);
var ajaxInProgress = false;
$(function(){
if (ajaxInProgress) return;
$('.ce').focus(function(){
var cid = this.id;
$('#comfield'+cid).empty();
$('#comfield'+cid).load('content_comment.php?id=55&cid=' + cid);
});
});
});
});
});
</script>
<form id="formcomment">
<textarea id="commenttext2>" name="comment" class="commentarea"></textarea>
<input type="submit" id="submitcomment" value="comment />
<button id="cancelcomment2">Cancel</button>
</form>
This may not be the "best" way to do it, but it will work.
replace all occurences of
$('.ce').focus(function(){
with
$('.ce').unbind("focus").focus(function(){
in both scripts.
The better way would be event delegation, though that will take more changes to the code.

Categories