Remove All Elements with the Same Class in Pure JavaScript

Remove All Elements with the Same Class in Pure JavaScript - javascript

I have a form that is being validated once the user clicks submit. If there is an error, a <span> tag with the class message is displayed above each input field that is empty. When the user makes the correction and clicks submit again, I want all the message classes to be removed that way I can validate the inputs again without having to worry about duplicating the error messages.
HTML
<div class="row">
<div class="column is-6--tablet">
<h2>Personal Information</h2>
<div class="row">
<div class="column is-3">
<span class="message">Please enter your first name.</span>
<label for="xFIRST_NAME">First Name</label>
</div>
<div class="column is-9">
<input type="text" name="xFIRST_NAME" value="<?php echo $xFIRST_NAME; ?>" required>
</div>
</div>
<div class="row">
<div class="column is-3">
<span class="message">Please enter your last name.</span>
<label for="xLAST_NAME">Last Name</label>
</div>
<div class="column is-9">
<input type="text" name="xLAST_NAME" value="<?php echo $xLAST_NAME; ?>" required>
</div>
</div>
<div class="row">
<div class="column is-3">
<span class="message">Please enter your phone.</span>
<label for="XPHONE">Phone</label>
</div>
<div class="column is-9">
<input type="tel" name="xPHONE" value="<?php echo $xPHONE; ?>" required>
</div>
</div>
<div class="row">
<div class="column is-3">
<label for="xEMAIL">Email</label>
</div>
<div class="column is-9">
<input type="email" name="xEMAIL" value="<?php echo $xEMAIL; ?>" required>
</div>
</div>
<div class="row patient-type">
<div class="column is-12">
<hr>
<input type="radio" name="xPATIENT_STATUS" id="NEW_PATIENT" value="New Patient" <?php echo ($xPATIENT_STATUS === 'New Patient' ? 'checked' : ''); ?> required>
<label for="NEW_PATIENT"> New Patient</label>
<input type="radio" name="xPATIENT_STATUS" id="EXISTING_PATIENT" value="Existing Patient" <?php echo ($xPATIENT_STATUS === 'Existing Patient' ? 'checked' : ''); ?>>
<label for="EXISTING_PATIENT"> Existing Patient</label>
</div>
</div>
</div>
</div>
JavaScript
var messages = document.querySelectorAll('.message');
for(var i = 0; 1 < messages.length; i++)
{
messages[i].parentNode.removeChild(messages[i]);
}
The error I am getting says TypeError: messages[i] is undefined
How can I query all the classes message and remove them?I have seen similar questions on here but none of them seem to answer what I am looking for.

You simply have a typo in your for statement, replace 1 with i in the predicate
var messages = document.querySelectorAll('.message');
for(var i = 0; i < messages.length; i++) {
messages[i].parentNode.removeChild(messages[i]);
}
Also note, you could use messages[i].remove() for shorter syntax. (mdn)

You have for(var i = 0; 1 < messages.length; i++) but the 1 should be your variable named i instead. like this: for(var i = 0; i < messages.length; i++)
Right now your code reads "keep looping if the number 1 is less than the number of messages"
var messages = document.querySelectorAll('.message');
for(var i = 0; i < messages.length; i++)
{
messages[i].parentNode.removeChild(messages[i]);
}
<div class="row">
<div class="column is-6--tablet">
<h2>Personal Information</h2>
<div class="row">
<div class="column is-3">
<span class="message">Please enter your first name.</span>
<label for="xFIRST_NAME">First Name</label>
</div>
<div class="column is-9">
<input type="text" name="xFIRST_NAME" value="<?php echo $xFIRST_NAME; ?>" required>
</div>
</div>
<div class="row">
<div class="column is-3">
<span class="message">Please enter your last name.</span>
<label for="xLAST_NAME">Last Name</label>
</div>
<div class="column is-9">
<input type="text" name="xLAST_NAME" value="<?php echo $xLAST_NAME; ?>" required>
</div>
</div>
<div class="row">
<div class="column is-3">
<span class="message">Please enter your phone.</span>
<label for="XPHONE">Phone</label>
</div>
<div class="column is-9">
<input type="tel" name="xPHONE" value="<?php echo $xPHONE; ?>" required>
</div>
</div>
<div class="row">
<div class="column is-3">
<label for="xEMAIL">Email</label>
</div>
<div class="column is-9">
<input type="email" name="xEMAIL" value="<?php echo $xEMAIL; ?>" required>
</div>
</div>
<div class="row patient-type">
<div class="column is-12">
<hr>
<input type="radio" name="xPATIENT_STATUS" id="NEW_PATIENT" value="New Patient" <?php echo ($xPATIENT_STATUS === 'New Patient' ? 'checked' : ''); ?> required>
<label for="NEW_PATIENT"> New Patient</label>
<input type="radio" name="xPATIENT_STATUS" id="EXISTING_PATIENT" value="Existing Patient" <?php echo ($xPATIENT_STATUS === 'Existing Patient' ? 'checked' : ''); ?>>
<label for="EXISTING_PATIENT"> Existing Patient</label>
</div>
</div>
</div>
</div>

I see an error in your foor loop. 1 < messages.length is probably always true. Replace 1 with i:
for(var i = 0; i < messages.length; i++)
{
messages[i].parentNode.removeChild(messages[i]);
}

If I'm understanding you right:
var messages = document.querySelectorAll('.message');
for(var i = 0; 1 < messages.length; i++)
{
messages[i].classList.remove('message');
}

Related

JS validation mistakes

