How to enable/disable a text box on clicking a button - javascript

For example my page has a text box which already has some value and the readonly option for it is "true" , when the edit button is clicked next to the text box , the editing option in text box is enabled. How do I implement enabling the textbox when i click on a button.
function func() {
$("input:button[name='button1']").click(function() {
$("#text11").val($(this).val()).attr("disabled", "disabled");
if($(this).val() != "") {
$("#text11").attr("disabled", "").focus();
}
});
}
<input type="text" name="text11" readonly="readonly" value="Editing is disabled">
<input type="button" value="edit" name="button1">
which is when I click this button , the readonly option in textbox should be disabled.How do I do that ?

basically you just want to add the attribute disabled to your element to stop users using it.
$('#disablebutton').click(function(){
$('#textfieldToClose').attr('disable');
});
<input type="text" name="text11" readonly="readonly" id="textfieldToClose">
<input type="button" value="edit" name="button1" id="disablebutton">
i believe this should work, haven't tested it mind.

You need to use HTML DOM objects...
http://www.w3schools.com/jsref/default.asp

Related

javascript onclick radio clear textbox

I would like to clear a text box when a radio button above the text box is selected.
I have tried this:
function clearThis(target){
target = document.getElementById(target);
target.value = "";
}
<input type="radio" name="not_req" id="clear_req" value=""
title="Click here to clear the No Auth need flag"><span id="clear" onclick = 'clearThis("claims")' >Clear
The box I would like to clear is
<input type="text" size="5" name="auth_for" id="claims" value="{$prior_auth->get_auth_for()}" title="Set the number of times no auth can be used">
Took most of this from http://jsfiddle.net/BMrUb/ but I can see that the example is clearing the adjacent text box. I would like to clear a text box not adjacent to the radio button.
As Gerald said place your onclick="" in the <input type="radio" ... >, not in the <span>.
The problem is that it's the sibling input element that needs its value clearing, not the span, even though you only want it to clear when people click on the span element. So the example code below does this. You're also best off decoupling your javascript from your HTML by using event listeners (and not using the old-fashioned onclick attribute).
var clearSpanEl = document.getElementById("clear");
clearSpanEl.addEventListener("click", function(e) {
var inputEl = e.target.previousElementSibling;
inputEl.value = "";
}, false);
<input type="text" name="search" id="search" value="I can be cleared" />
<span id="clear">Clear results</span>
I've forked your JSFiddle here, so you can see it working.

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

Button is not visible because of hidden div

I have this HTML code where I have a div and a button.
Now, with jQuery I made the div "hidden" and it will only show when you have selected the correct <option>. But now the button is only visible if the div is too.
HTML:
<div id="great">
Do you like the netherlands?
<input type="text" id="greatBox" value="Why..."
</div>
<input type="button" id="submitbutton" value="Submit">
and the JS/Jquery looks like this
(its spread over the file, the rest is not needed (i guess))
$('#great').hide()
$("#selectlist").change(function(){
var value = $(this).val();
if ($(this).val() == "netherlands") {
$('#great').slideDown(750)
$('#other').hide()
}
if ($(this).val() == "other") {
$('#great').hide()
}
});
There is not yet any jQuery/javascript bound to the button.
You need to close <input type="text" id="greatBox" value="Why..." >
Because it's open the div never gets closed and everything after it will be hidden.

HTML Form Input with Radio and Text - Selection

I have a text input area attached to a radio button in an HTML form as shown here:
<fieldset class="w100">
<div class="rowElem align-left">
<input type="radio" id="plan_height" name="plan_height" value="standard6'2"" checked >
<label>Standard 6'2"</label>
</div>
<div class="rowElem align-left">
<input type="radio" id="other_text" name="plan_height" value="Other height" onclick="document.getElementById('other_height').focus();" >
<input type="text" id="other_height" name="plan_height" value="Enter custom height" onFocus="if(this.value=='Enter custom height') this.value='';" onBlur="if(this.value=='') this.value='Enter custom height';">
<label for="other_text">Other</label>
</div>
</fieldset>
If the user selects the second radio option for "Other," I would like the text box to automatically be in focus for them to enter a value. Also, if the user clicks on the text box to enter a value, I would like the radio button for this to automatically be selected for them.
I've tried using onBlur or onChange or onKeyup on the form element, but can't seem to get it working.
Have you tried the onclick event: onclick="document.getElementById('other_height').focus();"
Check this out http://jsfiddle.net/tzj6Z/7/
For cross browser support you'll have to add broswer detection like this
if(navigator.userAgent.indexOf('Firefox')>=0) { // Firefox
focus_event = 'focus';
} else if (navigator.userAgent.indexOf('Safari')) { // Opera, Safari/Chrome
focus_event = 'DOMFocusIn';
} else { // IE
focus_event = 'onfocusin';
}

Return variable for input fields in JavaScript jQuery

I have some code.
$('#my-mkfile').click(function(e) {
e.stopPropagation();
e.preventDefault();
//window.console.log('mkdir button pressed');
f[0].elfinder.ui.exec('mkfile');
$('#finder .el-finder-cwd').find(':text').val('XXXXXX');
$(document.body).click();
var timestamp=0;
}
At the moment it works with a button. And creates a val named 'XXXXXX'
<input type="button" value="my mkfile" id="my-mkfile">
How can I change it so that it is a text field and passes to val('XXXXXX'). I just spent a day on it lol. Should be easy.
Add a text field
<input type="text" id="textFieldID" value="" />
and change the code to
$('#finder .el-finder-cwd').find(':text').val($('#textFieldID').val());

Categories