I have drop-down and Textbox inside a Gridview so I want to check the followings on a button click:
(1) Check if NOTHING is selected from the drop down first (the drop-down options are either YES, NO or NA) . If nothing is selected, I want to show message that reads like this “Please make selection from the drop-down”
(2) If the selection from the drop-down is NO and the Textbox is blank or empty then I want to show message that says: “Please provide comments”
The first code checks if the text-box is blank and it works and the 2nd code checks if no selection is made from the drop down and that one works fine too so how can i combine between those 2 codes? I want to execute both codes on button click, right now it is only calling the first code. please help. Thanks.
here is my code that checks if the textbox is blank:
<script type ="text/javascript">
function Validate() {
var flag = false;
var gridView = document.getElementById('<%= GridView1.ClientID %>');
for (var i = 1; i < gridView.rows.length; i++) {
var selects = gridView.rows[i].getElementsByTagName('select');
var areas = gridView.rows[i].getElementsByTagName('textarea');
if (selects != null && areas != null) {
if (areas[0].type == "textarea") {
var txtval = areas[0].value;
var selectval = selects[0].value;
if (selectval == "No" && (txtval == "" || txtval == null)) {
flag = false;
break;
}
else {
flag = true;
document.getElementById('<%=btnSubmit.ClientID%>').style.visibility = 'visible';
}
}
}
}
if (!flag) {
alert('Please note that comments are required if you select "No" from the dropdown box. Thanks');
document.getElementById('<%=btnSubmit.ClientID%>').style.visibility = 'hidden';
}
return flag;
}
</script>
and here is the code that checks the drop-down
<script type="text/javascript">
function validate_DD() {
var flag = true;
var dropdowns = new Array(); //Create array to hold all the dropdown lists.
var gridview = document.getElementById('<%=GridView1.ClientID%>'); //GridView1 is the id of ur gridview.
dropdowns = gridview.getElementsByTagName('Select'); //Get all dropdown lists contained in GridView1.
for (var i = 0; i < dropdowns.length; i++) {
if (dropdowns.item(i).value == 'Select') //If dropdown has no selected value
{
flag = false;
break; //break the loop as there is no need to check further.
}
}
if (!flag) {
alert('Please select either Yes, No or NA in each dropdown and click the Save button again. Thanks');
document.getElementById('<%=btnSubmit.ClientID%>').style.visibility = 'hidden';
}
return flag;
}
</script>
Try this:
<select id="ddlCars">
<option value="1">Honda</option>
<option value="2" selected="selected">Toyota</option>
<option value="3">BMW</option>
</select>
Accessing dropdown:
To get the value:
var el = document.getElementById("ddlCars");
var val = el.options[el.selectedIndex].value; // val will be 2
To get the text:
var el = document.getElementById("ddlCars");
var car = el.options[el.selectedIndex].text; //car will be Toyota
Related
In a form can create more than 1 applicant, each applicant has a checkbox field. While submission of form it has to check atleast for 1 applicant checbox field has to be selected.code snippet below not working.Could some one help with the script.
function FF_OnBeforeSave() {
for(var i = 1; i < repeat; i++){
var primaryElement = Primary(i);
console.log("primaryElement.. "+primaryElement);
var prim = $(primaryElement).val ();
console.log("prim.. "+prim);
if(prim !== false ){
}
else {
alert('Please select atleast 1 primary');
$('#btnsubmit').removeAttr('disabled');
return false;
}
}
$('#btnsubmit').removeAttr('disabled');
return true;
}
I believe you are using the wrong method of interface with the check box.
http://api.jquery.com/prop/
Try using
$(primaryElement).prop("checked");
I have a HTML form having select box. On selection of first drop down, next drop down should be auto filled using AJAX.
On Download Records (id="getCsv") button click event a CSV file is generated. Problem is, I want to make all the fields mandatory. Here is the jquery code
var teacher_name = $("#sel_teacher option:selected").text();
var unittest_name = $("#sel_test1 option:selected").text();
var class_name = $("#sel_class1 option:selected").text();
var class_id = $('#sel_class1').val();
var division_name = $("#sel_div1 option:selected").text();
var division_id = $('#sel_div1').val();
var subject_name = $("#sel_sub1 option:selected").text();
if (teacher_name == "") {
alert('Please Select Teacher Name.');
return false;
} else if(class_name == "") {
alert('Please Select Class Name.');
return false;
} else if(division_name == "") {
alert('Please Select Division Name.');
return false;
} else if(subject_name == "") {
alert('Please Select Subject Name.');
return false;
} else if(unittest_name == "") {
alert('Please Select Unit Test Name.');
return false;
} else {
var myObject = new Object();
myObject.class_name = class_name;
myObject.class_id = class_id;
myObject.division_name = division_name;
myObject.division_id = division_id;
myObject.subject_name = subject_name;
myObject.test_name = unittest_name;
var formData = JSON.stringify(myObject);
$('#getCsv').attr('href','csv_generator.php?data=' + formData);
}
The problem is that when I click Download Records, even though the first select box is empty directly alert box for second select box pops up. I tried to solve this problem using the below, but no luck.
if ($("#sel_teacher").attr("selectedIndex") == 0) {
alert("You haven't selected anything!");
return false;
}
Can anybody please help me with this? Any help is appreciated.
selectedIndex is a property, use prop:
$("#sel_teacher").prop("selectedIndex")
Also, you can simplify your code by retrieving the selected value using just $("#sel_teacher").val() and compare to empty string (assuming the value of that option is empty).
var teacher_name = $("#sel_teacher").val();
// get other <select /> values here...
if (teacher_name == '') {
alert("You haven't selected anything!");
return false;
}
// test other values here...
It might be because of the default value that you have given for the first text-box.Just change the value to "" onclick or on blur on that text-box.
Or you can simply handle this matter via HTML5 attribute required and adding onchange() Event Listener .
<select name="sel_teacher" onchange="get_value();" id="sel_teacher" required>
<option>--Select Teacher Name--</option>
</select>
<script>
function get_value() {
var teacher_name = $("#sel_teacher").val();
// get other <select /> values here...
if (teacher_name == '') {
alert("You haven't selected anything!");
return false;
} else {
// write code when teacher_name is selected
}
}
</script>
I have some problem: I have Rad Combo Box that calls User Types and once I populate all the info I want to create JS function everytime the user click on something else in the Rad Combo Box it will pop up some message
I know that I need to use The OnSelectedIndexChange event but maybe I'm using it on the wrong way please help me
This is my Code: JS
function OnSelectedIndexChange(sender,args) {
var retValRCB = false
var l_UserType = $find("<%=rcbUserType.ClientID %>");
var l_UserTypeInd = l_UserType.get_selectedIndex();
if (!(l_UserTypeInd == null))
retValRCB = true;
else {
alert("Please select rule type");
retValRCB = false;
}
return retValRCB;
}
This is My Code in Asp:
User Type:
ID="rcbUserType" OnClientSelectedIndexChanged="OnSelectedIndexChange" EmptyMessage="Select User Type" runat="server">
function OnSelectedIndexChange(sender, args) {
var l_UserType = $find("ctl00_MainContent_rcbUserType");
var l_UserTypeInd = l_UserType.get_selectedIndex();
if (!(l_UserTypeInd == null)){
alert((l_UserTypeInd+1)+" has been selected");
}
}
We have a webform and here is how the radio code is set up in this php form:
<input type="radio" name="2074" id="2074" value="Yes" class="valuetext" >Yes
<input type="radio" name="2074" id="2074" value="No" class="valuetext" >No
I'm working on some custom validation code that is fine for the text fields, but just hit a snag with radio buttons, so I'm sure this will be an issues for check-boxes
so here is the code that validates,
function blank(field) {
if ((field.type == "text" || field.type == "textarea") && (field.value == " " || field.value == ""))
{
return true;
}
else if ((field.type ="radio" || field.type == "checkbox") && (!(field.checked || field.selected || field.selectedIndex > -1)))
{
return true;
}
else {
return false;
}
}
but when it comes to the radio buttons, it only checks the first radio button it runs into. so for example, if I run the validation and neither radio in the set is checked, it works, gives me the error message i needed, but that is only because it checked the first button, which was empty.
if I select "no", the second option of the radio, it does not work correctly, show me an error message when it should not
if I select "Yes" the first option of the radio, it works as expected.
How do I get JavaScript to grab all the radios in the group, check if any in that group are checked ?
Thank you in advance.
Function that gathers fields that need to be examined:
*Also, that is a json script above this that provides the data for fieldlist*
var field = [], blankFields = [],
listText = [], listItem = [], fieldId = [], label = [];
function checkRequired(fieldList) {
for (var i = 0; i < fieldList.length; i++)
{
listText = fieldList[i];
listText = listText.substring(1, listText.length - 1);
listItem = listText.split("||");
fieldId = listItem[0];
label = listItem[1];
field = document.getElementById(fieldId);
if (visible(field) && blank(field)){
blankFields.push(label);
}
}
//return blankFields;
if (blankFields.length > 0) {
displayError(blankFields);
}
}
You can use document.getElementsByName("2074") and then iterate through to see if any are checked.
Related question:
In JavaScript, how can I get all radio buttons in the page with a given name?
I decided to mix in some jquery which made life tons easier:
else if (field.type=="radio")
{
var radiocheck = $('input[type="radio"][name="' + field.name + '"]:checked').size() > 0;
if (radiocheck == false){
return true;
I have used the code (below) which was featured on jsfiddle. The problem i have is that if i change the option value to be different from the text value, it then adds the value back into the text field on change.
jQuery(function(){
jQuery('.selbox').change(function(){
var val = jQuery(this).val();
var sel = jQuery(this);
if(val != "")
{
if(sel.data("selected"))
{
var oldval = sel.data("selected");
sel
.siblings('select')
.append(jQuery('<option/>').attr("value", oldval).text(oldval));
}
sel
.data("selected", val)
.siblings('select')
.children('option[value=' + val + ']')
.remove();
}
else if(val == "")
{
if(sel.data("selected"))
{
var oldval = sel.data("selected");
sel
.removeData("selected")
.siblings('select')
.append(jQuery('<option/>').attr("value", oldval).text(oldval));
}
}
});
});
I am using code
<option value="1">text here</option>
Please see here for the original code http://jsfiddle.net/BUuZv/2/
Instead of removing them and adding them, you could simply hide/show them like this fiddle
$(function() {
$('.selbox').change(function() {
var val = $(this).val();
var sel = $(this);
if (val != "") {
if (sel.data("selected")) {
var oldval = sel.data("selected");
sel.siblings('select').find('option[value="' + oldval + '"]').show()
}
sel.data("selected", val).siblings('select').children('option[value=' + val + ']').hide();
}
else {
if (sel.data("selected")) {
var oldval = sel.data("selected");
sel.removeData("selected").siblings('select').find('option[value="' + oldval + '"]').show()
}
}
});
});
Was trying to work this out today, here is how I have done it. When the user selects other, it gives a prompt box to add the new option value.
function edit_other(e){ //e just stands for element, it can be any varaible name e is just standard practice after using "this"
if(e.value == "Other"){
//only run function if "other" option has been selected
var proceed = false;
while(proceed == false){
prompt_response = prompt("Please enter new material type:"); //Create Prompt box
if (typeof(prompt_response) == "string"){
prompt_response = prompt_response.trim(); //tidy end
if (prompt_response != ""){//// no value provided by the user on "ok button press"
proceed = true;
//alert('Please Enter a value to continue or press Cancle!');
}
}
if (prompt_response === null){////cancel hits
proceed = false; //make sure proceed is still false
break;
}
}
//once the user enters a valid value add option script
if(proceed == true){
var new_option = document.createElement("option"); //create nre DOM option element
new_option.text = prompt_response; //Make the text value equal to promt repsonse
new_option.value = prompt_response; //Make the option select value equal to promt repsonse
new_option.selected = true; //OPTIONAL: select the new added value, most people will select this if they are adding a new value
e.add(new_option); //add new option
}
}
}
<select id="xxx" onchange="edit_other(this)">
<option value="1"> First Option </option>
<option value="Other">Other</option>
<select>