How to remove css style on button click in javascript? - javascript

I have created an form in which I have made the input field disabled by default->
<input class="name" type="text" maxlength="50" value="Hritika Agarwal" disabled="" />
I want to make this editable on button click. So created a button like this ->
<button class="accept-btn" onclick="myFunction()">Edit</button>
function myFunction() {
document.getElementById("name").removeAttribute("disabled");
}
But It's not working.
I have even tried like this also->
function myFunction() {
document.getElementById("name").style.disabled = "false";
}
But again nothing happened.
How could I resolve this>

You use getElementById to find an element with the id name but there is not such thing. Use <input id="name" instead of class, then the first will work.
The second can not work, since disabled is not a style-property.

function myFunction() {
document.getElementsByClassName("name")[0].removeAttribute("disabled");
}
Or
<input class="name" id="name" type="text" maxlength="50" value="Hritika Agarwal" disabled="" />

if you want to select elemnt by class name use getElementsByClassName.
document.getElementsByClassName("name")[0].disabled = false;
If
select elemnt by id use getElementById.change input to
<input id="name" type="text" maxlength="50" value="Hritika Agarwal" disabled="" />
then
document.getElementById("name").disabled = false;

Related

Retain value in a disabled input when reset button is pressed

I am using a project code input in my form as
<input type="text" id="txtProjectCode" name="Project Code" class="form-control" maxlength="15" disabled="disabled" />
When I reset my form using my reset function
function resetRequestForm() {
$("#txtProjectCode").val(userProject);
}
I am trying to add value again through global variable, but still it is not reflecting in the form.
Please help on this
Please see this example. It is not exactly what you are doing.
But I am only showing the way how to do it.
Here It is working with disabled also, but please note that disabled fields value will not post on the server end.
var userProject = 'My Project';
function resetRequestForm() {
$("#txtProjectCode").val(userProject);
}
function getValueAgain(){
console.log($("#txtProjectCode").val());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txtProjectCode" name="Project Code" class="form-control" maxlength="15" readonly />
<button onClick="resetRequestForm()"; >resetRequestForm</button>
<button onClick="getValueAgain()"; >getValueAgain</button>
Disabled input text
<input type="text" id="txtProjectCode" name="Project Code" class="form-control" maxlength="15" disabled="disabled" />
Clear Button
<button class="clear_button" onclick ="return resetForm();" id="clearRequest">Clear</button>
This will retain the data in the disabled input, when
the form is cleared using a button with custom resetForm() function
the button type is set as `reset'
Note:
Data will not be retained if readonly="readonly" is used instead of disabled="disabled" (in both the cases)
no need to feed the data again as $("#txtProjectCode").val(userProject); - userProject is a global variable.

Disabling textarea and input at the same time

I disable a textarea like in this code snippet:
function toggleDisabled(_checked,id) {
document.getElementById(id).readOnly = !_checked;
}
<input type="checkbox" name="no" value="1" onchange="toggleDisabled(this.checked,'new_order')">
<textarea name="noa" id="new_order">FOOO</textarea>
<input type="text" name="noo" id="new_order">
Now I want input text to get disabled when I check the checkbox. So that both textarea and input:text will be disabled.
I tried to add the id that I used as ID for textarea but input:text and textarea are conflicted since readOnly is only for textarea.
So that I need a way tp say if textarea disable like this... , if input disable like this ...
id must be unique! Never use same id to more than one element.
the code below selects all elements that have the class new_order and then iterate through then disabling or enabling then. Take a look
function toggleDisabled(self) {
var inputs = document.getElementsByClassName('new_order');
for (var i = 0; i < inputs.length; i++){
inputs[i].disabled = self.checked;
}
}
<input type="checkbox" name="no" value="1" onchange="toggleDisabled(this)">
<textarea name="noa" class="new_order">FOOO</textarea>
<input type="text" name="noo" class="new_order">
The problem arises when you use an id multiple times... ID's are supposed to be unique. If you use classes it should work:
function toggleDisabled(_checked, selector) {
document.querySelectorAll(selector).forEach((el) => {
el.readOnly = _checked;
});
}
<input type="checkbox" name="no" value="1" onchange="toggleDisabled(this.checked,'.new_order')">
<textarea name="noa" class="new_order">FOOO</textarea>
<input type="text" name="noo" class="new_order">

HTML Button - How to dynamically change url content

I am trying to change values in a button's URI to input texts values.
<div class="numcontainer">
<input required="required" onchange="getNumber()" id="cnt" type="input" name="input" placeholder="ISD">
<input required="required" onchange="getNumber()" id="wano" type="input" name="input" placeholder="Enter number">
</div>
<button type="submit" name="gowa" id="btngo" onclick="location.href='myserver://send?phone=NumberPlaceHolder'">Go!</button>
NumberPlaceHolder: Trying to concatenate values enter in both input
JS:
function getNumber() {
document.getElementById('btngo').href.replace("NumberPlaceHolder",document.getElementById('cnt').value+document.getElementById('wano').value);
}
It does not work as expected. How can I solve this?
Just an alternative, it's cleaner
const getNumber =()=> {
let val =id=> document.querySelector(id).value
console.log('myserver://send?phone='+val('#cnt')+val('#wano'))
}
//console or location.href
<div class="numcontainer">
<input required id="cnt" type="text" placeholder="ISD">
<input required id="wano" type="number" placeholder="Enter number">
</div>
<input type="button" name="gowa" id="btngo" onclick="getNumber()" value="Go!">
onChange is quite unnecessary.
You cannot have a href attribute for a button. You need to change the onclick attribute here:
function getNumber(){
document.getElementById('btngo').setAttribute("onclick", document.getElementById('btngo').getAttribute("onclick").replace("NumberPlaceHolder", document.getElementById('cnt').value+document.getElementById('wano').value));
}
It's always better to have it split like this:
function getNumber(){
curOnclick = document.getElementById('btngo').getAttribute("onclick");
wanoValue = document.getElementById('cnt').value+document.getElementById('wano').value;
newOnclick = curOnclick.replace("NumberPlaceHolder", wanoValue);
document.getElementById('btngo').setAttribute("onclick", newOnclick);
}
You should use simple
instead of
<button type="submit" name="gowa" id="btngo" onclick="location.href='myserver://send?phone=NumberPlaceHolder'">Go!</button>
To change link use this:
document.querySelector('.start a').href = 'my-new-address'
Change your input type like this type="nummber" or type="text" for getting number or text only
<input required="required" onchange="getNumber()" id="cnt" type="nummber" placeholder="ISD">
<input required="required" onchange="getNumber()" id="wano" type="number" placeholder="Enter number">
You can add click event to your button like this.
function getNumber(){
document.getElementById("btngo").onclick = function() {
var ll = "myserver://sendphone="+document.getElementById('cnt').value+document.getElementById('wano').value;
console.log(ll); // checking url in console.
location.href = ll;
};
}

I would like just recover the value of the field that I have just entered in jquery

I would like just recover the value of the field that I have just entered in jquery.
Thank you for your help
function test()
{
//????????
}
<form>
<label>Price</label>
<input type="text" name="price[]" onchange="test();"><br>
<label>Price</label>
<input type="text" name="price[]" onchange="test();"><br>
<label>Price</label>
<input type="text" name="price[]" onchange="test();">
</form>
For starters, if you're using jQuery, then use jQuery. Remove the inline onclick attributes:
<input type="text" name="price[]">
And attach a single event handler to your inputs:
$(function () {
$('input[type="text"]').change(function () {
var value = $(this).val();
// etc.
});
});
Within that handler, you can refer to the input raising the event as this and get its value accordingly as in the code above.
Example

Replicating the values to another textbox

I have a question regarding JSP. I have two textboxes. When I type the value in the first text box, it should replicate automatically in the second text box.
<input type="text"
class="formtext"
name="List.lItemList<c:out value='[${status.index}]'/>.value1"
value="0.0"
onChange="validateOnChange(this,'desc','minvalue','maxValue','float')">
<input type="text"
class="formtext"
name="List.clItemList<c:out value='[${status.index}]'/>.value2"
value="0.0"
onChange="validateOnChange(this,'desc','minvalue','maxvalue','float')">
Assuming that the first box has ID input1 and the second input2 (so you'll have to add those IDs), you can do it like this:
document.getElementById('input1').onkeyup = function () {
document.getElementById('input2').value = this.value;
};
You can do this using JavaScript. Attach an keyup event handler on the first textbox which should copy its value to the second one.
<input type="text" id="t1" onkeyup="document.getElementById('t2').value=this.value" />
<input type="text" id="t2" />

Categories

Resources