How to bind dropdown list from array using jQuery? And how to retrieve form control values using jQuery?

InfoPath alternatives for form designing SharePoint

Here in this jQuery tutorial we will discuss how we can bind dropdown list from array using jQuery. And then we will discuss how we can retrieve form fileds values using jQuery. Here we can retrieve values from  HTML textbox, radio button and dropdown list using jQuery.

So first we will create the HTML form and place the HTML controls like dropdown list, textbox, radio button and a submit button.

HTML Input Form:

Here we have taken one text box, three radio buttons, one dropdown list and a submit button.  Here we have not added any option to the dropdownlist, because we will bind the dropdown list at run time from an arrary. Below is HTML code to create the form as per the above requirement.




<!DOCTYPE HTML>
<HTML>
<head>
<script type=”text/javascript” src=”https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js”></script>
<script type=”text/javascript” src=”https://onlysharepoint2013.sharepoint.com/sites/Raju/SiteAssets/Bihusdevelopment2/development3.js”></script>
</head>
<body id=”body”>
<table>
<tr>
<td colspan=”3″>
</td>
<td>Name</td>
<td><input type=”text” id=”txtName”></td>
</tr>
<tr>
<td colspan=”3″></td>
<td>Gender</td>
<td>
<input type=”radio” name=”gender” id=”male” value=”Male” > Male<br>
<input type=”radio” name=”gender” id=”female” value=”Female”> Female<br>
<input type=”radio” name=”gender” id=”other” value=”Other”> Other
</td>
</tr>
<tr>
<td colspan=”3″></td>
<td>Country</td>
<td>
<select id=”ddlcountry”>
<option></option>
</select>
</td>
<td>
<input type=”button” value=”submit” id=”btnClick”>
</td>
</tr>
</table>
</body>
</html>

Bind Dropdownlist from an array using jQuery:

To bind the dropdownlist we have created method like below:



function BindCountry()
{
var countryArray = new Array(“INDIA”, “PAKISTAN”, “SRILANKA”, “AUSTRALIA”);
for (i = 0; i < countryArray.length; i++) {
$(“#ddlcountry”).append(‘<option>’ + countryArray[i] + ‘</option>’)
}
}

And we are calling this method on the $(document).ready() method.

So the full code will be like below:

$(document).ready(function()
{
BindCountry();

});

function BindCountry()
{
var countryArray = new Array(“INDIA”, “PAKISTAN”, “SRILANKA”, “AUSTRALIA”);
for (i = 0; i < countryArray.length; i++) {
$(“#ddlcountry”).append(‘<option>’ + countryArray[i] + ‘</option>’)
}
}

Retrive values from input controls using jQuery:

Now we will see how we can retrieve the values from the input control in the button click.

By using jQuery we can attach the button click event and on the button click event we will call a function to retrieve the control values.

$(document).ready(function()
{
$(“#btnClick”).click(function(){

RetrieveFormControlValues();

});
});

function BindCountry()
{
var countryArray = new Array(“INDIA”, “PAKISTAN”, “SRILANKA”, “AUSTRALIA”);
for (i = 0; i < countryArray.length; i++) {
$(“#ddlcountry”).append(‘<option>’ + countryArray[i] + ‘</option>’)
}
}

function RetrieveFormControlValues()
{
var txtValue= $(“#txtName”).val(); // This way we can retrieve values from a html textbox using jQuery

alert(txtValue);

var radioValue = $(“input[name=’gender’]:checked”).val(); // This way we can retrieve radio button value using jQuery

alert(radioValue);

var dropdownValue=$(‘#ddlcountry :selected’).text(); // This way we can retrieve dropdown list value using jQuery


alert(dropdownValue);
}

How to use in SharePoint online?

If you want to use the HTML form and js in SharePoint then, we can add this file in a content editor web part or script editor web part. See a detailed post on Working with JavaScript object model (jsom) in SharePoint 2013 or SharePoint Online


You May Also like the Following SharePoint Online Tutorials:

Leave a Reply