How to change style using javascript? - javascript

<div class="club_member">
<input type="text" size="5" onclick="this.value=''" name="scienceClub" value="2">
</div>
How can I use a simple javascript command to change the value to "0" and place a 'disable=""' in the input style?

Use object.value to set the value and object.disabled to disable the input in Javascript.
Demo:
document.getElementById("button").addEventListener("click", function(){ // I have added a sample button for testing
var inputElementObject = document.getElementById("input"); // get the input element object
inputElementObject.value = "0"; // set the value
inputElementObject.disabled = true; // set the disabled property
});
<div class="club_member">
<!-- set an ID for the input element -->
<input type="text" size="5" onclick="this.value=''" name="scienceClub" value="2" id="input">
<button id="button">Click me!</button>
</div>
Check out how to set the properties for <input> here on MDN.

First set id in your control like this
<input type="text" id="myControl" size="5" onclick="this.value=''" name="scienceClub" value="2">
Then Try like this in script
var control=document.getElementById("myControl");
control.value=0;
control.setAttribute("disabled", true);

The below snippet demonstrates how to change the value and disable the input using strictly JavaScript.
document.getElementById("input").value = "0";
document.getElementById("input").disabled = true;
<div class="club_member">
<input type="text" size="5" onclick="this.value=''" name="scienceClub" value="2" id="input">
</div>

Using the same code as you posted. you just have to change its value and it gets disabled.
<div class="club_member">
<input type="text" id='something' size="5" onclick="this.value='0'; this.setAttribute('disabled','true');" name="scienceClub" value="2">
</div>
<div class="club_member">
<input type="text" id='something' size="5" onclick='this.value="0"' name="scienceClub" value="2">
<button onclick="document.getElementById('something').setAttribute('disabled','true');"> Lock the value </button>
</div>

Related

jquery remove removes all the thing which is appending after?

