Need help on return function result

[dev07]

Hello everyone,

I am trying to get return value from a function while submitting "a form". But, i am failing to get the correct result.

Please help me on this. I am posting code below.

My aim:

1) To check availability of an item while submitting the form.

2) If item is available, then confirm a contract using javascript confirm function.

3) If the user agrees the return true. Else return false.

4) If the item is not available the alert a message and return false.


My code:

<form method="post" name="abc" onsubmit="return contract(2)">

</form>



function contract(count_number)
{
var item1=document.getElementById('ItemId1'+count_number).value;
var response=" ";

if(window.XMLHttpRequest)
{
contract_xml=new XMLHttpRequest();
}
else
{
contract_xml=new ActiveXObject("Microsoft.XMLHTTP");
}
contract_xml.onreadystatechange=function()
{

if(contract_xml.readyState==4)
{
//alert("4");
response=contract_xml.responseText;

}
else if( (contract_xml.readyState==3) || (contract_xml.readyState==2) || (contract_xml.readyState==1) )
{
response="";
}

};

contract_xml.open("GET","check_available_offer.php?item_id="+item1,true);
contract_xml.send();

if(response==1)
{
if(confirm('Please confirm the that this is a binding contract. '))
{
return true;
}
else
{
return false;
}

}
else
{
alert("Sorry, you are a little late. Better luck next time.");
return false;
}

}


Its always displaying the alert message and returning false.

Please help me on this. Thanks in advance.

[devnull69]

You stumbled upon the most common pitfall in using Ajax

The first "A" in Ajax stands for "asynchronous". That means: The javascript code following the Ajax request .send() continues to execute while(!) the request is still running. A process in the background will call the onreadystatechange callback as soon as the readyState of the request changes. As soon as the readyState reaches 4 the request is finished.

That results in two facts:
1. If you want to alert the result of the request outside of the callback it will not work
2. Everything you want to do with the result of the request has to be done in (or started from) the onreadystatechange callback

So if you move the code from below the .send() into the onreadystatechange callback, it will start to work all of a sudden

[dev07]

Originally Posted by devnull69

You stumbled upon the most common pitfall in using Ajax

The first "A" in Ajax stands for "asynchronous". That means: The javascript code following the Ajax request .send() continues to execute while(!) the request is still running. A process in the background will call the onreadystatechange callback as soon as the readyState of the request changes. As soon as the readyState reaches 4 the request is finished.

That results in two facts:
1. If you want to alert the result of the request outside of the callback it will not work
2. Everything you want to do with the result of the request has to be done in (or started from) the onreadystatechange callback

So if you move the code from below the .send() into the onreadystatechange callback, it will start to work all of a sudden

I followed what you have advised earlier. But failed to get result it was returning true each time. Then i used this code. Anyways, again i tried what you have advised and find to get correct result. Posting modified code below.



function contract(count_number)
{
var item1=document.getElementById('ItemId1'+count_number).value;

var response=" ";

if(window.XMLHttpRequest)
{
contract_xml=new XMLHttpRequest();
}
else
{
contract_xml=new ActiveXObject("Microsoft.XMLHTTP");
}

contract_xml.onreadystatechange=function()
{

if(contract_xml.readyState==4)
{
//alert("4");
response=contract_xml.responseText;

if(response==1)
{
if(confirm('Please confirm that this is a binding contract '))
{
return true;
}
else
{
return false;
}

}
else
{
alert("Sorry, you are a little late. ");
return false;
}



}
// else if( (contract_xml.readyState==3) || (contract_xml.readyState==2) || (contract_xml.readyState==1) )
// {
// response="";
// }

};

contract_xml.open("GET","<?php echo $site_url; ?>check_available_offer.php?item_id="+item1,true);
contract_xml.send();
}




But is there any other solution? Can you just modify this?

[devnull69]

Not quite

As I told you: The javascript code keeps running while the request is being processed. That includes the end/return of the function. I.e. the function has already returned "long before" the request finishes. So it's pointless to return something from within the callback. Every action has to be performed inside the callback. So you will have to move everything you want to do with the result into the callback (or into a function and call this function from the callback)

[dev07]

Originally Posted by devnull69

Not quite

As I told you: The javascript code keeps running while the request is being processed. That includes the end/return of the function. I.e. the function has already returned "long before" the request finishes. So it's pointless to return something from within the callback. Every action has to be performed inside the callback. So you will have to move everything you want to do with the result into the callback (or into a function and call this function from the callback)

Well, i will try to do this. But. at the same time can you guide me how can i return the result into the callback? Will it be better to write two separate function (One for validation and one for ajax response) for this? Then where should i call the ajax function as the whole operation depends on the response of this ajax function.

[devnull69]

I think it would be the easiest to do something like that:

function contract(count_number) {
   var item1=document.getElementById('ItemId1'+count_number).value;

   if(window.XMLHttpRequest) {
      contract_xml=new XMLHttpRequest();
   } else {
      contract_xml=new ActiveXObject("Microsoft.XMLHTTP");
   }

   contract_xml.onreadystatechange=function() {
      if(contract_xml.readyState==4) {
         response=contract_xml.responseText;

         if(parseInt(response, 10)==1) {
            if(confirm('Please confirm that this is a binding contract ')) {
               startAction(true);
            } else {
               startAction(false);
            }
         } else {
            alert("Sorry, you are a little late. ");
            startAction(false);
         }
      }
   };

   contract_xml.open("GET","<?php echo $site_url;?>check_available_offer.php?item_id="+item1,true);
   contract_xml.send();
}

