Develop Reference

Trigger the textarea message when clicking on href link

I am trying to customize intercom plugin on a wordpress website.
I need to trigger a message when clicking on a href link, (so simulate enter key on the textarea).
This is code used:
jQuery('body').on('click', '.start-chat-btn-advice', function () {
var e = jQuery.Event("keydown");
e.which = 13;
jQuery("textarea").trigger(e);
});

Sounds like you need
<form action="chat" id="form1">
<div id="container">
<textarea id="chatText"></text>
Click
</div>
</form>
$(function() {
$("#container").on("click",".start-chat-btn-advice",submitIt);
$("#chatText").on("keydown",function(e) {
if (e.which==13) submitIt()
});
});

Toggle focus onclick of a button

I have a form inside a panel. The panel opens and closes when a button is clicked. When the panel is opened [i.e., with the click of the button], I want to focus on the first input text box in the form which is inside the panel. When I close the panel [i.e., again clicking on the same button], I want to loose the focus from that input box.
So, in simple words, I want to toggle the focus on the text input box when the onclick event happens on the button.
I gave the input text box an id and did the following:
<input type="text" id="code" placeholder="enter code">
Inside the script tag:
$('.button-element').click(function(){ $('#code').focus();});
This makes the focus on the input text box but I want to remove the focus when I click the button again.
Please help me with this.
Thank you.

