Javascript not working with onClick

Question

I am reusing a javascript function in a webpage. I'm using it in two seperate ways all in the same form. the first is tied to an onChange for an input field, which works fine. the second is an onClick for a button towards the end of the form. Here is where the form is opened

<form method="POST" action="new_emissions.php?action=<?php echo $action;?>" 
id="emissionsform" enctype="multipart/form-data">

I'd post the entire thing, but it gets a little long and don't want to bore you with stuff that works. This is the onChange where it works

<td><input type="text" size=6 value="<?php echo $orno; ?>"  name="orno" 
id="orno"onChange="fLookup('orno', '<? echo $fileQuadJ; ?>',  '<? echo $fileQuadO; ?>', '<? echo $fileQuadZ; ?>')"></td>

And this is the button where it doesn't

<input type="submit" value="Save" 
onClick="fLookup('all', '<? echo $fileQuadJ; ?>', '<? echo $fileQuadO; ?>', '<? echo $fileQuadZ; ?>')">

the onChange and onClick are all on the same form.
Here is the first part of the JS function. It is failing at the if statement for http.status and http.readyState. Checking the console for those two, it all looks ok when the onChange gets called, everything posts ok. the onClick fails because the http.status is not 200. console shows it as 0. I can't figure out why it would be treated so differently between an onChange and onClick. I have copied and pasted the JS function from the onChange to the onClick, still nothing.

function fLookup(field, quadJ, quadO, quadZ) {
var sendData = '';
sendData = sendData + '&cins='+document.getElementById('cins').value;
if(field == 'eser' || field == 'all')
    sendData = sendData+'&eser='+document.getElementById('eser').value;
if(field == 'orno' || field == 'all')
    sendData = sendData+'&orno='+document.getElementById('orno').value;
if(field == 'emno' || field == 'all')
    sendData = sendData+'&emno='+document.getElementById('emno').value;
if(field == 'ddat' || field == 'all')
    sendData = sendData+'&ddat='+document.getElementById('ddat').value;
if((field == 'cdat1' || field == 'all') && document.getElementById('cdat1'))
    sendData = sendData+'&cdat1='+document.getElementById('cdat1').value;
if((field == 'cdat2' || field == 'all') && document.getElementById('cdat2'))
    sendData = sendData+'&cdat2='+document.getElementById('cdat2').value;
if((field == 'cdat3' || field == 'all') && document.getElementById('cdat3'))
    sendData = sendData+'&cdat3='+document.getElementById('cdat3').value;
if((field == 'cdat4' || field == 'all') && document.getElementById('cdat4'))
    sendData = sendData+'&cdat4='+document.getElementById('cdat4').value;
if((field == 'cdat5' || field == 'all') && document.getElementById('cdat5'))
    sendData = sendData+'&cdat5='+document.getElementById('cdat5').value;
if((field == 'cdat6' || field == 'all') && document.getElementById('cdat6'))
    sendData = sendData+'&cdat6='+document.getElementById('cdat6').value;
if(quadJ == '1')
    sendData = sendData + '&checkJ=1';
if(quadO == '1')
    sendData = sendData + '&checkO=1';
if(quadZ == '1')
    sendData = sendData + '&checkZ=1';

sendData = sendData + '&field='+field;
sendData = sendData + '&type=fLookup';

//alert(sendData);
http.abort();
http.open('post','emissionValidate.php');
http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
http.send(sendData); 
http.onreadystatechange = function()
{
    console.log(http.readyState, http.status, sendData);
    if(http.readyState == 4 && http.status == 200)
    {

Any help or input is greatly appreciated. Also, if I am light on data please let me know. Thanks in advance!

Why are you using onclick with a submit in a form? Can't you use if isset? Isn't your current submit button triggering your form action? When you click your submit button is it going to new_emissions.php?action=<?php echo $action;?> — Bowenac
– Bowenac, Commented Jan 18, 2014 at 17:27
@Bowenac It should be posting the information back to new_emissions.php. At this point I'll settle for the POST on my submit button to just not throw a fit. I made the updates mplungjan suggested but I'm starting to wonder if my FTP isn't working, as it looks like the changes aren't taking. Thank you both again for taking the time to look through this stuff. I really appreciate it! — user3210302
– user3210302, Commented Jan 19, 2014 at 19:28

mplungjan · Accepted Answer · 2014-01-18 17:58:23Z

1

never use onclick on a submit button
remember to return false to stop the submission
your sendata concatenation is really not very efficient or readable

Change

<input type="submit" value="Save" 
onClick="fLookup('all', '<? echo $fileQuadJ; ?>', '<? echo $fileQuadO; ?>', '<? echo $fileQuadZ; ?>')">

to

<form onsubmit="return fLookup('all', '<? echo $fileQuadJ; ?>', '<? echo $fileQuadO; ?>', '<? echo $fileQuadZ; ?>')">
...
<input type="submit" value="Save"/>
</form>

and in fLookup end the function with a return false;

Here is a shorter version of your function code

var sendData = 'field='+field + '&type=fLookup' + '&cins='+document.getElementById('cins').value;
if(quadJ == '1') sendData += '&checkJ=1';
if(quadO == '1') sendData += '&checkO=1';
if(quadZ == '1') sendData += '&checkZ=1';

var fields = ["eser","orno","emno","ddat"];
for (var i=1;i<=6;i++) if (document.getElementById('cdat'+i)) fields.push('cdat'+i);
for (var i=0;i<fields.length;i++) {
    var theField = fields[i];
    if (field ==="all" || field===theField) {
      sendData+="&"+theField+"="+document.getElementById(theField).value;
    }
}

edited Jan 18, 2014 at 17:58

answered Jan 18, 2014 at 17:24

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3210302 Over a year ago

Thank you for the replies. I'm a very fledgling programmer so my code right now is just a combination of other pages someone else built. I'm going to update the code right now. I'll reply back shortly with any luck

mplungjan Over a year ago

Remember the mandatory return false as the last statement in the function otherwise the form will interfere with the ajax. ALSO move the .send to AFTER the onreadystate assignment

user3210302 Over a year ago

Okay, I have made the changes you suggested @mplungjan. I am still getting an error when trying to post. I have added return false; to fLookup() right underneath the submit statement. I'd upload a picture but I'm not real sure how to add a screenshot of the error. Here is a link to the picture. screencast.com/t/dw663xVb the top POST is from one of the onchange calls. the second is from the submit button.

user3210302 Over a year ago

I keep hitting enter before explaining, so sorry about that. the numbers under the post are readystate, status, and senddata. for some reason the status is never getting 200

Collectives™ on Stack Overflow

Javascript not working with onClick

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related