confitional focus on textbox using jquery - javascript

I have two checkboxes like this:
<input id="isGenericPassword" name="isGenericPassword"
onclick="IsGenericOrUnique(this.id);" type="checkbox" value="true" />
<input name="isGenericPassword" type="hidden" value="false" />
<input checked="checked" id="isUniquePassword" name="isUniquePassword"
onclick="IsGenericOrUnique(this.id);" type="checkbox" value="true" />
<input name="isUniquePassword" type="hidden" value="false" />
<input id="UniquePassword" name="UniquePassword" style="display:none"
type="text" value="" />
in document.ready, I have
$('#isUniquePassword').is(':checked')
? $("#UniquePassword").show()
: $("#UniquePassword").hide();
so that related textbox is visible if checkbox is checked.
I am hiding the textbox UniquePassword on click of isUniquePassword checkbox
$("#isUniquePassword").click(function () {
$("#UniquePassword").toggle(this.checked);
if ($("#isUniquePassword").is(':checked')) {
// unique password gets focus only if related checkbox is checked
$("#UniquePassword").focus();
}
});
and show dialogue when user tries to go away without typing anything
$("#UniquePassword").blur(function () {
if ($("#isUniquePassword").is(':checked') &&
$("#UniquePassword").val() == '')
{
$("#dialog-RecipientEmail-error").dialog("open");
}
});
and on Ok button click of that dialogue, setting focus again to that textbox so that value is entered
$("#dialog-RecipientEmail-error").dialog({
autoOpen: false,
resizeable: false,
width: 300,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
$("#UniquePassword").focus();
}
}
});
No I want that if isGenericPassword is checked or isUniquePassword is unchecked then I should get that error dialogue

$("#UniquePassword").focus(); will not focus the field rather it will trigger the actions which are bound with focus event. To focus a field, you need to get the handle of the HTML element
$("#UniquePassword").get(0).focus();
That should work.

Related

Javascript to enable/disable radio buttons when text field is cleared or chars are present

