PDA

View Full Version : Incomplete data sent with onChange event



dodgem
Apr 6th, 2007, 11:28 PM
Hi! Before i begin, thanks in advance to all of you that live here :) There's a phenomenal amount of posts here and i'm sure i'll be back regularly!!...

I'm new to JS, and web technologies in general (coding them - not new to using them ofc), but have a pretty good understanding of programming in general. So with that in mind, onto my problem...

I'm writing a database for work using php and mysql to handle the data side of things, and JS to help get a decent user interface working. I only started on it a week ago and knew absolutely zilch about php, sql, or JS, but am getting on quite well now.

Currently i have a JS driven input field which reads the contents of the text box on the onkeyup event and populates a selection box below with data, retrieved from my database, that matches the letters entered so far. When the input field loses focus and has changed value (onChange) i want to check the data to see whether it matches something in my database. To do this i am loading a popup window which receives the data using GET and searches the database for a match. If one is found it closes, but if there is no match it prompts for information and saves the results to the database before closing.

The problem is: If i type a few letters and get a match in the selection box that i want to use and click on it, although the value appears onscreen in the text box, the actual value passed using onChange only contains the data i actually typed, resulting in the popup window not finding a match in the database even though i selected a value generated by the database!

The relevant part of my code is here:

function checkdata1(data1){
popup('checkdata.php?serial='+document.getElementById(data1).value, 'testing1');
}
</script>

<form action="popup1.php" onSubmit="popupform(this, 'testing')" method="post">
<input type="text" name="serial" id="txtname1" onkeyup="changeselect1(this.value)" onChange="checkdata1(this.id)"><br>

<div id="divresults1" style="position:absolute"></div>

<select id="lstname1" style="display:none">
<option value="">Choose Serial...</option>
<option value="SN12345">SN12345</option>
<option value="3r">3r</option>

<option value="sn23456">sn23456</option>
<option value="sn34567">sn34567</option>
<option value="sn456">sn456</option>

</select>
</form>

First of all i had the call to the popup function in the <input> tags and hoped that by calling it from outside the tags i would get the result i need but to no avail. I've tried calling it from different elements of the form but no joy. I'm beginning to suspect that this is going to require a different method of creating the select box (code i didn't write myself) since i don't seem to be able to send all the data this way.

Perhaps there is a much tidier way of checking the value entered against my database that i'm not seeing, or maybe there's an easy fix to my problem - thanks if you can help me :cool:

rwedge
Apr 7th, 2007, 12:40 AM
Try this to pass the arguments to the popup function:
function checkdata1(data1){
popup('\'checkdata.php?serial='+document.getElementById(data1).value+'\', \'testing1\'');
}

dodgem
Apr 7th, 2007, 07:56 AM
I've just tried that (after figuring out how many escape characters i needed to get that lot into a php echo command ;) ) When checkdata runs, it opens a new window but the requested url isn't found due to a ' in front of checkdata.php.

How was that change supposed to work? I'm not doubting it could work, but i don't see how it was affecting my issue... being new to JS that's not surprising... any explanations given with solutions are gratefully received -- i like to know why i'm writing a piece of code the way i am, then i can reuse that knowledge elsewhere :)

Thanks for the response anyway!

dodgem
Apr 7th, 2007, 10:06 AM
Ok, as i said in my initial post, there's probably a much tidier way of checking the value against my database, and that way has just become evident to me... form validation ^^

I'm going to write a validation function that will check the database when the submit button is pressed, and load a popup screen to enter additional info as required, save to the database and return to the original screen.

However, if there is a way of doing what i originally started out with then i have a feeling it will be useful elsewhere in my project so if you have an answer please do reply still. This is an enormous project i've undertaken with a database currently running at about 30 tables to handle customer and supplier contacts, repair jobs, product orders, purchase orders, stock control, etc, etc... every hour i work on it, it gets slightly bigger and being new to all 3 software technologies i'm using it's quite daunting, although i am learning a lot very quickly :)

rwedge
Apr 7th, 2007, 10:32 AM
Without seeing the 'popup' function requirements, from your posted code, it
looked like you needed to pass the URL with the data1 field query string and the string testing1.
function checkdata1(data1){
popup('checkdata.php?serial=data1fieldvalue','testing1')
}
function popup(url,str) {.......hence, the single quotes around the values.

dodgem
Apr 7th, 2007, 10:58 AM
Right -- i think i see what you're getting at, but the popup function was working fine already. The error is introduced before the data even gets to the function checkdata1 because onChange is calling the checkdata1 function before all of the data is in the input field. So what i'm looking for is some way to call the function when the user clicks on the selected value and to send that value, not just the first few letters that they have typed in.

rwedge
Apr 7th, 2007, 04:19 PM
The onchange event only fires when the user changes a value in a textfield and then removes focus.
The onkeyup for changeselect1 would fire every keystroke in the textfield.

To add the value to the checkdata1 function without single quotes try:
popup('checkdata.php?serial='+document.getElementById(data1).value+'testing1');