calling JQuery HTTP GET request inside javascript function

Question

I will start off by saying I am new to Javascript and JQuery. What I want to accomplish is have a submit button on an HTML page that will call the dbQuery function in my .js file that will print the value of variables to the screen and then add them into a MySQL database.

I need to use the JavaScript variable selectedVisibleValue that is defined in my first function dbQuery The reason I want to do this is because I have four drop downs, three of which are hidden drop downs that are only shown depending on the first non hidden dropdown, only one of the hidden drop downs is ever visible.

I want to work with these variables in my PHP page formPage to do the Database functions. My code is below I want to add the testing1 function into the dbQuery function.

I have tried just copying and pasting it into the dbQuery function but it does not work. I am not trying to work with the selectedVisibleValue in the code below. I am just trying to do some testing with some bogus variables.

    var dbQuery = function(){
    var description = document.getElementById("jobDescription").value;
    var selectedEquip = document.getElementById("equipmentList");
    var selectedEquip1 = selectedEquip.options[selectedEquip.selectedIndex].text;
    var selectedVisibleValue = $(".unitDropDowns select:visible").val();
    document.getElementById("descriptionSummary").innerHTML = "<h3>Description</h3>" + "<p>" + description + "</p>";
    document.getElementById("equipmentRan").innerHTML = "<h3>Equipment Ran </h3>" + "<p>" + selectedEquip1 + "</p>" + "<h3>Unit Number</h3>" + "<p>" + selectedVisibleValue + "</p>";
    document.getElementById("equipmentRan").style.display = "block";
    document.getElementById("descriptionSummary").style.display = "block";
}

var testing1 = function() {
    $.get(
        "formPage.php",
     {paramOne : 123, paramX : 'abc'},
     function(data) {
     document.getElementById("equipmentRan").innerHTML = ('page content: ' + data);
    }
);
}

I don't think its executing the code for the testing1 function it will show everything how its supposed to in the dbQuery function but the values from the testing1 function are never printed to the screen. If I call the testing1 function from a separate submit button it works as intended. I do not receive any errors in the console either. — Yamaha32088
– Yamaha32088, Commented Jan 5, 2013 at 3:15
I would wrap your $.get in a jQuery Document Ready function to see if that fixes it. — arttronics
– arttronics, Commented Jan 5, 2013 at 3:17
I realize that I basically want both of them to execute from the click of a single submit button I have tried calling it from inside the dbQuery function and it did not work. — Yamaha32088
– Yamaha32088, Commented Jan 5, 2013 at 3:21
did not work is not very helpful. Need to learn how to inspect request in browser console( check status, what is sent/received etc), and make sure no script errors are being thrown also. Need a lot more details since problem could be script or server related — charlietfl
– charlietfl, Commented Jan 5, 2013 at 3:23

Joseph · Accepted Answer · 2013-01-05 03:37:16Z

4

//cache references to static elements
var jobDescription = $('#jobDescription')
  , selectedEquip = $('#equipmentList')
  , descriptionSummary = $('#descriptionSummary')
  , equipmentRan = $('#equipmentRan')
  ;    


function dbQuery(){

    //gather params    
    var params = {
        jobDescription : jobDescription.val(),
        selectedEquip1 : selectedEquip.val(),
        selectedVisibleValue = $(".unitDropDowns select:visible").val()
    }

    //show summary
    descriptionSummary.html('<h3>Description</h3><p>'+description+'</p></h3>').show();
    equipmentRan.html('<h3>Equipment Ran</h3><p>'+selectedEquip1+'</p><h3>Unit Number</h3><p>'+selectedVisibleValue+'</p>').show();

    //do a get
    $.get('formPage.php',params,function(data) {
        equipmentRan.html('page content: ' + data);
    }

}

answered Jan 5, 2013 at 3:37

Joseph

120k31 gold badges186 silver badges238 bronze badges

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

Comments

arttronics · Accepted Answer · 2013-01-05 03:56:18Z

jsFiddle DEMO

Passing variables between functions might come in useful for your project.

HTML:

<div id="theBox"></div>
<button>Press Me</button>

JS

$(document).ready(function() {

    // This is some other Do More function, defined prior to the next variable function.
    // This is your .get() request.
    function doMore(target){
        // For the incomming targer, add a class style of a larger font.
        $(target).css('font-size', 30);
    }    


    // The main function.    
    var dbQuery = function() {
        // Show dynamic text on the HTML page.
        var extra = $('#theBox').html('Dynamic Text Results');
        // Run some other function, also... send the private variable in use.
        doMore(extra);        
    };


    // The submit button.
    $('button').on('click', function() {
        // Start the function.
        dbQuery();
    });

});

Yamaha32088 · Accepted Answer · 2013-01-05 05:06:40Z

0

Here is the working code:

        function dbQuery() {
    window.description = document.getElementById("jobDescription").value;
    var selectedEquip = document.getElementById("equipmentList");
    window.selectedEquip1 = selectedEquip.options[selectedEquip.selectedIndex].text;
    window.selectedVisibleValue = $(".unitDropDowns select:visible").val();
    testing1();
}

function testing1() {
    $(document).ready(function() {
        $.get(
        "formPage.php",
     {paramOne : window.selectedVisibleValue, paramX : window.description, paramY : window.selectedEquip1},
     function(data) {
     document.getElementById("equipmentRan").innerHTML = (data);
    }
);
});
}

edited Jan 5, 2013 at 5:06

answered Jan 5, 2013 at 4:33

Yamaha32088

4,24310 gold badges54 silver badges105 bronze badges

1 Comment

arttronics Over a year ago

In comments a while back, I mentioned you should wrap your .get() in a jQuery Document Ready function. I use that globally in my jsFiddle for my Answer, where also I show how you can run a secondary function that can launch the .get(); function. Reconsider my answer.

Collectives™ on Stack Overflow

calling JQuery HTTP GET request inside javascript function

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related