I've searched and tried just about everything and nothing works. I'm just trying to have this happen:
onclick a submit button --> check to see if a text field is empty --> if it is, alert an error and do not advance to the next page (if not, advance but only if the values are between 0 - 100 numerically.
Here's what I've got right now (other code I've found that works):
<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, and if someone types something into the field, and if it is not between 0 - 100, then it will alert and error and NOT advance the page.
But if no one types anything, they can just click the submit button and advance the page, and the above code does nothing to stop that. So I tried to use something like the following (one of many attempts):
<script type = text/javascript>
function checkField(){
var x = document.getElementById(AgencyField);
if (var x = ){
alert(Value should be between 0 - 100);
return false;
}else{
return true;
}
</script>
The above code fails, and they can just click the submit button and advance without typing anything into the field.
Any help would be majorly appreciated!
------------EDIT--------------
Based on everyone's comments, I've rewritten my code and it's very close. BUT HERE'S WHAT I DON'T GET:
When I input number > 100, it alerts message and DOES NOT ADVANCE.
When I leave it blank, it alerts message and ADVANCES.
Why the difference?
<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--------
Here's all my code below. I am just using form onsubmit and the onclick codes now, as the onchange code was not going to stop the key or the button from being clicked with the form being empty (i.e., never modified).
I've got the alert popping up with either or the button being clicked, but the page always advances after I close the alert.
<?php
$compTime = 8; // time in seconds to use for 'computer' timing
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*****
I have solved the problem using a new script. Thanks to everyone and the solutions provided would usually work, but just not in my case for reasons not entirely clear to me but not worth explaining.