You could use this snippet (tested on chrome):
var $code = $('#code');
$('.button-element').on('mousedown', function () {
$(this).data('inputFocused', $code.is(":focus"));
}).click(function () {
if ($(this).data('inputFocused')) {
$code.blur();
} else {
$code.focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="code" placeholder="enter code">
<button class="button-element">btn</button>

I know this is a very late answer, but here is a solution which adds a new jQuery method.
You can add this to top of your $.onready:
jQuery.fn.toggleFocus = function(){
if (this.is(":focus")) {
this.blur();
} else {
this.focus();
}
}
Usage:
$(".button-element").toggleFocus()

Try this:
var code = $('#code');
$('.button-element').click(function() {
if(code.is(":focus")) {
code.blur();
} else {
code.focus();
}
});

You can update your code to following
var focusInput = true;
$('.button-element').click(function(){
if(focusInput) {
$('#code').focus();
} else {
$('#code').blur();
}
focusInput = !focusInput;
});

Since you have not given any HTML,you need to change the code according to your need.
$('.button-element').click(function()
{
if($("#ID-of-panel").is(':visible'))
$('#code').blur();
else
$('#code').focus();
});

TinyMCE textarea doesn't respond to 'onkeydown' event

I'm trying to trigger a warning when the user leaves the page if he had made changes in the textareas of TinyMCE plugin.
There's my code. It works if i use a normal form textarea, but it doesn't go well when i add the 'onkeydown' event to the tiny's textarea. I've comproved the value of 'cambios' with the browser console and i saw that it never changes its value.
JS:
var cambios = false;
function change_cambios (){ cambios = true;}
window.onbeforeunload = function() {
if(cambios) {
return confirm('Are you sure?');
}
return;
}
HTML:
<form id="formulari" method="post" >
<textarea id="ap0sub2" name="area" onkeydown="change_cambios();"></textarea>
</form>
That works perfectly if i use it within tinyMCE plugin. But when i include the text editor, the value of 'cambios' remains to false.
Any ideas?
Thanks a lot!

tinyMCE hides the textarea and presents its own contenteditable div so there is no keydown happening on your textarea. You'll need to add the event listener using tinyMCE's methods when you initialise it:
tinyMCE.init({
selector:'#ap0sub2',
setup : function(ed) {
ed.on('keydown', function(e) {
cambios = true;
console.log(cambios);
});
}
});
Working demo: http://jsfiddle.net/exmdg7ha/

In tinyMce 4:
tinymce.init({
...
init_instance_callback: function (editor) {
editor.on('keyDown', function (e) {
console.log('Element clicked:', e.target.nodeName);
});
}
});
https://www.tinymce.com/docs/advanced/events/

jQuery toggle search button

I use old javascript code to flip my search button from search to searching in my forms as follows
<div id="search_clickable"> <input class="search" type="submit" value="search" onClick="javascript:flipSearchButton();"></div>
<div id="search_unclickable" class="hidden"><img src="/assets/img/searching.png" alt=""></div>
My javascript function is
function flipSearchButton()
{
document.getElementById('search_clickable').style.display = 'none';
document.getElementById('search_unclickable').style.display = 'block';
}
How to I achieve this with jQuery?

function flipSearchButton(){
$('#search_clickable').hide(); // or - $('#search_clickable').toggle();
$('#search_unclickable').show(); // or - $('#search_unclickable').toggle();
}
And stop using inline javascript:
$('.search').click(flipSearchButton);
Note that your search button is of type submit (?!) so it will submit the form, You probably want to change the type to button or return false from the callback:
function flipSearchButton(){
$('#search_clickable').hide();
$('#search_unclickable').show();
return false;
}

include jquery:
<script type="text/javascript" src="jquery.js"></script>
then:
function flipSearchButton()
{
$('#search_clickable').hide();
$('#search_unclickable').show();
}

i thought something like this:
$("#search_clickable").click(function() {
$("#search_clickable").hide();
$("#search_unclickable").show();
});
if you wanna toggle this element, use toggle() instead of hide() and show().

You can also consider to use fade effect to improve user experience
function flipSearchButton()
{
$('#search_unclickable').fadeIn('slow', function() {
// Animation complete
});
$('#search_clickable').fadeOut('slow', function() {
// Animation complete
});
};

You don't even need a separate function:
$("input[type=submit").click(function() {
$("#search_clickable").hide();
$("#search_unclickable").show();
});
Or use the id/class of the submit button if you want to on a specific button:
$(".search").click(function() {
$("#search_clickable").hide();
$("#search_unclickable").show();
});

Please refer below URL for toggle Div.
Check below Working Demos
As per your question : Demo1
As per my opinion : Demo2
Thanks

properly disabling the submit button

this is the code that I use to disable the button
$("#btnSubmit").attr('disabled', 'disabled')
$("#btnSubmit").disabled = true;
and this is my submit button
<input id="btnSubmit" class="grayButtonBlueText" type="submit" value="Submit" />
the button although looks disabled, you can still click on it.. This is tested with FF 3.0 and IE6
Am I doing something wrong here?

If it's a real form, ie not javascript event handled, this should work.
If you're handling the button with an onClick event, you'll find it probably still triggers. If you are doing that, you'll do better just to set a variable in your JS like buttonDisabled and check that var when you handle the onClick event.
Otherwise try
$(yourButton).attr("disabled", "true");
And if after all of that, you're still getting nowhere, you can manually "break" the button using jquery (this is getting serious now):
$(submitButton).click(function(ev) {
ev.stopPropagation();
ev.preventDefault();
});
That should stop the button acting like a button.

Depending on how the form submission is handled you might also need to remove any click handlers and/or add one that aborts the submission.
$('#btnSubmit').unbind('click').click( function() { return false; } );
You'd have to add the click handler's again when (if) you re-enable the button.

You need to process Back/Prev button into browser.
Example bellow
1) Create form.js:
(function($) {
$.enhanceFormsBehaviour = function() {
$('form').enhanceBehaviour();
}
$.fn.enhanceBehaviour = function() {
return this.each(function() {
var submits = $(this).find(':submit');
submits.click(function() {
var hidden = document.createElement('input');
hidden.type = 'hidden';
hidden.name = this.name;
hidden.value = this.value;
this.parentNode.insertBefore(hidden, this)
});
$(this).submit(function() {
submits.attr("disabled", "disabled");
});
$(window).unload(function() {
submits.removeAttr("disabled");
})
});
}
})(jQuery);
2) Add to your HTML:
<script type="text/javascript">
$(document).ready(function(){
$('#contact_frm ).enhanceBehaviour();
});
</script>
<form id="contact_frm" method="post" action="/contact">
<input type="submit" value="Send" name="doSend" />
</form>
Done :)