Clear the form/textarea after submit (emoji-picker with jquery) - javascript

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('');

Related

Focus specific 'id' after submit action

I want to focus on specific id (ex. using $('#a')) after submit.
There is nothing special with my code yet.
My javascript code is
function get_info(id){
$(user_id).submit();
$('#a).focus();
};
After submit, it should focus on where id='a'.
But after submit window focus on id='a' and reset the page.
I tried using
function get_info(id){
$(user_id).submit(function(e){
e.preventDefault();
$('#a').focus();
});
};
But this code make program worse. I think it stops performing submit.
Can anyone help me?
As Chris's comment says you couldn't focus on the element simply by using $('#a').focus(); after the submit since the page will be redirected/refreshed.
You need to use cookies or local storage, here a suggested sample using local storage like :
function get_info(id) {
localStorage.setItem('focusItem', '#a');
$(user_id).submit();
};
Then in the ready function, you could add :
$(function(){
var focusItem = localStorage.getItem('focusItem');
if( focusItem != null ){
$(focusItem).focus();
localStorage.removeItem('focusItem');
}
});
function SetFocus(){
$("#FocusingID").focus();}
/***********another way **********************//*
$("#submitbtnId").click(function(){
//your submession and other task;
$("#FocusingID2").focus();
});
*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=text id=FocusingID>
<button type=submit onclick="SetFocus();">click</button>

How to reformat an auto formatted number using JQuery

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
});

Object expected error

My site is working perfectly in all browsers except the IE.
The error box is prompted when the page is load in IE with the error msg below:
Line: 227
Error: Object expected
when i start debugging, the error is from here below at the first line.
$().ready(function()
{
// Hide all elements with .hideOnSubmit class when parent form is submit
$('form').submit(function()
{
$(this).find('.hideOnSubmit').hide();
});
});
Can anyone advice? it is really annoying to prompt that message on every page
============== EDIT ===============
I have tried the advice below
$(document).ready(function($)
{
// Hide all elements with .hideOnSubmit class when parent form is submit
$('form').submit(function()
{
$(this).find('.hideOnSubmit').hide();
});
});
OR
jquery(function($)
{
// Hide all elements with .hideOnSubmit class when parent form is submit
$('form').submit(function()
{
$(this).find('.hideOnSubmit').hide();
});
});
But both also give me the same error.
Either use
$(document).ready(function() { … } );
or
jQuery(function($) { … } );
Does your form have a control with a name or id iof submit? If so, it is shaddowing the submit method of the form.
Change it to something else, like "submitButton", or if you don't need to reference it or post it with the form, don't give it a name or id at all.
Try this.
jQuery(function($) {
$('form').submit(function() {
var elm = $(this).find('.hideOnSubmit');
if (elm.length) {
elm.hide();
}
});
});

Input text clear when I try to submit for a search

Hello I have the following problem. I the site http://www.telefonkoll.se when I enter a number in the search and press the button then the text clears automatically and the result page return me all the results. If I don't use the jquery code it works correctly.
My jQuery code is this:
$("document").ready(function() {
$("#mod_search_searchword").attr("value","Sök telefonnummer här");
});
$("#mod_search_searchword").live('focus', function (event) {
$("#mod_search_searchword").focus(function() {
$(this).val("");
});
});
$("#mod_search_searchword").live('blur', function (event) {
$("#mod_search_searchword").blur(function() {
if ($(this).val() == ""){
$(this).val("Sök telefonnummer här"); }
});
});
What I want to do with the above code is to clear the current text when the user click there. If it write something to still there, if not to return the initial text. It looks to work correctly but when I try to submit the data something wrong obviously happen. I don't know if it's the code or something I don't know.
Avoid reinventing the wheel. Use one of the many jQuery watermark plugins available.

jQuery show an element on hover only if it's already hidden

I am pretty new to jQuery and I am trying, but failing, so far to make a form element with a class of .topbardropdownmenu to be displayed when the user hovers over a button with a class of .menuitemtools. Once the user hovers over the button the .menuitemtools I don't want the form to be rehovered if it is already displaying hence the if statment to check it's display property is none. At the moment this script works but everytime you hover over the button .menuitemtools the form is rehovered which creates an annoying flashing. Once the form is displayed I don't want .menuitemtools to do anything and I want the form to dissappear when the mouseleaves the form.
Hopefully all that's clear and I'm not far off? Thanks very much for looking at this.
$(document).ready(function () {
$('.topbardropdownmenu').hide();
if ($('.topbardropdownmenu').css('display') == 'none') {
$('.menuitemtools').hover(function () {
$('.topbardropdownmenu').fadeIn('slow');
});
}
$('.topbardropdownmenu').mouseleave(function () {
$('.topbardropdownmenu').fadeOut('slow');
});
});
$(document).ready(function () {
$('.topbardropdownmenu').hide();
$('.menuitemtools').mouseover(function() {
if(!$('.topbardropdownmenu:visible').length)
{
$('.topbardropdownmenu').fadeIn('slow');
}
});
$('.topbardropdownmenu').mouseleave(function() {
$('.topbardropdownmenu').fadeOut('slow')
});
});

Categories