Jquery live validating form input - javascript

UPDATE Sorry I should have asked how would I do this is Jquery and is there any benefit in doing so.
Thanks
I'm currently using this code which sends the characters a user enters in an input field to a php script which checks a DB to see if an ID value is in use or contains any invalid characters.
It works fine, but I'm curious if I would be better doing it a different way.
<input type='text' name='id' id='id' onkeyup="id(this.value)" /><span id='id'></span>
function id(str)
{
if (str.length==0)
{
document.getElementById("id").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("id").innerHTML=xmlhttp.responseText;
if (xmlhttp.responseText.indexOf("set") != -1) {
document.getElementById("submit").disabled = false;
} else {
document.getElementById("submit").disabled = true;
}
}
}
xmlhttp.open("GET","go.php?val="+str,true);
xmlhttp.send();
}
go.php is passed the individual characters and checks what is being submitted and returns the live results using :
echo stripslashes($response);
So as the user types into the text box there input is checked as they type. Is there a better way to do this ?
Thanks :)

Related

javascript won't trigger when including in wordpress site

I've changed the theme to my Wordpress page and suddenly the javascript wouldn't be triggered for a text field with onChange. I've checked the folders several times and it seems to be right. I'm new to jquery but I read that WordPress uses it a lot and it's much easier, but that I don't know how to use (jet...) If you have any creative solution for my problem, let me know! ;)
When I build it to another page, without WordPress, it works fine...
Text field:
<div id="form_box"><span id="CorrectNameHint"></span>
<input class="" placeholder="Förnamn" type="text" name="name" id="name" onChange="CorrectName(this.value)" value="<?php echo($_GET["name2"]); ?>" />
</div>
Header included in header.php
<script type="text/javascript" src="../panel/forms.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
Script in forms.js
function CorrectName(str)
{
if (str=="")
{
document.getElementById("CorrectNameHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("CorrectNameHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","panel/validate_user.php?name="+str,true);
xmlhttp.send();
}
Text from validate_user.php if the name isn't empty
if(isset($_GET["name"])){
if($_GET["name"] != ""){
echo("<IMG SRC='../panel/bilder/green_check.png'>");
$_SESSION["Registreraname"] = 1;
} else {
echo("<IMG SRC='../panel/bilder/denied.png'>");
$_SESSION["Registreraname"] = 0;
}
}

Making 2 xmlhttp.open calls in javascript function

I have a website that uses a javascript function below to populate List 2 when an item from the drop down List 1 is chosen. What I would like to achieve is to have List 2 and List 3 updated. The function is shown below works for both List 2 and List 3 separately but using an alert I can see that it stops after the first send if I put them together. How can I am make them both work together?
This is the Select that calls the function checkTeacherList which is working fine.
<select name="department_list" id="department_list" selected="All" onchange="checkTeacherList(this.value, '<?php echo $user_login;?>');" >
Th eJavaScript function checkTeacherList
<script type="text/javascript">
function checkTeacherList(departmentName, schoolName)
{
var xmlhttp;
//populating List 2
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("departmentTeachers").innerHTML=xmlhttp.responseText;
}
}
var d = new Date();
xmlhttp.open("GET","http://website/getTeachers1.php?schoolName="+schoolName+"&departmentName="+departmentName+"&nocache="+d.getSeconds(),true);
xmlhttp.send();
xmlhttp.send();
//populating List 3
alert("Is it getting this far?"); // this alert does not get reached
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("nondepartmentTeachers").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","http://website/getTeachers2.php?schoolName="+schoolName+"&departmentName="+departmentName+"&nocache="+d.getSeconds(),true);
xmlhttp.send();
xmlhttp.send();
}
</script>
The alert is not called because you are calling "xmlhttp.send();" twice.
The second call yields an error.
it is not really a good way to solve this problem. I should focus on setting up ONE AJAX connection , that the script just have to ask one connection.
The major advantage of using this method is the time required to gather all data. It will be double faster then doing it twice.
However, i am not sure if you can modify the php files.
If so, please edit it. I have noticed that both requests contains of same parameters.
in js;
// function to fill option
var fillOptions = function(data) {
// use data to fill drop down boxes
var teacher1 = data["teacher1"]; // get $teacher1 which is in 'teacher1'
var teacher2 = data["teacher2"]; // get $teacher2 which is in 'teacher2'
}
// function to check teacher list
function checkTeacherList(departmentName, schoolName)
{
// create object by browser type
var xmlhttp;
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest) xmlhttp=new XMLHttpRequest();
// for IE6, IE5
else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
// event when request is done
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
// get data
var data = JSON.parse(xmlhttp.responseText);
// send to function to handle it
fillOptions(data);
}
}
// open link
xmlhttp.open("GET","http://website/getAllTeachers.php?schoolName="+schoolName+"&departmentName="+departmentName+"&nocache="+d.getSeconds(),true);
// send
xmlhttp.send();
}
and in getAllTeachers.php ( a new php file, but you can wrap your two php file in one if you want)
$teacher1 = ... // teacher1 list
$teacher2 = ... // teacher2 list
// return with a JSON type
header('Content-Type: application/json');
// reply with json format
echo json_encode(array('teacher1' => $teacher1, 'teacher2' => $teacher2));
The php file will reply with data in JSON-format. In the js, you can see that the response is being handled with JSON.parse() function and being passed to fillOptions(data) function. There, you can access data submitted by php and use the same data to fill in your dropdown box.
(i don't know the response content, but
document.getElementById("nondepartmentTeachers").innerHTML = data["teacher2"];
should achieve the same result as intended )
If you want to go with your solution, you have called .send() function twice, which the second one will return into errors.