I'm working on a little script that will disable a form field if certain radio button are ticked or if the input filed has characters to disable the radio buttons
So what I'm wanting my code to do is when the User enters the text field and adds at least one character of any type to disable the radio buttons and if that field is cleared to re-enable the radio buttons
For some reason when I'm doing either or, my "Enabled" alert keeps showing and the radio buttons aren't being disabled
to get the alert to pop, need to click outside of the input field, I would like this to be a mouseout if possible but I can work on that later
If the value is entered within the form directly, the radio buttons are disabled but I can't get them enabled once the filed is cleared
Steps:
Enter text in text field, if value isn't set in the form. Radio buttons stay disabled
Enter Value within the form, the text buttons stay disabled when the text field is cleared
Working Parts:
If radio btn "Yes" is ticked display "test" string and disable text field
If Radio btn "No" is ticked then enable text field
jQuery version in use: 1.9
Below is my JavaScript and below that is the HTML
Script:
$(function() {
var tlHeader = 'Test';
var f2 = $('#field_2').val();
// This function controls inpput box toggling on/off radio buttons
$( '#field_2' ).change(function() {
if(f2.length != 0) {
alert( "Disabled" )
$("input[name=toggle]").prop('disabled', true)
} else if(f2.length == 0) {
alert( "Enabled" )
$("input[name=toggle]").removeProp('disabled')
};
});
window.invalidate_input = function() {
// This function controls radio btn actions
if ($('input[name=toggle]:checked').val() == "Yes") {
$('#field_2').attr('disabled', 'disabled'),
$('#thgtLdr').html( tlHeader );
$('#thgtLdr').not("No").show();
} else if ($('input[name=toggle]:checked').val() == "No") {
$('#field_2').removeAttr('disabled'),
$('#thgtLdr').not("Yes").hide();
}
};
$("input[name=toggle]").change(invalidate_input);
invalidate_input();
});
</script>
HTML:
<body>
<div id=rdTest>
<div class="inputField">
<label>Focal Image:</label>
<input name="FocalImage" type="text" id="field_2" class='textbox' value="" />
</div> <!-- End input field -->
<div class="radioGroup">
<label>Test Page:</label>
<input type='radio' name='toggle' value='Yes' id="tglyes"/>Yes
<input type='radio' name='toggle' value='No' id="tglno"/>No
</div>
<div id="thgtLdr">
</div>
</div>
</body>
Your use case isnt entirely clear but I'll show you how to achieve the basic goal.
First, I would avoid the mouse events and use keyup with a timer so that my function is only called when the user stops typing and not after each typed letter. Then it's just a mater of checking the text and acting to enable or disable the elements. Here is an example:
var keyupDelay = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();
$('#field_2').keyup(function() {
var $this=$(this);
keyupDelay(function(){
var val=$this.val();
console.log(val);
if(val=='') $('#tglyes, #tglno').prop('disabled',true);
else $('#tglyes, #tglno').prop('disabled',false);
}, 400 ); // triggered after user stops typing for .4 seconds, adjust value as needed
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=rdTest>
<div class="inputField">
<label>Focal Image:</label>
<input name="FocalImage" type="text" id="field_2" class='textbox' value="" />
</div>
<!-- End input field -->
<div class="radioGroup">
<label>Test Page:</label>
<input type='radio' name='toggle' value='Yes' id="tglyes" disabled="true"/>Yes
<input type='radio' name='toggle' value='No' id="tglno" disabled="true"/>No
</div>
<div id="thgtLdr">
</div>
</div>
Try this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(document).on('click','.choice',function(){
if($(this).val() == 'yes')
{
$('.textfield').prop('disabled',true);
$('#string').html('Test Welcome');
}
else
{
$('.textfield').prop('disabled',false);
$('#string').html('');
}
});
$(document).on('keyup','.textfield',function(){
if($(this).val().length > 0)
{
$('.choice').each(function()
{
if($(this).is(':checked'))
{
$(this).attr('checked',false);
}
$(this).prop('disabled',true);
});
}
else
{
$('.choice').prop('disabled',false);
}
});
});
</script>
<body>
<form>
<input type="text" class="textfield" placeholder="enter text"/>
Yes<input type="radio" name="choice" class="choice" value="yes" />
No<input type="radio" name="choice" class="choice" value="no" />
<p id="string" ></p>
</form>
</body>
You can simplify your code in many ways.
The keyup event will be triggered every time the user releases a key on the text field. Inside the callback, you can get the value of the text field with this.value. From experience, it is best to use .prop() method when toggling certain input-related attributes like disabled and checked. You can enable/disable these attributes using booleans.
// cache the elements to avoid having retrieve the same elements many times
var $textbox = $('#field_2'),
$radios = $('input[name=toggle]'),
$div = $('#thgtLdr');
// everytime user presses a key...
$textbox.on('keyup', function() {
// check if a value was entered or not
// if so, disabled the radio buttons; otherwise enable the radio buttons
$radios.prop('disabled', this.value);
});
// when radio buttons change...
$radios.on('change', function () {
// check if value is Yes or No
if (this.value === 'Yes') {
$textbox.prop('disabled', true);
$div.text(this.value);
} else {
$textbox.prop('disabled', false);
$div.empty();
}
});
<div id=rdTest>
<div class="inputField">
<label>Focal Image:</label>
<input name="FocalImage" type="text" id="field_2" class="textbox" value="">
</div>
<div class="radioGroup">
<label>Test Page:</label>
<input type="radio" name="toggle" value="Yes" id="tglyes">Yes
<input type="radio" name="toggle" value='No' id="tglno">No
</div>
<div id="thgtLdr"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script> // place code here </script>
Also, get into the habit of caching your jQuery objects.

On Check one input gets disabled and the other gets enabled