I got a problem with my validation of textboxes.
I am trying to get something like this.
Click on the button, give a message when something is not filled in, while you fill the empty textbox, the 1 message of that textbox should dissapear.
If you click the button again, with 1 empty textbox, only the message of that textbox should appear.
If you click it twice with nothing filled, it should only appear once ...
I messed something up here ...
can someone get me on again?
Thank you in advance!
var list2 = [];
function valideer(el) {
divOutput = document.getElementById("msgbox1");
var strValideer = "<ul>";
if (document.getElementById("naam").value === "") {
list2.push("naam");
} if (document.getElementById("voornaam").value === "") {
list2.push("voornaam");
} if (document.getElementById("straatnr").value === "") {
list2.push("straatnr");
} if (document.getElementById("postgem").selectedIndex === 0) {
list2.push("postgem");
} if (document.getElementById("telgsm").value === "") {
list2.push("telgsm");
} if (document.getElementById("email").value === "") {
list2.push("email");
}
for (var i = 0; i < list2.length; i++) {
strValideer += "<li><b>" + list2[i] + ": </b>verplicht veld</li>";
}
strValideer += "</ul>";
divOutput.innerHTML = strValideer;
}
function inputChange(el) {
divOutput = document.getElementById("msgbox1");
strValideer = "<ul>";
var naam = document.getElementById("naam").value;
if (naam !== "") {
list2.splice(list2.indexOf(el.name), 1);
}
for (var i = 0; i < list2.length; i++) {
strValideer += "<li><b>" + list2[i] + ": </b>verplicht veld</li>";
}
strValideer += "</ul>";
divOutput.innerHTML = strValideer;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="bootstrap/css/bootstrap_custom.min.css" type="text/css" rel="stylesheet" />
<!--lay-out met bootstrap grid-->
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="woodfactory.js" type="text/javascript"></script>
</head>
<body>
<section class="container" id="userform">
<form action="js_form_ontvanger.html" method="get" class="form-horizontal" name="frmUserform" id="frmUserform" onsubmit="return validate(this)" oninput="inputChange(this)">
<fieldset>
<legend>Persoonlijke gegevens</legend>
<div class="container">
<div class="row">
<div class="span7">
<div class="control-group">
<label class="control-label" for="naam">naam:</label>
<div class="controls">
<input type="text" id="naam" name="naam" placeholder="naam" required onsubmit="valideer(this)" onclick="inputChange(this)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="voornaam">voornaam:</label>
<div class="controls">
<input type="text" id="voornaam" name="voornaam" placeholder="voornaam" required onsubmit="valideer(this)" onclick="inputChange(this)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="straatnr">straat+nr:</label>
<div class="controls">
<input type="text" id="straatnr" name="straatnr" placeholder="straat+nr" required onsubmit="valideer(this)" onclick="inputChange(this)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="postgem">post+gem:</label>
<div class="controls">
<select id="postgem" required onsubmit="valideer(this)" onclick="inputChange(this)">
<option value="">-- maak een keuze --</option>
<option value="2000">2000 Antwerpen</option>
<option value="9000">9000 Gent</option>
<option value="9300">9300 Aalst</option>
<option value="9400">9400 Ninove</option>
<option value="9450">9450 Haaltert</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="telgsm">tel/gsm:</label>
<div class="controls">
<input type="text" id="telgsm" name="telgsm" placeholder="tel/gsm" required onsubmit="valideer(this)" onclick="inputChange(this)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">email:</label>
<div class="controls">
<input type="email" id="email" name="email" placeholder="e-mail" required onsubmit="valideer(this)" onclick="inputChange(this)">
</div>
</div>
<!--einde span7-->
</div>
<div class="span4 valid">
<div id="msgbox1" class="alert alert-error">
<div class="span1">
</div>
</div>
</div>
<div class="span1">
<div class="span1">
</div>
<!--einde row-->
</div>
<!--einde container-->
</div>
</div>
</fieldset>
<fieldset>
<div class="container">
<div class="row">
<div class="span7">
<div class="control-group">
<div class="controls">
</div>
</div>
<div class="control-group">
<div class="controls">
</div>
</div>
<div class="control-group">
<div class="controls">
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-success" onclick="valideer(this)">Verzenden</button>
</div>
</div>
<div class="span4 valid">
<div id="msgbox3" class="alert alert-success"></div>
</div>
<div class="span1"><!--lege kolom--></div>
<!--einde row-->
</div>
<!--einde container-->
</div>
</fieldset>
</form>
</section>
<footer class="container">
<p>© 2013 The Wood Factory </p>
</footer>
</body>
</html>

I feel like your approach is a little more complicated than it needs to be.. See my attempt below
function valideer(current) {
var ids = ['naam', 'voornaam', 'straatnr', 'postgem', 'telgsm', 'email'];
var str = '<ul>';
ids.forEach(function(id) {
var el = document.getElementById(id);
if (el.value === '' && el !== current) {
str += "<li><b>" + id + ": </b>verplicht veld</li>";
}
});
str += '</ul>';
var outputDiv = document.getElementById("msgbox1");
outputDiv.innerHTML = str;
}
function handleFormSubmit(ev) {
ev.preventDefault();
valideer();
return false;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="bootstrap/css/bootstrap_custom.min.css" type="text/css" rel="stylesheet" />
<!--lay-out met bootstrap grid-->
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="woodfactory.js" type="text/javascript"></script>
</head>
<body>
<section class="container" id="userform">
<form action="js_form_ontvanger.html" method="get" class="form-horizontal" name="frmUserform" id="frmUserform" onsubmit="handleFormSubmit">
<fieldset>
<legend>Persoonlijke gegevens</legend>
<div class="container">
<div class="row">
<div class="span7">
<div class="control-group">
<label class="control-label" for="naam">naam:</label>
<div class="controls">
<input type="text" id="naam" name="naam" placeholder="naam" required onclick="valideer(this)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="voornaam">voornaam:</label>
<div class="controls">
<input type="text" id="voornaam" name="voornaam" placeholder="voornaam" required onclick="valideer(this)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="straatnr">straat+nr:</label>
<div class="controls">
<input type="text" id="straatnr" name="straatnr" placeholder="straat+nr" required onclick="valideer(this)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="postgem">post+gem:</label>
<div class="controls">
<select id="postgem" required onclick="valideer(this)">
<option value="">-- maak een keuze --</option>
<option value="2000">2000 Antwerpen</option>
<option value="9000">9000 Gent</option>
<option value="9300">9300 Aalst</option>
<option value="9400">9400 Ninove</option>
<option value="9450">9450 Haaltert</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="telgsm">tel/gsm:</label>
<div class="controls">
<input type="text" id="telgsm" name="telgsm" placeholder="tel/gsm" required onclick="valideer(this)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">email:</label>
<div class="controls">
<input type="email" id="email" name="email" placeholder="e-mail" required onclick="valideer(this)">
</div>
</div>
<!--einde span7-->
</div>
<div class="span4 valid">
<div id="msgbox1" class="alert alert-error">
<div class="span1">
</div>
</div>
</div>
<div class="span1">
<div class="span1">
</div>
<!--einde row-->
</div>
<!--einde container-->
</div>
</div>
</fieldset>
<fieldset>
<div class="container">
<div class="row">
<div class="span7">
<div class="control-group">
<div class="controls">
</div>
</div>
<div class="control-group">
<div class="controls">
</div>
</div>
<div class="control-group">
<div class="controls">
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-success" onclick="valideer(this)">Verzenden</button>
</div>
</div>
<div class="span4 valid">
<div id="msgbox3" class="alert alert-success"></div>
</div>
<div class="span1">
<!--lege kolom-->
</div>
<!--einde row-->
</div>
<!--einde container-->
</div>
</fieldset>
</form>
</section>
<footer class="container">
<p>© 2013 The Wood Factory </p>
</footer>
</body>
</html>
Some notes and observations:
Since the only check being used for validation is if it contains, an empty string, I have generalised the valideer function to iterate and operate on a given array of ids. This can be made even better by querying for inputs on your form using a DOM query and handling it like that.
You have added a lot of inline event handlers in your dom.. Some of them are redundant and not really needed. For example, having a simgle onsubmit on your form element should suffice (no need to add it for every input inside the form)
You were using a global variable list2 this is what was causing the repeated entries each time you click the button. Localising the scope would fix that (by moving it inside a function)

You're already using required property, which means you no longer need a js function to validate if your inputs are empty or not.
You should also notice that list2 is a global variable, which means that you should clean it at the end of every valideer() invocation.
All in all, you code seems very verbose .. try to find a better way to express you needs.

Form validation with multiple highlighted fields

I have a registration form that I would like to have multiple field validation. What I mean by this is if more than one field is not filled in it will be highlighted red. I have some code already written but instead of highlighting the field not filled in, it's highlighting all of them. I realise it is quite long winded but I'm fairly new to this. My JS code is as follows:
`function formCheck() {
var val = document.getElementById("fillMeIn").value;
var val = document.getElementById("fillMeIn2").value;
var val = document.getElementById("fillMeIn3").value;
var val = document.getElementById("fillMeIn4").value;
var val = document.getElementById("fillMeIn5").value;
var val = document.getElementById("fillMeIn6").value;
var val = document.getElementById("fillMeIn7").value;
if (val == "") {
alert("Please fill in the missing fields");
document.getElementById("fillMeIn").style.borderColor = "red";
document.getElementById("fillMeIn2").style.borderColor = "red";
document.getElementById("fillMeIn3").style.borderColor = "red";
document.getElementById("fillMeIn4").style.borderColor = "red";
document.getElementById("fillMeIn5").style.borderColor = "red";
document.getElementById("fillMeIn6").style.borderColor = "red";
document.getElementById("fillMeIn7").style.borderColor = "red";
return false;
}
else {
document.getElementById("fillMeIn").style.borderColor = "green";
document.getElementById("fillMeIn2").style.borderColor = "green";
document.getElementById("fillMeIn3").style.borderColor = "green";
document.getElementById("fillMeIn4").style.borderColor = "green";
document.getElementById("fillMeIn5").style.borderColor = "green";
document.getElementById("fillMeIn6").style.borderColor = "green";
document.getElementById("fillMeIn7").style.borderColor = "green";
}
}`
My HTML is as follows:
'<form id="mbrForm" onsubmit="return formCheck();" action="thanks.html" method="post">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 vertical-gap">
FIRST NAME:
<input id="fillMeIn" type="text" class="form-control" placeholder="First Name" >
</div>
<div class="col-md-4 vertical-gap">
LAST NAME:
<input id="fillMeIn2" type="text" class="form-control" placeholder="Last Name" >
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 vertical-gap">
ADDRESS:
<input id="fillMeIn3" type="text" class="form-control vertical-gap" placeholder="First Line" >
<input id="fillMeIn4" type="text" class="form-control vertical-gap" placeholder="Second Line" >
<input id="fillMeIn5" type="text" class="form-control vertical-gap" placeholder="Town/City" >
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 vertical-gap">
POST CODE:
<input id="fillMeIn6" type="text" class="form-control vertical-gap" placeholder="Postcode" >
</div>
<div class="col-md-4 vertical-gap">
PHONE No:
<input type="number" class="form-control vertical-gap" placeholder="Tel no">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
EMAIL ADDRESS:
<input id="fillMeIn7" type="email" class="form-control vertical-gap" placeholder="Email address" >
</div>
<div class="col-md-2"></div>
</div>
<div class="row vertical-gap">
<div class="col-md-2"></div>
<div class="col-md-8">
DISCIPLINE:
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Cross Country"> CROSS COUNTRY
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Enduro"> ENDURO
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Downhill"> DOWNHILL
</label>
</div>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<!--<button type="button" input type="hidden" class="btn btn-success" name="redirect" value="thanks.html">SUBMIT</button>-->
<input type="submit" value="SUBMIT" class="btn btn-success btn-lg">
</div>
<div class="col-md-2"></div>
</div>
</form>'
Thanks!

You could have the ids in an Array, iterate through its values, and execute the repeatable code in a function that groups all the logic inside.
example :
["fillMeIn1", "fillMeIn2", "fillMeIn3", "fillMeIn4"].each(function(id){
// do things with id
})

Why not use the html "required" property instead?
If you want to do this with JS, you should give each variable a different name. In the code you posted you are continuously overwriting the same variable, and then, it evaluates val (which ended up being assigned to the (fill me7 value) to "", and if true, setting all the borders to red.
Set different variables, push the input values into an array when submit is triggered and loop through them if variables[i]==0, set getElementId(switch case[i] or another array with the name of the inputs[i]).bordercolor to red.
AGAIN, this sound VERY INEFFICIENT and I am not sure at all it would work. My guess is that it would take A LOT of time, and probably get timed out (except you are using some asych/try-catch kind of JS).
I would simply go for an HTML required property and then override the "required" property in CSS to make it look as you intend to. Simpler, easy and clean.

The main issue in your code is that you override the variable val each time you wrote var val = ....
Keeping your own your logic, you could write something like that.
var formModule = (function () {
var $fields = [
document.getElementById('fillMeIn'),
document.getElementById('fillMeIn2'),
document.getElementById('fillMeIn3'),
document.getElementById('fillMeIn4'),
document.getElementById('fillMeIn5'),
document.getElementById('fillMeIn6'),
document.getElementById('fillMeIn7')
];
function markInvalid($field) {
$field.style.borderColor = 'red';
}
function markValid($field) {
$field.style.borderColor = 'green';
}
return {
check: function () {
var isValid = true;
$fields.forEach(function ($f) {
if ($f.value === '') {
if (isValid) alert('Please fill in the missing fields');
isValid = false;
markInvalid($f);
}
else markValid($f);
});
return isValid;
}
};
})();
There are some extra concepts in this example which may be useful:
Working with the DOM is really slow, that's why you should
put your elements in a variable once for all and not everytime you
click on the submit button.
In my example i wrap the code with var formModule = (function () {...})();.
It's called module pattern. The goal is to prevent variables to leak in the rest of the application.
A better solution could be this one using the 'power' of html form validation:
HTML:
<form id="mbrForm" action="thanks.html" method="post">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 vertical-gap">
FIRST NAME:
<input id="fillMeIn" type="text" required class="form-control" placeholder="First Name">
</div>
<div class="col-md-4 vertical-gap">
LAST NAME:
<input id="fillMeIn2" type="text" required class="form-control" placeholder="Last Name">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 vertical-gap">
ADDRESS:
<input id="fillMeIn3" type="text" required class="form-control vertical-gap" placeholder="First Line">
<input id="fillMeIn4" type="text" required class="form-control vertical-gap" placeholder="Second Line">
<input id="fillMeIn5" type="text" required class="form-control vertical-gap" placeholder="Town/City">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 vertical-gap">
POST CODE:
<input id="fillMeIn6" type="text" required class="form-control vertical-gap" placeholder="Postcode">
</div>
<div class="col-md-4 vertical-gap">
PHONE No:
<input type="number" class="form-control vertical-gap" placeholder="Tel no">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
EMAIL ADDRESS:
<input id="fillMeIn7" type="email" required class="form-control vertical-gap" placeholder="Email address">
</div>
<div class="col-md-2"></div>
</div>
<div class="row vertical-gap">
<div class="col-md-2"></div>
<div class="col-md-8">
DISCIPLINE:
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Cross Country"> CROSS COUNTRY
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Enduro"> ENDURO
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Downhill"> DOWNHILL
</label>
</div>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<input id="btnSubmit" type="submit" value="SUBMIT" class="btn btn-success btn-lg">
</div>
<div class="col-md-2"></div>
</div>
</form>
JS:
var formModule = (function () {
var $form = document.getElementById('mbrForm');
var $btn = document.getElementById('btnSubmit');
var $fields = [
document.getElementById('fillMeIn'),
document.getElementById('fillMeIn2'),
document.getElementById('fillMeIn3'),
document.getElementById('fillMeIn4'),
document.getElementById('fillMeIn5'),
document.getElementById('fillMeIn6'),
document.getElementById('fillMeIn7')
];
checkValidation();
$form.addEventListener('change', checkValidation);
$form.addEventListener('keyup', checkValidation);
$fields.forEach(function ($f) {
$f.addEventListener('change', function () {
markInput($f, $f.checkValidity());
});
});
function checkValidation() {
$btn.disabled = !$form.checkValidity();
}
function markInput($field, isValid) {
$field.style.borderColor = isValid ? 'green' : 'red';
}
})();
In this example, the button gets disabled until the form is valid and inputs are validated whenever they are changed.
I added required attribute in HTML inputs so they can be handled by native javascript function checkValidity(). Note that in this case inputs email and number are also correctly checked. You could also use attribute pattern to get a more powerfull validation:
<input type="text" pattern="-?[0-9]*(\.[0-9]+)?">
Hope it helps.

My validating a captcha using JavaScript is not working

<script>
function validate2(id)
{
var regex = [a-z];
var ctrl = document.getElemetnById(id);
if (regex.test(ctrl.value)) {
return true;
}
else {
return false;
}
}
</script>
<script>
function TestCompanyName(txtCompanyName){
var obj = document.getElementById(txtCompanyName);
var RegEx = /THE DAMN REGULAR EXPRESSION/
if(RegEx.test(obj.value)==false)
{
alert("Invalid");
}
}
</script>
</script>
<script>
function checklname(input1)
{
var pattern=/^([a-zA-Z0-9_.-])+#([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
return pattern.test(input1);
}
if(!isvalid) {
alert('Invalid name');
document.getElementById("input1").value = "";
}
}
</script>
<script>
function phonenumber(telno) {
var phoneno = /^\+?([0-9]{2})\)?[-. ]?([0-9]{4})[-. ]?([0-9]{4})$/;
if(telno.value.match(phoneno))
{
return true;
}
else {
alert("message");
return false;
}
}
</script>
<script>
function phonenumber2(mobileno) {
var phoneno1 = /^\+?([0-9]{2})\)?[-. ]?([0-9]{4})[-. ]?([0-9]{4})$/;
if(mobileno.value.match(phoneno1))
{
return true;
}
else {
alert("message");
return false;
}
}
</script>
<script>
function validate() {
var ta = document.getElementById("ta").value;
var answer = document.getElementbyId("answer").value;
var digit1 = parseInt(document.getElementById("digit1").innerHTML);
var digit2 = parseInt(document.getElementById("digit2").innerHTML);
var sum = digit1 + digit2;
if(answer == null || answer == ""){
alert("please add the number");
return false;
}else if(answer != sum){
alert("you math is wrong");
}else if(ta == null || ta == ""){
alert("please fill in the textarea");
}else{
document.getElementById("status").innerHTML = "processing";
document.getElementById("answer").innerHTML = "";
}
}
function randomNums(){
var rand_num1 = Math.floor(Math.random() * 10) +1;
var rand_num2 = Math.floor(Math.random() * 10) +1;
document.getElementById("digit1").innerHTML = rand_num1;
document.getElementById("digit2").innerHTML = rand_num2;
}
</script
<script>
function checkEmail(inputvalue){
var pattern=/^([a-zA-Z0-9_.-])+#([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
return pattern.test(inputvalue);
}
checkEmail('rte#co') // false
checkEmail('rte#co.com') // true
</script>
<script>
var address = /^[a-zA-Z0-9-\/] ?([a-zA-Z0-9-\/]|[a-zA-Z0-9-\/] )*[a-zA-Z0-9-\/]$/;
if ( address.test($.trim($('#address').val())) == false)
{
alert('invalid address ');
}
</script>
<script>
function IsValidZipCode(zipcode) {
var isValid = /[\^$%#!#&\*:<>\?\/\\~\{\}\(\)\+|]/.test(zipcode);
if (!isValid){
alert('Invalid ZipCode');
document.getElementById("zipcode").value = "";
}
</script>
<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<?php include("include files/favicon.php"); ?>
</head>
<body itemscope itemtype="http://schema.org/Organization">
<?php
include("include files/header.php");
?>
<?php
include("include files/navigation.php");
?>
<!--breadcrumb-->
<div id='location'>
<div id="BannerAndNavigatorHtmlBlock_StoreNavigator_pnNavigator" itemscope="" itemtype="http://schema.org/BreadcrumbList" class="btn-group btn-breadcrumb">
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="btn btn-success">
<a itemprop="item" href="/">
<span class="glyphicon glyphicon-home" itemprop="name">
</span>
</a>
<span itemprop="position" content="1">
</span>
</span>
</span>
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"class="btn btn-success">
<span itemprop="name">Playing Card Quote</span><span itemprop="position" content="2"></span>
</span>
</div>
</div>
<!--Main Content-->
<div class="wrapper">
<div class="container">
<div> </div>
<div class="well">
<form action="thank-you.php" method="post" id="form1" onsubmit="MM_validateForm('quantity','','R','fname','','R','email','','NisEmail','telno','','RisNum','address','','R','city','','R','state','','R','country','','R','zipcode','','R');return document.MM_returnValue && jcap();">
<fieldset>
<legend>
<h1>Fill Quote Form</h1>
</legend>
<div class="quote-form">
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6">Plastic Coated Paper :</label>
<div class="col-sm-3">
<select class="form-control" name="plastic_coated_paper" id="plastic_coated_paper" onchange="chgSelect('coatedpaper');">
<option selected value="0" id="selectpaper">Select Paper</option>
<option>Black Centered 330</option>
<option>Black Centered 320</option>
<option>Black Centered 315</option>
<option>Black Centered 305</option>
<option>Black Centered 300</option>
<option>Black Centered 280</option>
<option>White Centered 330</option>
<option>White Centered 320</option>
<option>White Centered 315</option>
<option>White Centered 305</option>
<option>White Centered 300</option>
<option>White Centered 280</option>
</select>
</div>
<div class="col-sm-3" style="text-align:center;">
</div>
<br>
<br>
<center>OR</center>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6">100% Pure Plastic : </label>
<h2>Your Contact Information :</h2>
<form action="" method="POST">
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> First Name</label>
<div class="col-sm-3">
<div>
<input name="fname" id= "id" type="text" onSubmit="" tabindex="2" required="required">
</div>
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> Last Name</label>
<div class="col-sm-3">
<div>
<label>
<input name="lname" id="input1" type="text" tabindex="2" required="required">
</label>
</div>
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> Email Id</label>
<div class="col-sm-3">
<div>
<label>
<input name="email" type="email" tabindex="2" required="required">
</label>
</div>
</div>
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<div class="col-sm-6">
</div>
<div class="col-sm-5">(Please type in a correct email address , as the quotes will be forwarded there)</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> Telephone Number</label>
<div class="col-sm-3">
<div>
<label>
<input name="telno" id="telno" type="text" tabindex="2" required="required">
</label>
</div>
</div>
<div class="col-sm-3">( Do not enter space)
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> Mobile Number</label>
<div class="col-sm-3">
<div>
<label>
<input name="mobileno" id="mobileno" type="text" tabindex="2" required="required">
</label>
</div>
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"> <i>*</i> Company Name</label>
<div class="col-sm-3">
<div>
<label>
<input type="text" name="txtCompanyName" id="txtCompanyName" required="required" onclick="TestCompanyName('txtCompanyName')">
</label>
</div>
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> Address</label>
<div class="col-sm-3">
<input id="address" class="address" type="text" name="address"
onchange="IsValidAddress(this.form.address.value)" required="required" >
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> Zip Code :</label>
<div class="col-sm-3">
<input id="zipcode" class="zipcode" type="text" name="zipcode" onchange="IsValidZipCode(this.form.zipcode.value)" required="required" >
<br />
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> City</label>
<div class="col-sm-3">
<input class="form-control" name="city" type="text" id="city" required="required" value="">
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> State</label>
<div class="col-sm-3">
<input class="form-control" name="state" type="text" id="state" value="" required ="required">
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> Country</label>
<div class="col-sm-3">
<input class="form-control" name="country" type="text" id="country" value="" required="required">
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"> Fax</label>
<div class="col-sm-3">
<input class="form-control" name="fax" type="text" id="fax" value="" required ="required">
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> Captcha</label>
<div class="col-sm-2">
</div>
<div class="col-sm-3">
<body>
<form name="review" ACTION="newpg.html" METHOD="POST" onsubmit="return checkform(this);">
<font color="#DD0000">Enter Code ></font> <span id="txtCaptchaDiv" style="background-color:#A51D22;color:#FFF;padding:5px"></span>
<input type="hidden" id="txtCaptcha" />
<input type="text" name="txtInput" id="txtInput" size="15" />
<input type="submit" value="Submit"/>
</form>
<script type="text/javascript">
function checkform(theform){
var why = "";
if(theform.txtInput.value == ""){
why += "- Security code should not be empty.\n";
}
if(theform.txtInput.value != ""){
if(ValidCaptcha(theform.txtInput.value) == false){
why += "- Security code did not match.\n";
}
}
if(why != ""){
alert(why);
return false;
}
}
//Generates the captcha function
var a = Math.ceil(Math.random() * 9)+ '';
var b = Math.ceil(Math.random() * 9)+ '';
var c = Math.ceil(Math.random() * 9)+ '';
var d = Math.ceil(Math.random() * 9)+ '';
var e = Math.ceil(Math.random() * 9)+ '';
var code = a + b + c + d + e;
document.getElementById("txtCaptcha").value = code;
document.getElementById("txtCaptchaDiv").innerHTML = code;
// Validate the Entered input aganist the generated security code function
function ValidCaptcha(){
var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
var str2 = removeSpaces(document.getElementById('txtInput').value);
if (str1 == str2){
return true;
}else{
return false;
}
}
// Remove the spaces from the entered and generated code
function removeSpaces(string){
return string.split(' ').join('');
}
</script>
</body>
<div class="col-sm-3">
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<div class="col-sm-12">
<center>
<input type="submit" value="Submit" class="btn1" name="submit" id="send">
</center>
</div>
</div>
</div>
<div> </div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<!---footer---><?php include("include files/footer.php");?>
</body>
</html>
I am not able to provide validation for captcha using validation? My function is not displaying message for me if security code did not match or security code should not be empty.
What is the problem in the program? Why is not validating my captcha properly? I tried it many times but not able to validate my captcha code
What is the error in the page for captcha validation? What is the correct validation for captcha ?

The code you posted does not have any issues. It does what it is supposed to do, generate a code and validate that the input matches it before allowing the form to be submitted.
However, if you are really interested in preventing bots from submitting the form, then this code is not going to help you at all. You generate the code on the client and save it in your input. A bot would read that input and provide the captcha with no issues at all.
EDIT: suggestion for recaptcha
I would suggest that you integrate your application with an established recaptcha provider, as is for example recaptcha. Please note that the validation of the captcha input should be performed in your server
You can find further details for recaptcha here.

The code is working as you might expect. Please review the fiddle I had to made no change at all.
https://jsfiddle.net/43m63ezf/
HTML
<label>Captcha</label>
<form name="review" ACTION="palying-cards-quote.php" METHOD="POST" onsubmit="return checkform(this);">
<font color="#DD0000">Enter Code </font> <span id="txtCaptchaDiv" style="background-color:#A51D22;color:#FFF;padding:5px"></span>
<input type="hidden" id="txtCaptcha" />
<input type="text" name="txtInput" id="txtInput" size="15" />
<input type="submit" value="Submit" />
</form>
JS
function checkform(theform) {
var why = "";
if (theform.txtInput.value == "") {
why += "- Security code should not be empty.\n";
}
if (theform.txtInput.value != "") {
if (ValidCaptcha(theform.txtInput.value) == false) {
why += "- Security code did not match.\n";
}
}
if (why != "") {
alert(why);
return false;
}
}
//Generates the captcha function
var a = Math.ceil(Math.random() * 9) + '';
var b = Math.ceil(Math.random() * 9) + '';
var c = Math.ceil(Math.random() * 9) + '';
var d = Math.ceil(Math.random() * 9) + '';
var e = Math.ceil(Math.random() * 9) + '';
var code = a + b + c + d + e;
document.getElementById("txtCaptcha").value = code;
document.getElementById("txtCaptchaDiv").innerHTML = code;
// Validate the Entered input aganist the generated security code function
function ValidCaptcha() {
var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
var str2 = removeSpaces(document.getElementById('txtInput').value);
if (str1 == str2) {
return true;
} else {
return false;
}
}
// Remove the spaces from the entered and generated code
function removeSpaces(string) {
return string.split(' ').join('');
}

I want to display data from database.if we newly add a form data ,i want to append the new post on display without refresh using codeigniter

I have a show and hide div. That is an add form. I want to display all data from the table on the bottom of the form. If form is opened or not, the data must be displayed. When we add new post, that must append on the top of displayed data without refresh.
My view
<div class="slidingDiv" style="display:none">
<div class="row">
<div class="col-xs-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">Add Requirement Item</h3>
</div><!-- /.box-header -->
<!-- form start -->
<?php echo validation_errors(); ?>
<?php
$attributes = array('id' => 'myForm');
echo form_open_multipart(base_url().'moderator/Requirement/add_employee_data',$attributes); ?>
<div class="box-body">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<label for="txttitle">Requirement Title (Product/Service) : </label>
</div>
<div class="col-xs-12">
<input type="text" name="txtService" class="form-control" id="txttitle" placeholder="Requirement Title (Product/Service) : " value="" required>
</div>
</div>
</div>
</diV>
<div class="col-xs-6">
<div class="form-group">
<div class="row">
<div class="col-xs-8">
<label for="txtquantity">Estimated Quantity : </label>
</div>
<div class="col-xs-4">
<label for="txtquantity"></label>
</div>
<div class="col-xs-8">
<input type="text" name="txtQuantity" class="form-control" id="txtquantity" placeholder="Estimated Quantity" value="
" required>
</div>
<div class="col-xs-4">
<select class="form-control" name="txtunit" required="required">
<option value="">----Select------</option>
<?php
foreach ($units as $name) {
echo ' <option value="' . $name->id . '">' . $name->name . '</option>';
}
?>
</select>
</div>
</div>
</div>
</diV>
<div class="col-xs-12">
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<label for="txtdetails">Requirement Details : </label>
</div>
<div class="col-xs-12">
<textarea class="textarea" name="txtRequirement" placeholder="Requirement Details" id="txtdetails" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;">
</textarea>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<div class="row">
<div class="col-xs-6">
<label for="sbUser">Expiry of Requirement : </label><br>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input id="thedate" type="text" name="txtBidclosing" class="form-control" required="required"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- /.box-body -->
<div class="box-footer">
<input type="button" class="button" value="submit" />
</form>
</div>
</div>
</div>
</div>
<div id="sort">
<br>
</div>
Ajax code
<script>
$(document).ready(function(){
$(".button").click(function(){
$.ajax({
type:"POST",
url: "<?php echo base_url() ?>moderator/Requirement/add_employee_data",
data:$("#myForm").serialize(),
success: function (dataCheck) {
//alert(dataCheck);
$('#sort').append(dataCheck);
//window.location.reload();},
});});});
</script>
Model
public function add_employee_data($data){
$this->db->insert('jil_requirementdetail',$data);
$id = $this->db->insert_id();
$this->db->select('*');
$this->db->from('jil_requirementdetail');
$this->db->where('rqmd_id',$id);
$result = $this->db->get()->result();
return $result;
}

On your model
public function add_employee_data($data){
$this->db->insert('jil_requirementdetail',$data);
$id = $this->db->insert_id();
$this->db->select('*');
$this->db->from('jil_requirementdetail');
// $this->db->where('rqmd_id',$id); // get all data
$this->db->order_by('rqmd_id','DESC');
$result = $this->db->get();
if($result->num_row() > 0)
{
echo json_encode(['status'=>'pass','data'=>$result->result()];
}else{
echo json_encode(['status'=>'fail']);
}
}
On Ajax Success
<script>
$(document).ready(function(){
$(".button").click(function(){
$.ajax({
type: "POST",
url: "<?php echo base_url() ?>moderator/Requirement/add_employee_data",
data: $("#myForm").serialize(),
success: function(dataCheck){
//alert(dataCheck);
var res = JSON.parse(dataCheck);
if(res.status=='pass')
{
var user_data = res.data;
var html = '';
var length = user_data.length;
for(var i = 0; i < length; i++)
{
//your html
html += '<div>' + user_data[i].name + '</div>'; //add your html structure as you want
}
$('#sort').append(html);
},
}
});
});
});
</script>

error Uncaught SyntaxError: Unexpected token <

i want to create a form which has 2 dropdown, the second dropdown will be trigger by the first dropdown without reload the page, after the first dropdown selected/change, so i decide to use ajax
instead trigger the second dropdown it is returning this error
Uncaught SyntaxError: Unexpected token < add_product.php:1
error on above happen if i use google chrome
and this the error when i use firefox with firebug
Warning: mysqli_query() expects parameter 1 to be mysqli, null given in /opt/lampp/htdocs/portofolio1/dd-multiple.php on line 15
Warning: mysqli_fetch_assoc() expects parameter 1 to be mysqli_result, null given in /opt/lampp/htdocs/portofolio1/dd-multiple.php on line 16
{"data":null}
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
script.js (line 34, col 26)
this is script.js file
function AjaxFunction(id1,id2)
{
alert(id1);
var httpxml;
try
{
// Firefox, Opera 8.0+, Safari
httpxml=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
httpxml=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
httpxml=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
function stateck(){
if(httpxml.readyState===4)
{
var myarray = JSON.parse(httpxml.responseText);
// Before adding new we must remove previously loaded elements
for(j=document.getElementById(id2).length-1;j>=0;j--)
{
document.getElementById(id2).remove(j);
}
for (i=0;i<myarray.data.length;i++)
{
var optn = document.createElement("OPTION");
optn.text = myarray.data[i].subcategory;
//optn.value = myarray.data[i].subcat_id; // You can change this to subcategory
optn.value = myarray.data[i].subcategory;
document.getElementById(id2).options.add(optn);
}
}
}
var str='';
var s1ar=document.getElementById(id1);
for (i=0;i< s1ar.length;i++) {
if(s1ar[i].selected){
str += s1ar[i].value + ',';
}
}
//alert (s1ar);
var str=str.slice(0,str.length -1); // remove the last coma from string
//alert(str);
/////
//alert(str);
var url="dd-multiple.php";
url=url+"?cat_id="+str;
url=url+"&sid="+Math.random();
//alert(url);
httpxml.onreadystatechange=stateck;
httpxml.open("GET",url,true);
httpxml.send(null);
}
this my add_product.php file
<?php
require_once './model/functions.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="center-block" style="width: 130px;">
<h3><strong>Add Book</strong></h3>
</div>
</div>
<form method="post" action="" class="form-horizontal">
<div class="form-group">
<label for="kategori" class="col-lg-4 control-label">Kategori : </label>
<div class="col-lg-6">
<input type="text" class="form-control" id="kategori" name="kategori" placeholder="pilih kategori">
</div>
</div>
<div class="form-group">
<label for="tipeIklan" class="col-lg-4 control-label">Tipe Iklan : </label>
<div class="col-lg-6">
<label class="radio-inline">
<input type="radio" name="genderRadioOptions" id="tipeIklan" value=1>Dicari
</label>
<label class="radio-inline">
<input type="radio" name="genderRadioOptions" id="tipeIklan" value=0>Dijual
</label>
<label class="radio-inline">
<input type="radio" name="genderRadioOptions" id="tipeIklan" value=2>Disewakan
</label>
<label class="radio-inline">
<input type="radio" name="genderRadioOptions" id="tipeIklan" value=3>Jasa
</label>
</div>
</div>
<div class="form-group">
<label for="judul" class="col-lg-4 control-label">Judul : </label>
<div class="col-lg-6">
<input type="text" class="form-control" id="judul" name="judul" placeholder="Judul iklan anda">
</div>
</div>
<div class="form-group">
<label for="deskripsi" class="col-lg-4 control-label">Deskripsi : </label>
<div class="col-lg-6">
<textarea id="deskripsi" class="form-control" rows="5"></textarea>
</div>
</div>
<div class="form-group">
<label for="harga" class="col-lg-4 control-label">Harga(Rp.) : </label>
<div class="col-lg-3">
<input type="text" class="form-control" id="harga" name="harga" aria-describedby="helpBlock" placeholder="cukup tuliskan angka">
<span id="helpBlock" class="help-block">Contoh: 2000</span>
</div>
</div>
<div class="form-group">
<label for="kondisi" class="col-lg-4 control-label">Kondisi : </label>
<div class="col-lg-6">
<label class="radio-inline">
<input type="radio" name="genderRadioOptions" id="kondisi" value=0>Bekas
</label>
<label class="radio-inline">
<input type="radio" name="genderRadioOptions" id="kondisi" value=1>Baru
</label>
</div>
</div>
<div class="form-group">
<label for="provinsi" class="col-lg-4 control-label">Provinsi : </label>
<div class="col-lg-3">
<select id="provinsi" name="s1[]" class="form-control" onchange="AjaxFunction('provinsi', 'kota')">
<option>select one</option>
<?php
$provinsi_set = find_all_province();
while($provinsi = mysqli_fetch_assoc($provinsi_set)){
?>
<option value="<?php echo $provinsi["id"];?>"><?php echo $provinsi["nama"]; ?></option>
<?php
}
?>
</select>
</div>
</div>
<div class="form-group">
<label for="kota" class="col-lg-4 control-label">Kota : </label>
<div class="col-lg-3">
<select id="kota" name="s2[]" class="form-control">
</select>
</div>
</div>
<div class="form-group">
<label for="foto" class="col-lg-4 control-label">Upload Foto : </label>
<div class="col-lg-6">
<img src="uploads/raditya.jpg" alt="" width="140" height="140" class="img-thumbnail">
<img src="uploads/Kambing_Jantan_buku_2.jpg" alt="" width="140" height="140" class="img-thumbnail">
<img src="uploads/raditya.jpg" alt="" width="140" height="140" class="img-thumbnail">
</div>
</div>
<div class="col-lg-offset-4">
<button type="button" id="registrationbutton" class="btn btn-default">Tayangkan!</button>
</div>
</form>
</div>
<script src="jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
<?php close_connection(); ?>
</body>
</html>
the problem dissapear when i remove this code onchange="AjaxFunction('provinsi', 'kota')"
and this is my dd-multiple.php in case someone asking for it
<?php
#$cat_id=$_GET['cat_id'];
$mn=split(",",$cat_id); // creating array
while (list ($key, $val) = each ($mn)) {
if(!is_numeric($val)){ // checking each element
echo "Data Error ";
exit;
}
}
global $id_mysql;
$query = "SELECT nama,id FROM KOTA WHERE id_prov IN ($cat_id)";
$row = mysqli_query($id_mysql, $query);
$result = mysqli_fetch_assoc($row);
$main = array('data'=>$result);
echo json_encode($main);
?>

The reason you get that error is because your mysqli_query is incorrect.
You have your link which is null. Your link should be the connection to your database, ie:
$link = mysqli_connect("localhost", "my_user", "my_password", "database");
$query = "SELECT nama,id FROM KOTA WHERE id_prov IN ($cat_id)";
$row = mysqli_query($link, $query);
$result = mysqli_fetch_assoc($row);
$main = array('data'=>$result);
echo json_encode($main);

We Keep Coding

JavaScript is the programming language of the Web.

Remove All Elements with the Same Class in Pure JavaScript - javascript

You simply have a typo in your for statement, replace 1 with i in the predicate var messages = document.querySelectorAll('.message'); for(var i = 0; i < messages.length; i++) { messages[i].parentNode.removeChild(messages[i]); } Also note, you could use messages[i].remove() for shorter syntax. (mdn)

I see an error in your foor loop. 1 < messages.length is probably always true. Replace 1 with i: for(var i = 0; i < messages.length; i++) { messages[i].parentNode.removeChild(messages[i]); }

If I'm understanding you right: var messages = document.querySelectorAll('.message'); for(var i = 0; 1 < messages.length; i++) { messages[i].classList.remove('message'); }

Related

JS validation mistakes

Form validation with multiple highlighted fields

My validating a captcha using JavaScript is not working

I want to display data from database.if we newly add a form data ,i want to append the new post on display without refresh using codeigniter

error Uncaught SyntaxError: Unexpected token <

Categories

Resources