We Keep Coding

How to enable submit button only if all drop downs inside a while loop are not null

I have this code in my webpage that puts 'n' rows with a dropdown in each of them. Is there a way to enable submit button only if all the dropdowns contain a value (ie) the button should not be enabled even if one dropdown is empty. Also, i want the submit button to be disabled after the first click.
i've tried the following code but doesn't work.
$rowIndex = 0;
while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
<form>
<div>
<select name = error_type id='error_type$rowIndex' class='picker'>
<option disabled selected value> -- select an option -- </option>
<option value=2_Stage_Error>2_Stage_Error</option>
<option value=BG_Error>BG_Error</option>
</select>
</div>
$rowIndex++;
}
<input type='submit' value='SUBMIT' id='submit' onclick=report_submit()disabled
= true />
</form>
JS
<script type= "text/javascript">
$(function() {
$('.picker').on('change', function() {
var $sels = $('.picker option:selected[value=""]');
$("#submit").attr("disabled", $sels.length > 0);
}).change();
});
</script>

Use required on the select statement it specifies the user is required to select a value before submitting the form.
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_select_required

first of all make the button disabled. the submit button i mean.
then try this:
function checkAllHasValue(){
$(".picker").each(function(){
var elem = $(this);
if(elem.val()+"" == "undefined"){
return false;
}
})
return true;
}
$(".picker").on("change",function(){
if(checkAllHasValue){
$("submitbutton").removeAttr("disabled");
}
})

Find a selector and update

I have a three different radio buttons and based on the selection of the radio button I would like to capture which radio button the user clicked and store that in a hidden input textbox for later use.
Here is the code I have tried, which doesn't seem to be working:
//clicked on first radioButton:
$('#Employee').change(function () {
if (this.checked) {
$('#multi').show();
$('#Type').attr("EmployeeSelected");
}
});
//clicked on second radioButton:
$('#Employer').change(function () {
if (this.checked) {
$('#multi').show();
$('#Type').attr("EmployerSelected");
}
});
My page looks like this:
<fieldset id="multi" class="fieldset-auto-width">
<legend>
Selected Form
</legend>
<form action="/PostToDb" method="post">
<input type="text" name="Type" value="xx" />
<div>
......................
</div>
</form>
How do I update the textbox to whichever radio button is selected?

$("input:radio[name=emp]").change(function () {
if ($(this).val()==0) {
$("input:text").val('first radio');
}else if ($(this).val()==1) {
$("input:text").val('second radio');
}else if ($(this).val()==2) {
$("input:text").val('third radio');
}
});
FIDDLE
$('#Employer')--> when using # you will be selecting id as for . it is for class and so on.
$('#Type').attr("EmployerSelected"); to assign a text to input use val() as $('#Type').val("EmployerSelected"); meaning the element with id Type will have the value EmployerSelected

Try replacing .attr() with .val() and use the correct selector as follows:
$('[name="Type"]').val("EmployerSelected");

Try add id attribute to the input box,as
<input id="Type" type="text" name="Type" value="xx" />
hope helpful.

Javascript Adding a href after form is loaded

I have 3 dropdowns. Only when Australia is selected from the country dropdown, I have to show a help hyperlink for the city dropdown. The user can read some guidelines when he selects Australia before he can select a city. For this I want to append the 'City' label with an a href. How can I achieve this? I tried the following but failed:
function ddCountryChange()
{
var ddCountry = document.getElementById("ddCountry");
var tbCity = document.getElementById("tbCity ");
if (ddCountry.value == "AUS"){
tbCity.innerHTML = '<div class="GXIRowTitle">[<u>Help</u>] <span style="font-weight:normal;">City : </span></div><div class="GXIRowControl"><div id="ctl02_ctl00_GXDivLeft_TbCity_TbBoxReadOnly" style="display: none;"> </div><span id="ctl02_ctl00_GXDivLeft_TbCity_TbBoxNonReadOnly" style="display: inline;"><input name="ctl02$ctl00$GXDivLeft$TbCity$TbBox" type="text" maxlength="64" id="ctl02_ctl00_GXDivLeft_TbCity_TbBox" autocomplete="off"><ul id="ctl02_ctl00_AcCity_completionListElem" class="GXAutoComplete_CompletionListElement" style="position: absolute;"></ul></span><input type="image" name="ctl02$ctl00$GXDivLeft$TbCity$Btn" id="ctl02_ctl00_GXDivLeft_TbCity_Btn" align="ABSMIDDLE" src="/ucommand/CRM/images/icn/DropDown.gif" alt="Show List" onclick="javascript:onAutoCompleteViewList("ctl02_ctl00_AcCity");return false;" style="border-width:0px;"></div>';
}
}
While debugging through Firebug, I see that the city label is appended with a 'Help', but once the process finishes, the 'Help' disappears.

Assuming ddCountry is the select element
// Detect when value is changed
ddCountry.addEventListener("change", function(e){
// Is its value now "AUS"?
if(this.value == "AUS"){
// Do stuff such as appending whatever label
}else{
// Hide stuff again?
}
});

How to open a div selecting a value from dropdown in jQuery

I need an application where i have a drop down where i have some values and and my requirement is that when i click any value on that drop down a div will open.I have implemented that but my code is not properly working.Here what i have done so far.
<div class="form-control">
<label class="lebelMergin" for="branch_branchTypeId">
<span class="spanMergin">Office Type<span class="required">*</span></span>
<s:select name="branch.branchTypeId" id="branch_branchTypeId" requiredLabel="true" list="%{dataArr['branchTypeList']}" listValue="name"
listKey="id" headerKey="" headerValue="Select Type" >
</s:select>
</label>
</div>
<div style='display:none;' id='business'>Business Name
<br/>
<br/>
<input type='text' class='text' name='business' value size='20' />
<br/>
</div>
<style>
#business {
display:none;
}
</style>
<script>
(function() {
$('#branch_branchTypeId').on('change', function () {
$("#business").css('display', (this.value == '1') ? 'block' : 'none');
});
But when i clicking on that values in the drop down only for one value the input box is coming but i want the functionality for all the value.Here i am attaching the screen ...For HO the input box is coming but for others it is not.

Which "option" tags do yo have in your select (dropdown)?
May be this would be help:
$('#branch_branchTypeId').on('change', function (event) {
var vl = $(this).val();
var target = $("#business");
if (vl) {
target.show();
} else {
target.hide();
}
});

The problem lies in your test this.value == 1. You can use this.selectedIndex instead.
$('#branch_branchTypeId').on('change', function () {
$("#business").css('display', (this.selectedIndex >= 1) ? 'block' : 'none');
});
Following your comment, I assumed that selectIndex == 0 corresponds to the default option, with business div not displayed.
See Fiddle: http://jsfiddle.net/3nvdeoab/

Button is not visible because of hidden div

I have this HTML code where I have a div and a button.
Now, with jQuery I made the div "hidden" and it will only show when you have selected the correct <option>. But now the button is only visible if the div is too.
HTML:
<div id="great">
Do you like the netherlands?
<input type="text" id="greatBox" value="Why..."
</div>
<input type="button" id="submitbutton" value="Submit">
and the JS/Jquery looks like this
(its spread over the file, the rest is not needed (i guess))
$('#great').hide()
$("#selectlist").change(function(){
var value = $(this).val();
if ($(this).val() == "netherlands") {
$('#great').slideDown(750)
$('#other').hide()
}
if ($(this).val() == "other") {
$('#great').hide()
}
});
There is not yet any jQuery/javascript bound to the button.

You need to close <input type="text" id="greatBox" value="Why..." >
Because it's open the div never gets closed and everything after it will be hidden.