I have exhausted all my options and nothing seems to work. All I want is for the following functionality to be implemented:
When a submit button is clicked -> check if a text field is empty -> if it is, display an error alert and prevent advancing to the next page (if not empty, advance only if the values are between 0 - 100 numerically).
Currently, this is the code snippet that I am using along with other working code:
<form name="agencytrial">
<div class="textcenter">
<input name="AgencyRating" id="AgencyField" type="text" value="" autocomplete="off" class="forceNumeric" onchange="handleChange(this)"; />
<input class="button" id="FormSubmitButton" type="submit" value="Submit" onclick="checkField()"; />
</div>
</form>
<script>
function handleChange(input) {
if (input.value < 0) alert("Value should be between 0 - 100");
if (input.value > 100) alert("Value should be between 0 - 100");
}
</script>
The above code works fine where if someone types something in the field and it does not fall between 0 - 100, it will show an alert and prevent page advancement.
However, if the user leaves the field blank, they can still click the submit button and proceed to the next step without any hindrance. To tackle this issue, I tried implementing the following solution (among many others):
<script type = "text/javascript">
function checkField(){
var x = document.getElementById("AgencyField").value;
if (x === ""){
alert("Value should be between 0 - 100");
return false;
} else {
return true;
}
}
</script>
Unfortunately, the above code fails as users can still proceed by clicking the submit button without entering anything in the field.
Your input on resolving this problem would be greatly appreciated!
------------EDIT--------------
After incorporating suggestions from everyone, I made some modifications to my code which has brought it really close to the desired outcome. BUT HERE'S THE ISSUE I AM FACING:
When I input a number greater than 100, the alert message pops up but does NOT ALLOW ADVANCEMENT.
On the other hand, when I leave the field blank, the alert pops up but ALLOWS PROCEEDING.
What could be causing this discrepancy?
<form name="agencytrial">
<div class="textcenter">
<input name="AgencyRating" id="AgencyField" type="text" value="" autocomplete="off" class="forceNumeric" onchange="handleChange(this)"/>
<input class="button" id="FormSubmitButton" type="submit" value="Submit" onclick="handleChange()">
</div>
</form>
<script>
function handleChange(input){
var x = document.getElementById("AgencyField").value;
if (x < 0 || x > 100 || x === "") alert("Value should be between 0 - 100");
}
</script>
-------EDIT #2--------
Below is the full version of my updated code. I am now exclusively using "form onsubmit" and the "onclick" functions as the onchange method was unable to prevent key or button clicks when the form was left empty (i.e., untouched).
The alert displays correctly either on submission or button click, however, the page always advances after closing the alert.
<?php
$compTime = 8;
if ($text === '') { $text = 'How likely was it that you caused the tone to occur?|Type your response on a scale from 0-100.'; }
$texts = explode('|', $text);
$mainText = array_shift($texts);
?>
<!DOCTYPE html>
<html>
<form onsubmit="return handleChange();">
<div class="textcenter">
<h3><?php echo $mainText; ?></h3>
<?php
foreach ($texts as $t) {
echo '<p>' . $t . '</p>';
}
?>
</div>
<div class="textcenter">
<input name="AgencyRating" id="AgencyField" type="text" value="" autocomplete="off" class="forceNumeric"/>
<input class="button" id="FormSubmitButton" type="submit" value="Submit" onclick="return handleChange()"/>
</div>
</form>
<style type="text/css">
img {
display: block;
position: relative;
bottom: -40px;
left: -21px;
max-width:520px;
max-height:520px;
width: auto;
height: auto;
}
</style>
<body>
<img src="/tapa/Experiment/images/scale.jpg"</img>
</body>
</html>
<script type="text/javascript">
function handleChange(input) {
var x = document.getElementById("AgencyField").value;
if (x === "" || x < 0 || x > 100) {
alert("Value should be between 0 - 100");
return false;
}
return true;
}
</script>
*****EDIT*****
A new script resolved the issue. I appreciate all the contributions and while the suggested solutions were valid, they didn't fit my specific scenario, for reasons I might not entirely comprehend but that's alright.