Category Archives: JQUERY

How to enable or disable the form elements using jquery

If you want to disable or enable the form elements according to id or name under certain conditions using jquery below sample may help you to some extent.
Enable or Disable the form elements according to name

 $('input[type=submit]').attr("disabled","disabled"); //Disable
                  $('input[type=submit]').removeAttr('disabled');             //enable
                  $('input[type=text]').attr("disabled","disabled");           //Disable textbox
                  $('input[type=text]').attr("disabled",false);


Getting Value of the select box and text box:

var selected_value =  $("select[name='name_of_selectbox'] option:selected").val();
var selected_value_of_textbox =  $("input[name='name_of_selectbox'] ").val();
var selected_value_of_textbox1 =  $("input#id_of_textbox ").val();

Similar links
Link1
Link 2
Link 3

jQuery onchange-onfocus select box

If you need to bind a function to be called when a user selects an option from a select box using jQuery, you’ve come to the right place.

There are several different ways to skin this cat, but basically here is what we are going to do:

1. Bind a change event listener to the select box itself
2. When the box is changed, call a function that detects and retrieves the selected value

Here’s the code:
Sample 1


<script type="text/javascript">
$(function(){
$('#selectboxid').change(function(){
	  
          var selected = $("#selectboxid option:selected");
	    if(selected.val() == 0 ){
	        alert('Select Module');	
	     }else{	
	        do something;
		}
	});
});
</script>

Sample 2

script type="javascript">
$(document).ready(function(){     //$(function(){
$("#selectBoxId").change(function(){
var selectedValue = $(this).find(":selected").val();
alert('The selected value is'+selectedValue);
});
});
<script>

Similar Links:
jQuery
Jquery tutorial Site
Select Box on Change
onchange select box

Disable textbox using jquery

Condition:
I have two radio button with the same name . On click(event) on the first radio button i need to enable the first textbox and Similarly On click(event) on the second radio button i need to disable the first and enable the second textbox.

Steps:

1. Include the jquery file
2. Create the form
->

       
Event Title:
Description:
ChooseSingle EventRange Event
Date:
Btn: ||

3. Fire the action on click event or change event.
-> On document ready disable both the text box

jQuery(document).ready(function () {       //$(function(){.. )};
$("input:text[name='edate']").attr("disabled", true);
	   $("input:text[name='edatefrom']").attr("disabled", true);
	   $("input:text[name='edateto']").attr("disabled", true);

)};

-> On click on the first radio button Enable the first textbox and disable the others

      $("#eventselectone").click(function(){
			   $("input:text[name='edate']").removeAttr("disabled");
			   $("input:text[name='edateto']").attr("disabled", true);
	           $("input:text[name='edatefrom']").attr("disabled", true);
		 });
 

->Simlarly on click on the second radio button Disable the first textbox and viceversa.
Sample Code


   
   -form-
         -table-
    		
        	Chooseinput type="radio" name="eventselect" id="eventselectone"  - Single Event  -  input type="radio" name="eventselect" id="eventselectrange"   - Range Event
        

        
        	Date: - input type="text" name="edate"  class="one" value="" - 
        
        
        
        	Btn: -input type="text" name="edateto" class="one" value=""    ||  -input type="text" name="edatefrom" class="one" value="" -
        
        
        
        	 -input type="submit" name="add_events" value="++ Event" -
        



     

Similar Example Click Me
Similar Example

Jquery-Multiple Checkbox Select

function selectAll() {
$(“input[type=’checkbox’]:not([disabled=’disabled’])”).attr(‘checked’, true);
}

Simple Selecting

jQuery(<selectors go here>)
Or the alias:
$(<selectors go here>)

Confused ..Ok

If we wanted to select every paragraph, divelement, h1heading, or input box on the page, we would use these selectors accordingly:

$(‘p’)
$(‘div’)
$(‘h1’)
$(‘input’)

jQuery borrows the conventions from CSS for referring to id and class names. To select by id, use the hash symbol (#) followed by the element’s id, and pass this as a string to the jQuery function:
$(‘#id-name’)

Similarly, we can use a CSS class selector to select by class. We pass a string consisting of a period (.) followed by the element’s class name to the jQuery function:
$(‘.data’)