Develop Reference

calling an event before button check inside a view using jquery

i have view containing four radio button and two button.
i have written code on click of button , but i want to check condition of radio button before button click but not able to find any idea how to do
$(document).on("click", "#btncrtn", function (e) {
var optname="";
var checkedInput = $('input[name="ctype"]:checked').length;
if(checkedInput == 0) {
alert("Please Select one case type");
return;
}
else {
if ($('#opn').is(':checked')) {
optname="O";
$('#CaseIdC').hide();
}
if ($('#lit').is(':checked')) {
optname="L";
$('#CaseIdC').hide();
}
if ($('#cun').is(':checked')) {
optname="C";
$('#CaseIdC').hide();
}
if ($('#oth').is(':checked')) {
$('#CaseIdC').show();
optname="T";
if ($('#CaseIdtxt').val()=="")
{
alert("Please enter aims id");
return;
}
}
});
i want a radio button with id #oth to be checked apart from condition #btncrtn click
if ($('#oth').is(':checked')) {
$('#CaseIdC').show();
});
how to achieve it.

Use a preventdefault to get out of the loop after pressing Enter key

This is a complete revision of my initial question, all unnecessary resources and references were deleted
I am tying the same event listener to 2 different elements: a button and Enter key, and it looks like the following:
var funcelement = function(){
//function code
};
$('#buttonID').click(funcelement);
$('#inputID').keyup(function () {
if (event.which == 13) {
$('#buttonID').trigger('click');
}
})
What I am trying to do is to prevent propagation of the enter key press if focus is on the submit button(#buttonID) by using preventDefault().
So I tried various combinations to make it work. The following is the latest result on my attempts
$('#inputID').keyup(function () {
var hasfocus = $('#buttonID').is(':focus') || false;
if (event.which == 13) {
if (!hasfocus) {
event.preventDefault();
$('#buttonID').trigger('click');
//hasfocus = true;
}
else {
//event.preventDefault();
//$('#buttonID').trigger('click');
}
}
})
After I enter a text into an input box and press Enter key, a confirmation window with yes/cancel buttons pops up with focus on yes button. Once I press Enter again, another window confirming that changes were made pops up with Ok button focused on it. Once I press Enter again, everything I need is being made.
However, there is one problem: after the last step is done, I am going back to the if (!hasfocus) line.
How do I prevent that from happening? Once the stuff I need is done - I don't want to go into that line again.

You can pass a parameter to into the function and stop the propagation there like so:
var funcelement = function(event, wasTriggeredByEnterKey){
if (wasTriggeredByEnterKey && $('#buttonID').is(':focus')) {
event.stopPropagation;
}
//function code
};
$('#buttonID').click(funcelement);
$('#inputID').keyup(function () {
if (event.which == 13) {
$('#buttonID').trigger('click', [true]);
}
}
)
UPDATE
In order to answer your revised issue, you should use the "keydown" event rather than "keyup" when working with alerts. This is because alerts close with the "keydown" event but then you are still triggering the "keyup" event when you release the enter key. Simply change the one word like this:
$('#inputID').keydown(function () {
var hasfocus = $('#buttonID').is(':focus') || false;
if (event.which == 13) {
if (!hasfocus) {
event.preventDefault();
$('#buttonID').trigger('click');
//hasfocus = true;
}
else {
//event.preventDefault();
//$('#buttonID').trigger('click');
}
}
})

Make highlighted input field 'unhighlighted' when user starts typing

I made a simple form with javascript that highlights red fields if you click the "join" button and you leave a field blank.
Even after you fill it, until the "Join" button is pressed, it will continue to stay red. So instead of on click, I just want the highlight to be taken off once the user begins typing.
JSFiddle:
http://jsfiddle.net/LCBradley3k/xqcJS/6/
Javascript:
$(document).ready(function(){
/* setTimeout(function(){
$('.inputs').show("slide", { direction: "down" }, 1000);
}, 2000);
});*/
$('#join').click(function(){
var correct = true;
$('input[type="text"]').each(function(indx){
var $currentField = $(this);
if ($currentField.val() === ''){
$currentField.addClass('empty');
correct = false;
} else{
$currentField.removeClass('empty');
}
});
if (correct) {
$('#answer').html('Thank You!');
setTimeout(function(){
$('.inputs').hide("slide", { direction: "up" }, 1000);
}, 2000);
} else {
$('#answer').html('Please fill highlighted fields.') ;
}
});

Add a keyup handler on the form inputs to remove the class:
$('input[type="text"]').keyup(function (event) {
var $currentField = $(this);
if ($currentField.val() !== '') {
$currentField.removeClass('empty');
}
});
DEMO

Sure, just bind to keydown.
http://jsfiddle.net/xqcJS/7/
if ($currentField.val() === ''){
$currentField.addClass('empty');
correct = false;
$currentField.one('keydown',function(){
$currentField.removeClass('empty');
});

$('input[type="text"]').keydown(function() {
if ( $(this).val != "" )
$(this).removeClass('empty');
});

you can either use focus or use keyup.
$('input[type="text"]').keyup(function(e){
$(this).removeClass('empty');
})
You can replace keyup with focus if you want to use the focus since it won't trigger the event each time you type.

Add the following piece of code:
$('input[type="text"]').focus(function() {
$(this).removeClass('empty');
});
The class 'empty' will be removed when you focus in on field.

Show button if input is not empty

I am not much of a JavaScript guru, so I would need help with a simple code.
I have a button that clears the value of an input field.
I would like it (the button) to be hidden if input field is empty and vice versa (visible if there is text inside the input field).
The solution can be pure JavaScript or jQuery, it doesn't matter. The simpler, the better.

$("input").keyup(function () {
if ($(this).val()) {
$("button").show();
}
else {
$("button").hide();
}
});
$("button").click(function () {
$("input").val('');
$(this).hide();
});
http://jsfiddle.net/SVxbW/

if(!$('input').val()){
$('#button').hide();
}
else {
$('#button').show();
}
In it's simplest form ;)

to do this without jQuery (essentially the same thing others already did, just pure js). It's pretty simple, but I've also added a few comments.
<body>
<input type="text" id="YourTextBox" value="" />
<input type="button" id="YourButton" value="Click Me" />
<script type="text/javascript">
var textBox = null;
var button = null;
var textBox_Change = function(e) {
// just calls the function that sets the visibility
button_SetVisibility();
};
var button_SetVisibility = function() {
// simply check if the visibility is set to 'visible' AND textbox hasn't been filled
// if it's already visibile and the text is blank, hide it
if((button.style.visibility === 'visible') && (textBox.value === '')) {
button.style.visibility = 'hidden';
} else {
// show it otherwise
button.style.visibility = 'visible';
}
};
var button_Click = function(e) {
// absolutely not required, just to add more to the sample
// this will set the textbox to empty and call the function that sets the visibility
textBox.value = '';
button_SetVisibility();
};
// wrap the calls inside anonymous function
(function() {
// define the references for the textbox and button here
textBox = document.getElementById("YourTextBox");
button = document.getElementById("YourButton");
// some browsers start it off with empty, so we force it to be visible, that's why I'll be using only chrome for now on...
if('' === button.style.visibility) { button.style.visibility = 'visible'; }
// assign the event handlers for the change and click event
textBox.onchange = textBox_Change;
button.onclick = button_Click;
// initialize calling the function to set the button visibility
button_SetVisibility();
})();
</script>
</body>​
Note: I've written and tested this in IE9 and Chrome, make sure you test it in other browsers. Also, I've added this fiddle so you can see it working.

You can use $('selector').hide() to hide an element from view and $('selector').show() to display it again.
Even better, you can use $('selector').toggle() to have it show and hide without any custom logic.

First hide the button on page load:
jQuery(document).ready(function() {
jQuery("#myButton").hide();
});
Then attach an onChange handler, which will hide the button whenever the contents of the text-field are empty. Otherwise, it shows the button:
jQuery("#myText").change(function() {
if(this.value.replace(/\s/g, "") === "") {
jQuery("#myButton").hide();
} else {
jQuery("#myButton").show();
}
});
You will also need to hide the button after clearing the input:
jQuery("#myButton").click(function() {
jQuery("#myInput").val("");
jQuery(this).hide();
});

how to enable or disable a button on keypress event of a textbox in javascript

I created a TextBox :-
TextBox ID="TxtUname" onKeyPress="ENABLE_BTN()"
Now i wrote a function :-
script type="text/javascript"
window.onload = function() {
document.getElementById('SSAccept').disabled = true;
};
function ENABLE_BTN() {
var EN=document.getElementById('TxtUname').value;
if(EN=='') {
document.getElementById('SSAccept').disabled=true;
} else {
document.getElementById('SSAccept').disabled=false;
}
}
</script>
BUT STILL THE DISABLED BUTTON IS NOT GETTING ENABLED ON PRESSING ANY KEY IN THE TEXTBOX.
Can anyone tell me what i did wrong ?? Thanks in Advance
Dev..

onkeypress doesn't work in all browsers -> http://www.quirksmode.org/js/keys.html
onkeyup / onkeydown should be used ->
Working example : http://jsfiddle.net/KCBzk/
HTML :
<input id="TxtUname" value="" onkeydown="ENABLE_BTN()"/><br>
<button id="SSAccept">Some test</button>
Javascript:
window.onload = function() {
document.getElementById('SSAccept').disabled = true;
}
function ENABLE_BTN() {
var EN=document.getElementById('TxtUname').value;
if(EN=='') {
document.getElementById('SSAccept').disabled=true;
} else {
document.getElementById('SSAccept').disabled=false;
}
}

the thing is that you need an event to invoke that function. you should monitor your textbox for change and invoke the function whenever the value changes. like using jquery
$("#TxtUname").keydown(function(e) {
if($("#TxtUname").val == '') {
//..disable button..
} else {
//..enable button
}
});