Below is my code. I am removing some elements in html with class and it removes but I am inserting some elements with class .als-h-f before a input field. but remove function removes these also. please suggest why this is happening?
if (jQuery(this).find('input[type=hidden]').length > 0) {
jQuery('.als-h-f').remove();
jQuery(this).find('input[type=hidden]').each(function () {
jQuery('#search').before(jQuery(this));
});
}
<div class="als-cont">
<input type="hidden" class="als-h-f" name="als_id" value="11">
<input type="hidden" class="als-h-f" name="als_fname" value="Rajesh">
<input type="hidden" class="als-h-f" name="als_lname" value="Sharma">
<input type="text" name="search" id="search">
</div>
You can't find an HTML element that you've removed from the DOM. Store them in a variable before you remove them and then add them again.
$input = $('#search');
$hiddens = $('.als-h-f');
$hiddens.remove();
$hiddens.each(function(index, $hidden){
console.log($hidden);
$input.before($hidden);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="als-cont">
<input type="hidden" class="als-h-f" name="als_id" value="11">
<input type="hidden" class="als-h-f" name="als_fname" value="Rajesh">
<input type="hidden" class="als-h-f" name="als_lname" value="Sharma">
<input type="text" name="search" id="search">
</div>

Usage of radio value in ID selector

Given this html:
<form action="">
<div id="choices">
<input type="radio" name="stype" id="opt1" value="input1_div" checked=""/> Opt1
<input type="radio" name="stype" id="opt2" value="input2_div"/> Opt2
</div>
<div id="stypes">
<div id="input1_div">
<input type="text" id="input1" name="input1" placeholder="input1"/>
</div>
<div id="input2_div" style="display: none;">
<input type="text" id="input2" name="input2" placeholder="input2" disabled=""/>
</div>
</div>
<div id="#sbutton">
<input type="submit" id="input3" value="Submit"/>
</div>
</form>
I use following jQuery to hide/disable input fields based on selected radio buttons:
jQuery('#choices input').each(function() {
var item = this;
$(this).click(function() {
if($('input[type=radio][name=stype]').is(':checked')) {
$('#stypes > div').hide();
$('#stypes input').not("#sbutton").prop('disabled', true);
$('#' + $(item).val()).fadeIn();
$('#' + $(item).val() + ' input').prop('disabled', false);
}
});
});
All-in-One in this jsfiddle.
I'm particularly unsure about my technique to incorporate radio value into the id selector:
$('#' + $(item).val()).fadeIn();
$('#' + $(item).val() + ' input').prop('disabled', false);
What is the correct way to do it? Other tips regarding my jQuery?
First of all, you don't need a sophisticated jQuery.each loop to bind the click and to define this. In each event handler this will be the caller of the function. In your case it is enough to have click function for all of them.
As you said in comments, it's only matter of presentation. I prefer to have one field instead of two fields. Even I prefer to have a fixed name for this text input, though in order to make it very similar to your example I change the name and placeholder accordingly.
$(function(){
$('#choices input').click(function() {
var newName = $(this).val(),
newPlaceholder = $(this).attr("data-placeholder");
$('#interchangable_input[name!='+newName+']').hide()
.attr("name", newName)
.attr("placeholder", newPlaceholder)
.fadeIn();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<div id="choices">
<input type="radio" name="stype" id="opt1" data-placeholder="Input one" value="input1" checked=""/> <label for="opt1">Opt1</label>
<input type="radio" name="stype" id="opt2" data-placeholder="Input two" value="input2"/> <label for="opt2">Opt2</label>
</div>
<div id="stypes">
<input type="text" id="interchangable_input" name="input1" placeholder="Input one"/>
</div>
<div id="#sbutton">
<input type="submit" id="input3" value="Submit"/>
</div>
</form>
Few more suggestions:
You can use <label for="target id"> for each option label in radio buttons or checkboxes. It will work fine with click event handler, even if the user clicks on the label instead of the button itself.
You can hid some information as data-* attribute in html5. You don't need to necessarily use value.
Update for multiple items
In case of group of multiple items in form, I can imagine a form with different sections or pages. The <fieldset> can be use to group these items. In HTML5 you could just disable the fieldset tag by <fieldset disabled> when you change the form page with jquery. (With exception of IE browsers). Because of this exception we need to disable all items in subforms. In order to handle this part, I defined a class .form-element which applies for all form inputs. You can also use <div> instead of <fieldset>, then you will need to track their enable/disable status.
$(function(){
// initialization by disabling form-elements and hiding them
$("#subforms fieldset[disabled]").hide();
$("#subforms fieldset[disabled] .form-element").attr('disabled','disabled');
// choice tracker
$('#choices input').click(function() {
var $target = $($(this).attr("data-subform")),
$oldElement = $("#subforms fieldset:not([disabled])");
$oldElement.attr('disabled','disabled').hide();
$oldElement.find(".form-element").attr('disabled','disabled');
$target.removeAttr("disabled");
$target.find(".form-element").removeAttr("disabled");
$target.fadeIn();
});
});
fieldset {
border: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<div id="choices">
<input type="radio" name="stype" id="opt1" data-subform="#subform1" value="subform1" checked=""/> <label for="opt1">Opt1</label>
<input type="radio" name="stype" id="opt2" data-subform="#subform2" value="subform2"/> <label for="opt2">Opt2</label>
</div>
<div id="subforms">
<fieldset id="subform1" >
<input class="form-element" type="text" name="input1_1" placeholder="Input one"/>
<input class="form-element" type="text" name="input1_2" placeholder="Input two"/>
</fieldset>
<fieldset id="subform2" disabled>
<input class="form-element" type="text" name="input2_1" placeholder="Input one"/><br />
<textarea class="form-element" name="input2_2" placeholder="Input two"></textarea><br />
<input class="form-element" type="checkbox" name="input2_3" id="input2_3" /> <label for="input2_3">check this first</label>
</fieldset>
</div>
<div id="#sbutton">
<input type="submit" id="input3" value="Submit"/>
</div>
</form>

How To auto enable checkbox?

Hi i have four check box and i want if i click one check box then other check box auto checked and if i unchecked that check box then it should be unchecked.
i am using this but it is not working
<p class="contact">
<input type="checkbox" name="PlanA" value="A"onchange="document.getElementById('a2').checked=!this.checked;"><label for="PlanA"><span style="font-weight:bold">PlanA</span></label><br>
<input name="PlanA" type="hidden" value=0 />
</p>
<p class="contact">
<input type="checkbox" name="AndroidApps" id="a2" value=1><label for="AndroidApps"><span style="font-weight:bold">AndroidApps</span></label><br>
<input name="AndroidApps" type="hidden" value=0 />
</p>
How can i achieve this?
try this:
demo
onchange="document.getElementById('a2').checked=this.checked;"
See here fiddle2 multiple checkbox
Try this
$("input[name=PlanA]").change(function(){
$("#a2").attr("checked",this.checked);
});
Demo
try DEMO
$("input[name=PlanA]").change(function(){
$("#a2").attr("checked",this.checked);
});
Try the following, pure javascript
Define id for first checkbox as a1
onchange="(document.getElementById('a1').checked) ? (document.getElementById('a2').checked = true) : (document.getElementById('a2').checked = false);">
A label can be bound to an element either by using the "form" attribute.
HTML
<p class="contact">
<input type="checkbox" id="PlanA" name="PlanA" value="A">
<label for="PlanA">PlanA</label>
<input name="PlanA" type="hidden" value=0 />
</p>
<p class="contact">
<input type="checkbox" name="AndroidApps" id="AndroidApps" value=1>
<label for="AndroidApps">AndroidApps</label>
<input name="AndroidApps" type="hidden" value=0 />
</p>
JS
$('#PlanA').change(function(){$('#AndroidApps').attr("checked", this.checked);})
CSS
.contact label {font-weight: bold }

How to generate input fields dynamically

I have a form with input fields.
Once,I clicked on submit button I want to generate 2 input fields with a "plus / +" icon. So, when I click on "+" icon it will generate input fields.
Here is the html part:
<label>Name</label>
<input type="text" value="Jim" id="demo_1" name="demo_name" class="input-medium"/>
<label>Id</label>
<input type="text" value="123" id="demo_1" name="demo_name" class="input-medium">
<button id="demo_submit" class="btn" name="demo_submit" type="button">Submit</button>
I suggest to have a look at existing plugins (For example - Jquery SheepIt! Plugin) and see how that is coded.
To add dynamically form elements this can be done with the clone() method and DocumentFragment - http://ejohn.org/blog/dom-documentfragments/
Working example at http://plnkr.co/edit/szYoU4GCeLWX8b9DcsYT
<script type="text/javascript">
function addFields () {
var newNode1 = document.createElement('input'),
newNode2 = document.createElement('input');
newNode1.type = newNode2.type = "text"; document.forms[0].appendChild(newNode1);
document.forms[0].appendChild(newNode2);
}
</script>
<form>
<label>Name</label>
<input type="text" value="Jim" id="demo_1" name="demo_name" class="input-medium"/>
<label>Id</label>
<input type="text" value="123" id="demo_1" name="demo_name" class="input-medium">
<button id="demo_submit" class="btn" name="demo_submit" type="button" onclick="addFields()">Submit</button>
</form>
$(".addInput").click(function {
$("form").append( PUT INPUT ELEMNT HERE);
});
Check this out.
HTML
<label>Name</label>
<input type="text" value="Jim" id="demo_1" name="demo_name" class="input-medium" />
<label>Id</label>
<input type="text" value="123" id="demo_1" name="demo_name" class="input-medium">
<button id="demo_submit" class="btn" name="demo_submit" type="button">Submit</button>
<button id="demo_add" class="btn" name="demo_add" type="button">Add more</button>
<div id='add'></div>
jQuery
$('#demo_add').click(function () {
$inputName = "<input type='text' placeholder='Name'/>";
$inputId = "<input type='text' placeholder='Id'/>";
$br = "<br/>";
$('#add').append($inputName);
$('#add').append($inputId);
$('#add').append($br);
});
Hopefully it helps.

Combo box for all control

I created a filterable drop Down List using JavaScript. This is the List Box Coding.
<select name="d1" class="leftselect" id="d1" size="5" ondblclick="DropDownTextToBox('d1','t1');" style="display:none;" >
<option>axcsus-COMMON STOCK</option>
<option>aces</option>
<option>bdfs</option>
<option>befs</option>
<option>behs</option>
<option>dfgh</option>
<option>dhes</option>
<option>dwww</option>
<option>pass</option>
<option>pass</option>
</select>
I created 4 Text Field and a arrow character. If i click the arrow character , I'll show the list at the bottom of the control.
<div id="div_name" style="float:left;z-index: 20;">
<input name="t1" type="text" id="t1" onkeyup="value_filtering('d1','t1');" onkeypress="onEnter(event,'d1','t1')" />
<input type="button" class="rightselect" onclick="displayList('d1','t1');" value="▼" />
</div>
<div class="inputbox">
<input name="t2" class="inputbox" type="text" id="t2" onkeyup="value_filtering('d2','t2');" onkeypress="onEnter(event,'d2','t2')" />
<input type="button" class="leftselect" onclick="displayList('d1','t2');" value="▼" />
</div>
<div style="float:left;text-align:center;" >
<input name="t3" type="text" id="t3" onkeyup="value_filtering('d3','t3');" onkeypress="onEnter(event,'d3','t3')" />
<input type="button" class="rightselect" onclick="displayList('d1','t3');" value="▼" />
</div>
<div class="inputbox">
<input name="t4" class="inputbox" type="text" id="t4" onkeyup="value_filtering('d4','t4');" onkeypress="onEnter(event,'d4','t4')" />
<input type="button" class="leftselect" onclick="displayList('d1','t4');" value="▼" />
</div>
In the display List function I'm getting the corresponded textbox position and displayed the List Control under the Text Box. Okie. Now my problem is If i select any option in the text box, I need to display the selected value to the textbox which the listbox shown under. After selecting the value from the list box, How i find in which text box showing the List ? Dynamically how can i find the text box id ?
This is my JS code for displaying the Listbox to the corresponding TextBox.
function displayList(ele,txt)
{
vis=document.getElementById(ele);
obj=document.getElementById(txt);
if (vis.style.display==="none")
vis.style.display="block";
else
vis.style.display="none";
vis.style.position = "absolute";
//alert(getElementPosition(txt).top + ' ' + getElementPosition(txt).left);
vis.style.top = getElementPosition(txt).top+obj.offsetHeight;
vis.style.left = getElementPosition(txt).left;
}
Note : I can call this function at the click event of arrow button. I can easily pass the text Field Id. But in the case ListBox action i can't send the particular ID of the Text Field.
If you have no opposition to using jquery you can using the jquery UI built-in autocomplete which will do pretty much what you're looking for. For more advanced and nicer plugins you can try chosen
Try this.
<script>
var targetInput=null;
function displayList(ele,txt) {
vis=document.getElementById(ele);
obj=document.getElementById(txt);
targetInput = obj;
if (vis.style.display==="none") {
vis.style.display = "block";
} else {
vis.style.display = "none";
vis.style.position = "absolute";
//alert(getElementPosition(txt).top + ' ' + getElementPosition(txt).left);
vis.style.top = getElementPosition(txt).top+obj.offsetHeight;
vis.style.left = getElementPosition(txt).left;
}
}
function selectList(txt) {
if (!targetInput) return;
targetInput.value = txt.value;
txt.style.display = 'none';
}
</script>
<div id="div_name" style="float:left;z-index: 20;">
<input name="t1" type="text" id="t1" onkeyup="value_filtering('d1','t1');" onkeypress="onEnter(event,'d1','t1')" />
<input type="button" class="rightselect" onclick="displayList('d1','t1');" value="▼" />
</div>
<div class="inputbox">
<input name="t2" class="inputbox" type="text" id="t2" onkeyup="value_filtering('d2','t2');" onkeypress="onEnter(event,'d2','t2')" />
<input type="button" class="leftselect" onclick="displayList('d1','t2');" value="▼" />
</div>
<div style="float:left;text-align:center;" >
<input name="t3" type="text" id="t3" onkeyup="value_filtering('d3','t3');" onkeypress="onEnter(event,'d3','t3')" />
<input type="button" class="rightselect" onclick="displayList('d1','t3');" value="▼" />
</div>
<div class="inputbox">
<input name="t4" class="inputbox" type="text" id="t4" onkeyup="value_filtering('d4','t4');" onkeypress="onEnter(event,'d4','t4')" />
<input type="button" class="leftselect" onclick="displayList('d1','t4');" value="▼" />
</div>
<select name="d1" class="leftselect" id="d1" size="5" ondblclick="DropDownTextToBox('d1','t1');" onclick="selectList(this)" style="display:none;">
<option>axcsus-COMMON STOCK</option>
<option>aces</option>
<option>bdfs</option>
<option>befs</option>
<option>behs</option>
<option>dfgh</option>
<option>dhes</option>
<option>dwww</option>
<option>pass</option>
<option>pass</option>
</select>

Categories