Hello Im fairly new to Javascript/JQuery. I wanted to autoformat a number while it was being inputted.
I used a Jquery plugin for the same -
<script src="simple.money.format.js"></script>
And calling it using
$('.money').simpleMoneyFormat();
I want it be reformatted when I hit a button (Save) so that the value can be saved into the database.
Any help would be much appreciated.
You can use the submit event handler, the code will be called when the user hits the submit button, and before the data sent to the server
$('#your-form-id').submit(function () {
$('.money').simpleMoneyFormat();
});
See the following fiddle: https://jsfiddle.net/EliteSystemer/wv3sxo3j/
$('button').on("click", function() { //Submit
var m = $('.money').val(); //Get input value
m = m.replace(/,/g, ""); //Remove commas
$('.money').val(m); //Update input value
...send to server
});
Related
In my form/textarea I use an emoji picker (https://github.com/mervick/emojionearea).
Idea is once user write some text/put some emoji and send this (“Submit”) the form will reset/clear.
My ongoing code: https://jsfiddle.net/byrvfwah/
Emoji picker works well, but I can’t clear the form after submit.
At the same time, without function which initiates an emoji-picker, the submit button clear the form: https://jsfiddle.net/9bps7f6v/3/
There are a lot of method to reset form and I already tried a lot of them:
$("#mytextarea").val('');
$('#mytextarea').trigger("reset");
$(‘#mytextarea').text('');
$("#mytextarea").reset();
$("#myform")[0].reset();
The explanations from the author of emoji-picker script not very useful:
https://github.com/mervick/emojionearea/issues/9
https://github.com/mervick/emojionearea/issues/54
https://github.com/mervick/emojionearea/issues/373
Any ideas how I can clear my form on submit?
You need to target emojionarea-editor class div and replace with empty '' string.
$(document).ready(function() {
$("#mytextarea").emojioneArea({
pickerPosition: "bottom"
});
});
$(document).ready(function() {
$("#mybutton").click(function(e) {
e.preventDefault();
$(".emojionearea-editor").html('');
});
});
It is not being cleaned because it is not a data input element rather it is a div. Inspecting the item you can see:
And has a class, so you can just clear the html:
$(document).ready(function() {
$("#mybutton").click(function(e) {
e.preventDefault();
$(".emojionearea-editor").html('');
});
});
$("#mytextarea").data("emojioneArea").setText('');
Found this plugin for a weekly calendar:
https://www.jqueryscript.net/demo/Week-Picker-Bootstrap-4/
I am trying to retrieve the week value from an INPUT within a DIV id called "weekpicker1".
For the time being, I'm just trying to print it in the console.
I have tried the following:
<script type="text/javascript">
var weekpicker = $("#weekpicker1").weekpicker();
$(weekpicker).on('blur', function()
{
console.log('hello');
});
</script>
The input doesn't have an ID. I can't figure out how to access it. As you can see, I tried to use the "blur" handler. "Click" doesn't work either.
What can I do to grab the value of the INPUT within the DIV called "weekpicker1"?
This exact use case is documented on the plugin's Github repository.
$(function() {
var weekpicker = $("#weekpicker1").weekpicker();
console.log(weekpicker.getWeek());
console.log(weekpicker.getYear());
var inputField = weekpicker.find("input");
inputField.datetimepicker().on("dp.change", function() {
console.log(weekpicker.getWeek());
console.log(weekpicker.getYear());
})
});
I am using Parsley to validate some forms and the server is doing same validations in his side. When a constraint fail on the server, i call this function do add the error on parsley:
var invalidField = $('[name="' + param.target + '"]').parsley();
window.ParsleyUI.addError(invalidField, "remoteError_"+param.target, param.message);
Param.target is the name of the input field to invalidate. The error shown as li under the field, but for the parent form messages are disabled
<form id="ricarica_telefonica_form"
data-parsley-errors-messages-disabled>
<script>
$(function(){
$('#ricarica_telefonica_form').parsley();
});
</script>
Additionally i am using a custom message visualization to show errors trought bootstrap tooltip
window.Parsley.on('field:error', function() { some code });
but my code is not being executed (it works when a field is invalidated trought parsley). What am I doing wrong? Is the method .addError managed correctly by parsley?
I found the solution, the right way is
var instance = $('#field').parsley();
instance.trigger('field-error',instance,{message:errorMessage});
In this way the event is catch by the function that manage tooltip, where i use message attribute. The form is still valid for parsley, but at least i reached my scope.
I have been trying to get a checkbox to be checked once a user clicks on another field however unable to get any further.
Here is the javascript I am using at the moment
document.getElementById("Freelance_Sig").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("Freelance_Sig").innerHTML = document.myform.Freelance_signed.checked = true;
}
As my form is not html i wonder if thats the issue.
Any help would be appreciated, thank you.
My original answer was for interacting with HTML. You'll need to use something a little different for use with PDF.
Something like this should work:
this.getField('Freelance_Sig').onclick = function() { myFunction(); }
function myFunction() {
this.getField('Freelance_signed').value = 'On';
}
There are some good resources on using javascript with PDFs here:
Basic PDF JavaScripting
Getting and setting checkbox values in a PDF
Hope that helps!
I have this JavaScript that counts character from a textarea which is the code below:
$(document).ready(function () {
$('#count').click(counter);
$('#txtComment').change(counter);
$('#txtComment').keydown(counter);
$('#txtComment').keypress(counter);
$('#txtComment').keyup(counter);
$('#txtComment').blur(counter);
$('#txtComment').focus(counter);
$('#txtComment').focusin(counter);
$('#txtComment').focusout(counter);
$('#txtComment').mousedown(counter);
$('#txtComment').mouseenter(counter);
$('#txtComment').show(counter);
$('#txtComment').load(counter);
$('#txtComment').submit(counter);
$('#btnSubmit').click(counter);
});
counter = function () {
var value = $('#txtComment').val();
if (value.length == 0) {
$('#wordCount').html(0);
$('#totalChars').html(0);
$('#charCount').html(0); // I only use this one.
$('#charCountNoSpace').html(0);
return;
}
var regex = /\s+/gi;
var wordCount = value.trim().replace(regex, ' ').split(' ').length;
var totalChars = value.length;
var charCount = value.trim().length; // I only use this one.
var charCountNoSpace = value.replace(regex, '').length;
$('#wordCount').html(wordCount);
$('#totalChars').html(totalChars);
$('#charCount').html(charCount); // I only use this one.
$('#charCountNoSpace').html(charCountNoSpace);
};
And I am displaying the counter in a span:
<span id="totalChars">0</span> characters
When the Page is not PostBack, the count seems to be working fine. On the page, I have a submit button which is an ASP.NET control that runs at server. When it comes to the scenario where the button is clicked, the page is doing a PostBack, after submitting the data, It will display the same page, retains the content of the textarea, but, the count sets back to zero even when there are value/s on the textarea. As you can see, I have already put almost all of possible events the form should do.
I need to count the characters and display it after PostBack.
The counter function is not firing until the textarea is interacted with. After binding all your events, call the counter function manually (IE counter();) in your $(document).ready function and the code will be run at page load.
You might think the load event would do this for you, but load only works with elements that have a URL associated with them (like images and scripts, see the documentation for more information).
You can use jQuery Cookies Plug-in to persist, like:
to save: jQuery.cookie("cookie_counter", totalChars);
to get: var totalChars = jQuery.cookie("cookie_counter");
You can change the span tag to run at the server, so the ViewState will persiste the value after the postback.
<span id="totalChars" runat="server">0</span> characters
on the submit button "OnClientClick" event you can call a javascript function.
save the character count in the session.
after page loads completely assign the value stored in session to the span.
you should create a session variable before only to make use of it.
eg. function setVar(){ alert("Testing"); <% Session("TempVar") = "setVar Test" %> }