I have a set of nested If/Else statements that are intended to determine the type of machine, customer, and part source in order to direct the person using the site to the correct department for ordering parts. Here is the code I have:
$('#partName').catcomplete({
minLength: 2,
source: data,
select: function ( event, ui ) {
$("#partNumber").text(ui.item.Number);
$("#partDesc").text(ui.item.PartDesc);
// Determine machine type
if (ui.item.Type == "All Machines") {
$("#machineType").html("<div class='ui-widget'><div class = 'ui-state-highlight ui-corner-all' style='margin=top:5px;'><p><span class='ui-icon ui-icon-info' style='float: left; margin-right: 6px;'></span> Message for parts that go to all machines</p></div></div>");
}
else if (ui.item.Type == "Machine Type 1") {
$("#machineType").html("<div class='ui-widget'><div class = 'ui-state-error ui-corner-all' style='margin=top:5px;'><p><span class='ui-icon ui-icon-alert' style='float: left; margin-right: 6px;'></span> Message for parts ONLY for Machine Type 1</p></div></div>");
}
else if (ui.item.Type == "Machine Type 2") {
$("#machineType").html("<div class='ui-widget'><div class = 'ui-state-error ui-corner-all' style='margin=top:5px;'><p><span class='ui-icon ui-icon-alert' style='float: left; margin-right: 6px;'></span> Message for parts ONLY for Machine Type 2 </p></div></div>");
}
// How determine who to transfer call to
if ($('#radio1').is(':checked')){
if (ui.item.type == "Machine Type 1" || "All Machines") {
if (ui.item.Source == 1) {
$("#partSource").html("<div class='ui-widget'><div class = 'ui-state-highlight ui-corner-all' style='margin=top:5px;'><p><span class='ui-icon ui-icon-info' style='float: left; margin-right: 6px;'></span> Text containing extension #1</p></div></div>");
}
if (ui.item.Source == 2) {
$("#partSource").html("<div class='ui-widget'><div class = 'ui-state-highlight ui-corner-all' style='margin=top:5px;'><p><span class='ui-icon ui-icon-info' style='float: left; margin-right: 6px;'></span> Text containing extension #2</p></div></div>");
}
}
if (ui.item.type == "Machine Type 2") {
if (ui.item.Source == 1) {
$("#partSource").html("<div class='ui-widget'><div class = 'ui-state-highlight ui-corner-all' style='margin=top:5px;'><p><span class='ui-icon ui-icon-info' style='float: left; margin-right: 6px;'></span> Text containing extension #1</p></div></div>");
}
if (ui.item.Source == 2) {
$("#partSource").html("<div class='ui-widget'><div class = 'ui-state-highlight ui-corner-all' style='margin=top:5px;'><p><span class='ui-icon ui-icon-info' style='float: left; margin-right: 6px;'></span> Text containing extension #2</p></div></div>");
}
}
}
else {
if (ui.item.type == "Machine Type 1") {
if (ui.item.Source == 1) {
$("#partSource").html("<div class='ui-widget'><div class = 'ui-state-error ui-corner-all' style='margin=top:5px;'><p><span class='ui-icon ui-icon-alert' style='float: left; margin-right: 6px;'></span> This machine and its parts are not available to this customer. Please try your search again.</p></div></div>");
}
if (ui.item.Source == 2) {
$("#partSource").html("<div class='ui-widget'><div class = 'ui-state-error ui-corner-all' style='margin=top:5px;'><p><span class='ui-icon ui-icon-alert' style='float: left; margin-right: 6px;'></span> This machine and its parts are not available to this customer. Please try your search again.</p></div></div>");
}
}
if (ui.item.type == "Machine Type 2" || "All Machines") {
if (ui.item.Source == 1) {
$("#partSource").html("<div class='ui-widget'><div class = 'ui-state-highlight ui-corner-all' style='margin=top:5px;'><p><span class='ui-icon ui-icon-info' style='float: left; margin-right: 6px;'></span> Text containing extension #3</p></div></div>");
}
if (ui.item.Source == 2) {
$("#partSource").html("<div class='ui-widget'><div class = 'ui-state-highlight ui-corner-all' style='margin=top:5px;'><p><span class='ui-icon ui-icon-info' style='float: left; margin-right: 6px;'></span> Text containing extension #4</p></div></div>");
}
}
}
The block of HTML containing the form, with radio buttons:
<div id="radio">
<strong>Select Machine: </strong>
<input type="radio" value="fsa" id="radio1" name="radio" checked><label for="radio1">Customer Type 1</label>
<input type="radio" value="evo" id="radio2" name="radio"><label for="radio2">Customer Type 2</label>
</div>
<label for="partName"><strong>Part Name:</strong></label>
<input id="partName" size="50">
<input class="ui-state-default ui-corner-all" type="button" id="clearPartName" onClick="clear_all()" value="Clear Search">
</p>
<div id="partData">
<div id="partNumberField">
<p><strong>PBS Part Number:</strong></p>
<div style="margin: 2px" class="ui-widget-content" id="partNumber"> </div>
</div>
<div id="partDescField">
<p><strong>Part Description:</strong></p>
<div style="margin: 2px" class="ui-widget-content" id="partDesc"> </div>
</div>
<div id="machineTypeField">
<div style="margin: 2px" id="machineType"> </div>
</div>
<div id="partObtainField">
<p><strong>Source for Part:</strong></p>
<div style="margin: 2px" id="partSource"> </div>
</div>
</div>
However, if ($('#radio1').is(':checked')) doesn't appear to be working properly, as selecting Customer Type 2 (which would make the state of #radio1 false) and Machine Type 1 does not return the error message indicating that this machine and its parts are not available to the selected customer.
I'm utterly baffled by trying to test this Radio button state, as nothing I've found seems to work properly when I actually run the page.
