JQuery Hidden Field Set Value

JQuery Hidden Field Set Value

Jquery hidden input set value. In this tutorial we will see, how to pass values to hidden fields, when selected index of dropdown list box changes. Selected value will be passed to hidden fields.

First we need get selected values on change event of drop down list. To do this we need to attach change event to dropdown list control.

var selectedValue = $("#ddlTutorials option:selected").val();
         
var selectedText = $("#ddlTutorials option:selected").text();

Jquery script to pass values from list box to hidden fields.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript" language="javascript">
   

$(document).ready( function (){ 

    $("#ddlTutorials").change( function(){
    
      var selectedValue = $("#ddlTutorials option:selected").val();
      
      var selectedText = $("#ddlTutorials option:selected").text();
           
           $("#hiddenValue").val( selectedValue );
           $("#hiddenText").val( selectedText );
           
           alert("Hidden field text is: " + $("#hiddenText").val());
    
    
     });
                    
 });

</script>

HTML code: Set hidden input values from selected dropdown list box values.

<body>
 
 <input id="hiddenValue" type="hidden" />
 <input id="hiddenText" type="hidden" />
    <form id="form1" runat="server">
    
       
        
        <div>
            <select id="ddlTutorials">
                <option value="1">Asp.net</option>
                <option value="2">JQuery Tutorial.</option>
                <option value="3">C#.net.</option>
                <option value="4">Vb.net.</option>
                <option value="5">JQuery Tutorials.</option>
            </select>
        </div>
    </form>
</body>

To ensure we have passed the correct values to hidden fields. we are calling alert method on it.

In real life example you may don’t need that alert function. It is just for demo purpose to make sure that everything is working fine.

Tags:

Jquery Dropdown Selected ValueJQuery access label control and set valueJquery Set Value Of Textbox.JQuery Set Value of Textbox or Label Control In Asp.netLearning JqueryGet Selected Value From Dropdownlist [JQuery]How to get Jquery selected optionJQuery get Value Of TextareaJQuery TextBox Value()Basics of jqueryJQuery set .focus()

Author

My name is Satalaj, but people call me Sat. Here is my homepage: . I live in Pune, PN and work as a Software Engineer. I'm former MVP in ASP.net year 2010.
Disclaimer: Views or opinion expressed here are my personal research and it has nothing to do with my employer. You are free to use the code, ideas/hints in your projects. However, you should not copy and paste my original content to other web sites. Feel free to copy or extend the code.
If you want to fight with me, this website is not for you.
 

I'm Satalaj.