Reputation: 97
Hopefully this is basic JavaScript and the answer is easy since I am new at this. I just want to make sure all required fields are not blank before the user can proceed. In my <form>
action
=
payment.php
and the submit button contains onclick="insert();"
When child_name is left blank, it just proceeds to the next page rather than alerting. Here is the code:
<script type="text/javascript">
function insert() {
if (window.XMLHttpRequest) {
xmlhttp = new XLMHttpRequest();
} else {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
cn1 = 'child_name'+document.getElementById('child_name').value;
ag2 = 'age'+document.getElementById('age').value;
hm3 = 'hometown'+document.getElementById('hometown').value;
bg4 = 'boy_girl'+document.getElementById('boy_girl').value;
fn5 = 'first_name'+document.getElementById('first_name').value;
ln6 = 'last_name'+document.getElementById('last_name').value;
email = 'email'+document.getElementById('email').value;
ad8 = 'address1'+document.getElementById('address1').value;
ad9 = 'address2'+document.getElementById('address2').value;
ct10 = 'city'+document.getElementById('city').value;
st11 = 'state'+document.getElementById('state').value;
zp12 = 'zip'+document.getElementById('zip').value;
if (cn1.equals("")) {
xmlhttp.open('POST', 'payment.php', true);
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlhttp.send(cn1&ag2&hm3&bg4&fn5&ln6&email$ad8&ad9&ct10&st11&zp12);
} else {
alert ("Please enter all required fields.");
}
}
</script>
Upvotes: 1
Views: 228
Reputation: 4010
If I were you, I'd give each one of those elements a common name or a class.
For example:
<input id="child_name" class="not_blank" type="text">
<input id="age" class="not_blank" type="text">
<input id="hometown" class="not_blank" type="text">
Since you are tying all those elements as a group by class.
Then your javascript would be a lot easier:
var flagInvalid = false;
var tempArray = document.getElementsByClassName("not_blank");
for (var i = 0; i < tempArray.length; i++)
{
if (tempArray[i].value == "" || tempArray[i].value === undefined || tempArray[i].value == null){
flagInvalid = true;
break;
}
}
if (flagInvalid == false){
xmlhttp.open('POST', 'payment.php', true);
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlhttp.send(cn1&ag2&hm3&bg4&fn5&ln6&email$ad8&ad9&ct10&st11&zp12);
} else { alert ("Please enter all required fields."); }
Btw, I strongly advise not to use "alert". Try to create a messaging system on the document itself. Like:
<span id="log" class="hidden" style="color:red"><b>"Please enter all required fields." <b></span>
Your css would look like this:
.hidden { display: none; }
.show { display: inline; }
Your javascript would be changed to:
if (flagInvalid == false){
var log = document.getElementById("log");
log.className = 'hidden';
xmlhttp.open('POST', 'payment.php', true);
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlhttp.send(cn1&ag2&hm3&bg4&fn5&ln6&email$ad8&ad9&ct10&st11&zp12);
} else {
var log = document.getElementById("log");
log.className = 'show';
}
Upvotes: 1
Reputation: 1596
Try changing the function to this: (NOTE: you have to add more tests to the if clause for the rest of the elements)
function insert() {
if (window.XMLHttpRequest) {
xmlhttp = new XLMHttpRequest();
} else {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
if (document.getElementById('child_name').value === '' ||
document.getElementById('age').value === '' ||
...more tests... ||
document.getElementById('zip').value === '') {
alert ("Please enter all required fields.");
return false;
} else {
cn1 = 'child_name'+document.getElementById('child_name').value;
ag2 = 'age'+document.getElementById('age').value;
hm3 = 'hometown'+document.getElementById('hometown').value;
bg4 = 'boy_girl'+document.getElementById('boy_girl').value;
fn5 = 'first_name'+document.getElementById('first_name').value;
ln6 = 'last_name'+document.getElementById('last_name').value;
email = 'email'+document.getElementById('email').value;
ad8 = 'address1'+document.getElementById('address1').value;
ad9 = 'address2'+document.getElementById('address2').value;
ct10 = 'city'+document.getElementById('city').value;
st11 = 'state'+document.getElementById('state').value;
zp12 = 'zip'+document.getElementById('zip').value;
xmlhttp.open('POST', 'payment.php', true);
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlhttp.send(cn1&ag2&hm3&bg4&fn5&ln6&email$ad8&ad9&ct10&st11&zp12);
}
}
Upvotes: 1
Reputation: 551
There are a couple issues here:
cn1 = 'child_name'+document.getElementById('child_name').value;
In this case you are assigning cn1 to the String 'child_name'
+ the value of your child_name textbox... it will never equal an empty String.
Secondly, you'll want your insert()
method to return false
on error in order to stop the button's intended action.
Upvotes: 2