CODEWITHSUNDEEP
javascripthtmlonclick
user3210302
user3210302

Reputation: 1

Javascript not working with onClick

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!

Upvotes: 0

Views: 141

Answers (1)

mplungjan
mplungjan

Reputation: 177885

  1. never use onclick on a submit button
  2. remember to return false to stop the submission
  3. 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;
    }
}

Upvotes: 1

Related Questions