onchange 2 functions on 1 dropdown

I have 2 functions that I would like to call from one dropdown menu. It seems I can only get one to work, but not both. Looking for some help sorting this out. Here is the code, thank you.
Function 1
<script type="text/javascript">
function getCredit(str)
{
if (str=="")
{
document.getElementById("credit").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("credit").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getcredit.php?id="+str,true);
xmlhttp.send();
}
window.onload = function() {
document.getElementsByName('company')[0].onchange();
}
</script>
And here is function 2.
<script type="text/javascript">
function getTerms(str)
{
if (str=="")
{
document.getElementById("terms").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("terms").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","customertermsdropdownquery.php?id="+str,true);
xmlhttp.send();
}
window.onload = function() {
document.getElementsByName('company')[0].onchange();
}
</script>
And here is the form dropdown that calls them.
<td><select name="company" onchange="getTerms(this.value);getCredit(this.value);">
<?php while($row = mysql_fetch_array($result)) {
echo "<option value=\"".$row['company']."\">".$row['company']." (".$row['first']." ".$row['last'].")</option>"; } ?></select></td>
I use div in the form to display php.
<div id="terms"></div>
and
<div id="credit"></div>
I can get either one to work by itself, just not together. Thanks for your help.
Totally understandable that you want to keep them separated. How about create a new function like this.
function getTermsAndCredits(value) {
getTerms(value);
getCredits(value);
}
Then in the onchange event call it like this
<td><select name="company" onchange="getTermsAndCredits(this.value);">
Here is a fiddle which should give you a better idea. I don't believe it's necessary to call the onload functions as you have in your code currently.

Call javascript function on maxlength of textfield

I am looking for a script that calls for a JavaScript function automatically when reaching the maxlength of a text field.
I tried to modify this piece of Script which I found here ajax call after x characters
$("input#zipcode").live("keyup", function( event ){
if(this.value.length == this.getAttribute('maxlength')) {
if(!$(this).data('triggered')) {
// set the 'triggered' data attribute to true
$(this).data('triggered',true);
if ($(this).valid() == true ) { loadXMLDoc(); }
}
} else { $(this).data('triggered',false); }
});
This is the part of code containing the loadXMLDoc part:
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4)
{
document.getElementById("state_insert").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","state_insert.asp?zipcode="+document.getElementById('zipcode').value,true);
xmlhttp.send();
}
When the maxlength is reached, I want it to call for a "LoadXMLDoc" function which requires no additional parameters to be passed on.
At the moment I have it set to onblur="LoadXMLDoc()"
Like this:
[input name='zipcode' type='text' class="form_elements" id='zipcode' tabindex='11' autocomplete='off' onchange="this.value=extractNumeric(this.value)" onkeypress="return isNumericKey(event)" value='' size="4" maxlength="5" onblur="loadXMLDoc()" /]
I used the [ and ] because < and > are not allowed.
in the text field properties, but I would like that it loads as soon as the 5 digits of the Zip Code have been entered.
Thanks in advance :)
Robert.
You can do it with onkeypress event like:
onkeypress="return isNumericKey(event,this)"
along with the number it should also check for the max length. And the code should be like:
function isNumericKey(evt,zip) {
// your Number
// check here
var zipLen=zip.getAttribute('maxlength');
var zipValueLen=zip.value.length;
if(zipValueLen>=zipLen) { LoadXMLDoc(); return false;}
}

Javascript http request problem

I want to get an automatic search result, and on one page it DOES work but on the other NOT. Could you tell me what te problem is?
WORKING:
function showUser(str)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ordertabel.php?search="+str,true);
xmlhttp.send();
}
NOT WORKING:
function showUser(str,str)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","klanttabel.php?search="+str"&search2="+str,true);
xmlhttp.send();
}
Please note that with the NOT working code there are 2 inputs.
Thanks in advance!
I guess it's an url encoding problem. Try encoding:
xmlhttp.open("GET", "klanttabel.php?search=" + encodeURIComponent(str) + "&search2=" + encodeURIComponent(str), true);
Also notice that you are missing a + in your string concatenation.
Probably because you use two variables in your function method with the same name and you are missing a PLUS sign in your xmlhttp.open() method...
Try:
function showUser(str, str2) {
...code...
xmlhttp.open("GET", "klanttabel.php?search="+str+"&search2="+str2, true);
xmlhttp.send();
}
Another suggestion, making Ajax calls is way easier when using JQuery.
$.ajax({
type: "GET",
url: "klanttabel.php",
data: ({search : str,
search2 : str2}),
success: function(data) {
$('#txtHint').html(data);
}
});
Your parameters are named the same... change them.
function showUser(strA,strB)
and change them later in the function:
xmlhttp.open("GET","klanttabel.php?search=" + strA + "&search2=" + strB,true);
You also had an error where a + was missing.
You are missing plus sign
xmlhttp.open("GET","klanttabel.php?search="+str"&search2="+str,true);
plus sign after first str
xmlhttp.open("GET","klanttabel.php?search="+str+"&search2="+str,true);

Categories

Resources