1

If this is possible, why is it not working? It is too much code, I will only put pseudo code and do not tell me that it is a syntax error because all the elements work in isolation, the problem is when integrating them together.

I have:

SET UP:

1) - An html form with various inputs and a single submit button. Like this:

<form action="" method="POST">
    <input type="submit"></input>
</form>

2) - PHP code that works on submit and gets form input values and it is working. For example:

<?php if($_SERVER['REQUEST_METHOD'] == 'POST') {
    // get values here, which is working //
    // database inserts, which are working too //
 ?>

3) - A Javascript js_function() that runs a client based test and prints the output in the console.log. For example:

<script>
    (function(w) {
     // code that runs //
     // prints results on console.log() //
    }
</script>

4) - An Ajax function (inside the Javascript main function, at the end before the closing tag) that gets the variable that prints in the console.log and posts it to the database in the fly, like this:

var JSoutput = "js_function_return";

function loadXMLDoc(){
    // check browser, status and response, etc //
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200){  
        // use a div to print response, which works all the time                    
    }

    xmlhttp.open("GET","boguspage.php?JSoutput="+JSoutput,true);
    xmlhttp.send();
}

5) - A bogus php page where the GET results of the Ajax query are collected and passed to the database. This works.

WHAT WORKS:

If I put my javascript function to load on the body body onload="js_function()" and the Ajax function onclick="loadXMLDoc()" on the "submit" button, everything works seamlessly, there is no problem. So, it is NOT a syntax issue, please read well before answering.

WHAT SEEMS IMPOSSIBLE:

1) - I need to have either both the Javascript function and the Ajax function execute simultaneously on a single POST or,

2) - Move the Javascript to the onclick event of the button and have the Ajax function wait for the Javascript function to execute and do an automatic POST or GET to the database on its own, when done.

I do not know how to accomplish either or. I have tried for 3 days and while every piece works separately or loaded in the body, joining them on submit causes the first Javascript function to execute too fast so the Ajax call returns empty and I get a PHP undefined variable error. This does not happen however if I have the Javascript to execute first in the body.

But I have a requirement to make it all happen on a single submit. How can I accomplish this?

annemartijn
  • 1,538
  • 1
  • 23
  • 45
  • I am confused as what you are asking? AJAX is made to bridge the gap between the client and server. AKA Javascript, HTML and PHP. So what are you trying to do with the Javascript as this is pretty vague pseudo code – Chitowns24 Mar 05 '14 at 08:02
  • I need post the result of the Javascript function on submit. That is, make the Javascript to run the test on click, have Ajax collect the results and post it to the database. It is not happening because the Javascript function takes time to produce results. I need to hold the execution of Ajax while Javascript is working and have it trigger once done. But this without clicking again. I do not know how to accomplish this. –  Mar 05 '14 at 08:09
  • You mean, calling the javascript onclick and within the javascript function implement the Ajax call? If yes, this is what I am doing. But it is not working. The Ajax executes too fast. The javascript functions needs about 8 seconds before finishing. Ideally, is there a way to delay the Ajax call ? –  Mar 05 '14 at 08:15
  • Use a callback on your function, calling the ajax request **http://stackoverflow.com/questions/4700424/javascript-callback-after-calling-function** – Johnny000 Mar 05 '14 at 08:22
  • I did not understand what he was doing in that answer. I have: Ajax(){ //Ajax code } js_function(){ //JS code; Ajax() } –  Mar 05 '14 at 09:04

2 Answers2

0

Write a function passing a callback:

    function taskThatTakesSometime(callback){
        // Do stuff here that takes time
        alert("Do some intense stuff");
        alert("Do some more stuff");
        // when done call the callback
        callback();
    }

    function ajax(){
        //do your ajaxrequest here
        alert("calling ajax");
    }

    // Call your intense task and configure the
    // callback for calling ajax when done
    taskThatTakesSometime(function(){
        ajax();
    });

JSFIDDLE

You should also overthink your design of using onload on the body element reading this question.

Community
  • 1
  • 1
Johnny000
  • 2,058
  • 5
  • 30
  • 59
  • OK, Johnny, the way I solved it was using a callback but I had to create another function with a timer and completely get rid of the PHP post. So, my timer function sets the submit once the other two functions that activate onclick are done. –  Mar 09 '14 at 22:26
0

From my previous encounters to this problem my way of doing this is to set a global variable in javascript and then on form submit block the form with return false based on this previously set variable, then I do whatever code I need and reset the variable and resubmit the form which will not do the actual submit action. Here is a simple example:

<form onsubmit="doAction(this);">
    <input type="submit">
</form>

Javascript:

<script>
    var preventFormSubmit = true;
    function doAction(this){
        if (preventFormSubmit) {
            preventFormSubmit = false;
            // Do Whatever stuff you need, this time the form won't submit
            this.submit(); // Usually I would put this in ajax's success reponse function
            return false;
        } // else do nothing, submit the form as usual
    }
</script>

I'm a little rusty in javascript as I write mostly jquery but you should get the main point of this.

Ovidiu Iacomi
  • 746
  • 8
  • 12