I'm coding a form which gets the value for some search process .. I'm coding two text fields for the user to give the input on any one of them.But only one of them would enable at a time .. user can chose the option by checking check box. by default one of the field should b enable, when the check-box is checked it(the one which was initially enable) gets disabled and other gets enabled, and vice versa when the check-box is unchecked.
Here is the fiddle:
http://jsfiddle.net/awBvq/224/
This will fix your problem
HTML :
<input type="text" name="" />
<input type="checkbox" name="" />
<input type="text" name="" disabled="'disabled'"/>
JS :
$(':checkbox').change(function(){
if ($(this).is(':checked')) {
$(this).prev().attr('disabled','disabled');
$(this).next().removeAttr('disabled');
} else {
$(this).next().attr('disabled','disabled');
$(this).prev().removeAttr('disabled');
}
});
It could have been done simpler, but this is just a hint:
if($("#CheckBox").is(":checked"))
{
$("#Field1").attr("disabled","disabled");
$("#Field2").removeAttr("disabled");
}
else
{
$("#Field1").removeAttr("disabled");
$("#Field2").attr("disabled","disabled");
}
Simple logic:
(1) By default disable any one of the textbox.
(2) Using .prev() or .next(), check whether anyone is disabled.
(3) if so, enable it and disable the other else vice versa.
HTML:
<input type="text" name="" disabled/> <!--By default it is disabled-->
<input type="checkbox" name="" />
<input type="text" name="" />
Javascript:
$(':checkbox').change(function () {
if ($(this).prev().is(':disabled')) {
$(this).prev().removeAttr('disabled');
$(this).next().attr('disabled', 'disabled');
} else {
$(this).next().removeAttr('disabled');
$(this).prev().attr('disabled', 'disabled');
}
});
Check this JSFiddle

Onclick On Radio Button Not Working

So I have this radio button and text field in a form. When the page loads, the disable field method gets called and disables the text field. What I am trying to do next is to re enable the text field by activating the radio button. Hence I have an onclick event on the radio button that calls the enablefield method. But its refusing to reactivate the textfield. Is it the syntax you reckon?
<form>
<input type="radio" name="asiinternship" value="Tadween Publishing" onclick="enableField(applyingforother)" />Other <input type="text" name="applyingforother" maxlength="56" style="width:143px;margin-bottom:20px;" />
</form>
<script>
function enableField(myField)
{
myField.disabled = false
return true
}
function disableField(myField)
{
myField.disabled = true
return true
}
disableField(document.forms["contact_form"].applyingforother)
</script>
You're missing quotes:
onclick="enableField(applyingforother)
should be:
onclick="enableField('applyingforother')

Trying to set value on hidden parameter on click of submit button in form

Trying to set a parameter on a hidden field on click of submit button.
$('.delete').on('click', function() {
$('#id').val('1000');
});
This is the hidden field:
<input type="hidden" name="itemId" id="id" />
And this is one of my submit buttons:
<input type="submit" value="Delete item" class="delete" />
However at the server the itemId field is empty.
Try to do it by using Jquery .attr() function :
Change:
$('.delete').on('click', function() {
$('#id').val('1000');
});
To:
$('.delete').click(function() {
$('#id').attr('value','1000');
});

Enable input field on radio button checked

I have 2 radio buttons and 2 input fields. I want to associate a radio button with an input field, so only the selected radio button's input field is enabled and others are disabled.
My html markup is:
<div>
<input type="radio" checked="checked" name="co" data-for="s" />
<input type="text" id="s" />
<br /><br />
<input type="radio" name="co" data-for="u"/>
<input type="text" id="u" disabled="disabled" />
</div>
So currently the first radio button is checked, and its input field is enabled. How can I do this with a bit of jquery code?
EDIT
I tried this:
$("input[type=radio][name=co]").bind({
change: function () {
if ($(this).attr("checked") == "checked")
$("#" + $(this).attr("data-for")).removeAttr("disabled");
else
$("#" + $(this).attr("data-for")).attr("disabled", "disabled");
}
});
Try this - http://jsfiddle.net/DMasH/
$("input:radio").on("click", function() {
$("input:text").attr("disabled", true);
$(this).next("input").attr("disabled", false)
});
$("input[type='radio']").click(function() {
$("input[type='text']").attr("disabled", "disabled");
if ($(this).next().attr("disabled") == "disabled") $(this).next().removeAttr("disabled");
else $(this).next().attr("disabled", "disabled");
});
Disable all boxes, then enable only the next one.
http://jsfiddle.net/reygonzales/sJZD7/
Solution - http://jsfiddle.net/4uQqE/2/
$('input[data-for]').change(function() {
target = $('#'+$(this).data('for'));
$('input[type="text"]').attr('disabled','disabled');
if($(this).is(":checked")) {
target.removeAttr('disabled');
}});​

Categories