Question

我将首先说我是Javascript和JQuery的新手。我想要实现的是在HTML页面上有一个提交按钮，它将调用dbQuery文件中的.js函数，该函数将变量值打印到屏幕上，然后将它们添加到MySQL数据库中。

我需要使用我的第一个函数selectedVisibleValue中定义的JavaScript变量dbQuery我想要这样做的原因是因为我有四个下拉列表，其中三个是隐藏的下拉列表仅显示取决于第一个非隐藏的下拉列表，只有一个隐藏的下拉列表可见。

我想在我的PHP页面formPage中使用这些变量来执行数据库功能。我的代码如下所示我想将testing1函数添加到dbQuery函数中。

我曾尝试将其复制并粘贴到dbQuery函数中，但它不起作用。我不是想在下面的代码中使用selectedVisibleValue。我只是想用一些虚假的变量做一些测试。

    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);
    }
);
}

Answer 1

//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);
    }

}

Answer 2

jsFiddle DEMO

在函数之间传递变量可能对您的项目有用。

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();
    });

});

Answer 3

以下是工作代码：

        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);
    }
);
});
}

在javascript函数中调用JQuery HTTP GET请求

3 个答案: