• We’re currently investigating an issue related to the forum theme and styling that is impacting page layout and visual formatting. The problem has been identified, and we are actively working on a resolution. There is no impact to user data or functionality, this is strictly a front-end display issue. We’ll post an update once the fix has been deployed. Thanks for your patience while we get this sorted.

C# question

Z

Zeddicus

Member
A question for C# experts.

Im wanting to create a aspx web form with some functionality, but my C# or coding in general knowledge isnt quite there yet.


The form will have several fields with pull down boxes that will have options such as "pass" or "fail"


What I would like to have is a "pass or fail" text box that will display Pass as long as none of the pull downs have fail selected or it will display Fail if any of the pull downs have fail selected.


The next step is to have a "reject number" text box that will be a required field but only if the "pass or fail" field displays Fail or in other words if the "pass or fail" field reads Fail, the form cant be submitted until a number value is entered into the "reject number" field.

Any help would be much appreciated.
 
Sounds like you want some client side functionality.

jQuery should easily do what you want.

It can set the global pass/fail when every drop down is changed, as well as prevent form submission until the global is set.

Can you post what you've got so far?
 
^ remember never to trust client-side validation (javascript might be turned off etc). do the same validation on the server side.
 
If they were checkboxes instead of dropdowns, you could potentially do the "pass or fail" text box thing in CSS.

But the validation absolutely must be done on the server side. Though you can also do it on the client side purely for a better user experience.
 
That should be quite easy to do using JavaScript (I'd opt for jQuery). You might be able to do it with the built-in .NET Validation controls but I'm not sure. I'd go the jQuery route.

I'm at work so I don't have the time to write up a big reply though. If no one has given you more info by the time I get home tonight, I will later.

EDIT: I went ahead and threw something together. It ain't pretty but I think it does what you need. You'll need the jQuery library (I used 1.x, but 2.x will work if you don't need IE 8 or lower support) in the same directory as this .html file:
Code: 
<html>
	<head>
		<title>Page</title>
		<script src="jquery-1.11.3.min.js" lang="javascript" type="text/javascript"></script>
		<script lang="javascript" type="text/javascript">
			$(function() {
				AssignEventHandlers();
				CheckDropDownStatus();
			});
			
			function AssignEventHandlers() {
				// ensure pass/fail is re-checked when dropdown list selected item is changed
				$("select").change(function(e) { return CheckDropDownStatus(); });
				
				// run validation check when button is clicked
				$( "#submit" ).click(function() {
  				RunFormSubmitValidation();
				});
			}
			
			function RunFormSubmitValidation() {
				var numberOfFail = GetFailedCount();
				
				if ($("#rejectNumber").val() == "" && numberOfFail > 0) {
					alert("A RejectNumber is required.");
				}
			}
			
			function GetFailedCount() {
				var numberOfFail = 0;
				$( "select option:selected").each(function(index) {
  				if ($(this).val() == "fail") {
  					numberOfFail += 1;
  				}
				});
				
				return numberOfFail;
			}
			
			function CheckDropDownStatus() {
				var numberOfFail = GetFailedCount();
				
				if (numberOfFail > 0) {
					$("#status").text("Fail");
					$("#rejectNumber").prop("disabled", false);
				}
				else {
					$("#status").text("Pass");
					$("#rejectNumber").prop("disabled", true);
				}
			}
		</script>
	</head>
	<body>
		<p>
			<select>
			  <option value="pass">Pass</option>
			  <option value="fail">Fail</option>
			</select>
		</p>
		<p>	
			<select>
			  <option value="pass">Pass</option>
			  <option value="fail">Fail</option>
			</select>
		</p>
		<p>	
			<select>
			  <option value="pass">Pass</option>
			  <option value="fail">Fail</option>
			</select>
		</p>
		<p>
			Pass or Fail: <span id="status"></span>
		</p>
		<p>
			<label for="rejectNumber">Reject Number:</label>
			<input type="text" name="rejectNumber" id="rejectNumber" />
		</p>
		<p>
			<input type="submit" value="Submit" id="submit" />
		</p>	
	</body>
</html>

Also, this is just a quick proof-of-concept. You'd want more robust validation on the form submit, as well as server-side validation in C# since people can just turn off JavaScript and what I did would above would not function.
 
I also forgot to mention that all the data entered in this form will be bound to an SQL table.

That code most definitely works as proof of concept. It does everything I mentioned, though I'm not sure I can bind the html <select> fields to an SQL table column. I haven't had any problems getting the data to SQL using asp drop down list controls, so I'm curious if I can get that java script to work with the controls instead of the html select fields.
 
So far in testing, it looks like the java script works fine if you change the html elements to asp controls and the data gets inserted into sql with one exception. I had to change the span element to an asp label. It displays the result fine, but doesn't insert that result into sql.

The problem is the fail condition popup will tell you that the reject number field is required, but the data gets inserted into SQL anyway.

Looks like there definitely needs to be some server side validation based on the result shown in the Pass or Fail label so if it reads Fail, the form wont submit until a value is entered in the rejectNumber field.
 
You must log in or register to reply here.

TRENDING THREADS

Back
Top