function startAction(requestResult) {
   if(requestResult) {
      // here will be the code to execute if the request result was TRUE
      ...
   }
}

[dev07]

Originally Posted by devnull69

I think it would be the easiest to do something like that:

function contract(count_number) {
   var item1=document.getElementById('ItemId1'+count_number).value;

   if(window.XMLHttpRequest) {
      contract_xml=new XMLHttpRequest();
   } else {
      contract_xml=new ActiveXObject("Microsoft.XMLHTTP");
   }

   contract_xml.onreadystatechange=function() {
      if(contract_xml.readyState==4) {
         response=contract_xml.responseText;

         if(parseInt(response, 10)==1) {
            if(confirm('Please confirm that this is a binding contract ')) {
               startAction(true);
            } else {
               startAction(false);
            }
         } else {
            alert("Sorry, you are a little late. ");
            startAction(false);
         }
      }
   };

   contract_xml.open("GET","<?php echo $site_url;?>check_available_offer.php?item_id="+item1,true);
   contract_xml.send();
}

function startAction(requestResult) {
   if(requestResult) {
      // here will be the code to execute if the request result was TRUE
      ...
   }
}

Well, thanks a lot for your guideline. But how can i return the result (i.e TRUE / FALSE) to the form using the function startAction? I was passing the value of count_number while submission of the form.

code:

<form action="#" method="post" name="form" onsubmit="return contract(2)">

.
.
.
<input type="submit" name="submit" value="submit"/>
</form>

[devnull69]

You just can't do that

So you should replace the form element with

<form action="#" method="post" name="form" onsubmit="contract(2); return false;">

and submit() the form programmatically from within the callback

function contract(count_number) {
   var item1=document.getElementById('ItemId1'+count_number).value;

   if(window.XMLHttpRequest) {
      contract_xml=new XMLHttpRequest();
   } else {
      contract_xml=new ActiveXObject("Microsoft.XMLHTTP");
   }

   contract_xml.onreadystatechange=function() {
      if(contract_xml.readyState==4) {
         response=contract_xml.responseText;

         if(parseInt(response, 10)==1) {
            if(confirm('Please confirm that this is a binding contract ')) {
               document.forms["form"].submit();
            }
         } else {
            alert("Sorry, you are a little late. ");
         }
      }
   };

   contract_xml.open("GET","<?php echo $site_url;?>check_available_offer.php?item_id="+item1,true);
   contract_xml.send();
}

[dev07]

Thanks a lot for quick reply. I was trying with your code. But failed to get the result. In Crome, Opera the form is not submitting using the following code after confirming. It was inserting inside the loop. But after that , it was doing nothing.

document.forms["form"].submit();

In firefox, the form was getting submit. But, it was not performing the post task of form submission.

Please help me on this. Thanks for your help.

[devnull69]

Is your form action really "#" ? What do you want to achieve with this action?

[dev07]

Using "#" , i want to redirect on the same page itself as i have written the post submission query on this.

Few points i should mention here.

1) There are 10 similar forms in the page. Their name is different. Did it unique dynamically by passing count_number value.

2) passed the value of count_number while submission of the form using the code:

document.forms["form"+count_number].submit();


The structure of the form :


<form name="form<?php echo $j?>" action="#" method="post" onsubmit="contract(<?php echo $j?>);return false;">


<input type="hidden" name="InterestedUserId<?php echo $j?>" id="InterestedUserId<?php echo $j?>" value="<?php echo $user_id?>"></input>

<input type="hidden" name="ItemId<?php echo $j?>" id="ItemId1<?php echo $j ?>" value="<?php echo $product_id?>"></input>

<input type="submit" name="btn_submit" style="background: url(offer.jpg) no-repeat scroll center center transparent; cursor: pointer; border: 0pt none; width: 88px; height: 23px;" value="">


</form>


php code:

if(isset($_POST['btn_submit']))

{
.
.
.
}


Javascript:



function contract(count_number) {

var item1=document.getElementById('ItemId'+count_number).value;
InterestedUserId=document.getElementById('InterestedUserId'+count_number).value;

var response="";


if(window.XMLHttpRequest) {
contract_xml=new XMLHttpRequest();
} else {
contract_xml=new ActiveXObject("Microsoft.XMLHTTP");
}

contract_xml.onreadystatechange=function() {
if(contract_xml.readyState==4) {
response=contract_xml.responseText;

if(parseInt(response, 10)==1)
{
if(confirm('Please confirm that this is a binding contract'))
{
document.forms["accept_offer"+count_number].submit();
}

}
else {
alert("Sorry, you are a little late. ");
}
}
};

contract_xml.open("GET","<?php echo $site_url; ?>check_available_offer.php?item_ids="+item1+"&InterestedUserId="+InterestedUserId,true);
contract_xml.send();
}

[devnull69]

You might have to change action="#" to action="<?php echo $_SERVER['PHP_SELF']?>" to make sure you really submit to the current page

[dev07]

I used <?php echo $_SERVER['PHP_SELF']?> in form action, but did not work. Still not submitting the form. Whenever i am trying to submit the form using javascript form submission code

document.forms["accept_offer"+count_number].submit();

the form is not doing any post submission task. But, if i submit it on normal way [i.e returning true from onsubmit action ], the post submission task executes successfully.

[devnull69]

What is the document type of your HTML? If you use XHTML you will not be able to address a form via its name. You should then add an id attribute to it and use document.getElementById(...).submit()

[dev07]

I am using the following document type.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Please suggest me what to do.