Javascript 第二个表单没有获取数据

我有一个单页应用程序，它不是页面，而是一次加载一个部分。这个应用程序的基本原理是，你输入一个查询，然后进入一个结果页面，然后在另一个表单的结果顶部-与第一个表单相同，但不是进入一个新的视图（进入同一页面的不同部分），结果只是显示在它的下方。每当加载一个新视图时，另一个视图将隐藏。（例如：主视图具有搜索表单。搜索、提交、隐藏主视图，然后是结果视图）

数据来自使用Ajax的远程服务器

编辑：多亏@Himal，我修复了第一个问题。但是现在，当我在第二个表单中输入内容时，它只返回“Nothing was submitted”。即使我输入了一些东西，我也不知道它为什么会这样。有什么原因吗

旧（已修复！）问题：

然而，问题是第一种形式有效。您搜索一个查询，然后结果显示在结果视图上，但是，当您再次使用结果视图上方的表单进行搜索时，它不会执行任何操作。代码如下：

getPickerData = function() {
    var tickerForm = $('#analyze-form'),
        pickHolder = $('#PickHolder'), // The view where the results and second form resides
        pickContent = $('#PickHolder #pick-content'); // Where the results is loaded
        tickerHomeVal = $('#home #ticker').val(); // Value of the first ticker
    //document.getElementById('PickHolder').innerHTML='<h3 class="loadingtext">Loading Data</h3>';
    //document.getElementById('PickHolder').style.display='';
    $.ajax({
        type: "POST", 
        url: 'http://differenturl.com/something.php', 
            data: "something="+tickerHomeVal+"&something",
        complete: function(data){  
            pickContent.html(data.responseText);
        }  
    });

    var tickerResultsVal = $('#PickHolder #ticker').val();
    $('#results-submit-ticker').on('touchstart click', function(e){
        console.log('clicked?');
        $.ajax({
            type: "POST", 
            url: 'http://differenturl.com/something.php', 
            data: "something="+tickerResultsVal+"&something",
            complete: function(data){   
               pickContent.html(data.responseText);
               console.log(data);
            }  
        });
    });
}

差不多就是这样。有一个if语句寻找某个类来运行这个函数，但我认为这是不相关的

第二种形式的HTML如下所示。这和第一个表单完全相同，唯一的区别是它在不同的视图中，以及它下面的一个div中

<div id="PickHolder" class="view container">
    <form id="analyze-results-form" action="" class="analyze-form">
        <div class="input-container">
            <input id="ticker" class="input-stock" type="text" placeholder="Add Ticker">

        </div><!-- /.input-container -->
        <button id="results-submit-ticker" class="action action-data btn no-view" data-ref="#PickHolder">Analyze</button>
    </form>
    <div id="pick-content"></div>
</div>

分析

以及不同的ID，正如您可以从JS中看出的

---

为什么JS for section表单不返回数据？单击时甚至不会出现console.log（）。因此，您的ajax调用应该如下所示：

$.ajax({
            type: "POST", 
            url: 'http://differenturl.com/something.php', 
            data: "something="+tickerResultsVal+"&something",
            success: function(data){   
               pickContent.html(data.responseText);
               console.log(data);
            },
            error: function(xhr, error) {
               // handle error
            }
});

已完成的回调隐藏了名为tickerResultsVal的变量的未设置值的潜在错误

您在click事件的范围之外定义并设置了tickerResultsVal的值。因此，在第一次运行时，它被正确设置并发送到ajax请求。但是在你的第二次点击中

var tickerResultsVal = $('#PickHolder #ticker').val();

从未运行，因此tickerResultsVal未设置，从ajax请求返回“Nothing was submitted”错误

您可以使用该值的相对路径，也可以将tickerResultsVal的定义放入单击事件中

$('#results-submit-ticker').on('touchstart click', function(e){
    var tickerResultsVal = $('#PickHolder #ticker').val(); // inside the scope of click event
    console.log('clicked?');
    $.ajax({
        type: "POST", 
        url: 'http://differenturl.com/something.php', 
        data: "something="+$('#PickHolder #ticker').val()+"&something", // or just use relative path to input value
        complete: function(data){   
           pickContent.html(data.responseText);
           console.log(data);
        }  
    });
});

---

Hi@Himal谢谢你看这个，我真的很感激。但是是的，但那真的不重要。我把它改成了那样，也没有效果。是的，我意识到了。这就是我删除评论的原因。@Himal你能帮我解决这个问题吗？我真的也需要！为什么不在（'touchstart click'，函数（e）上为您的点击事件使用

$（'#results submit ticker'）。添加：您可能还想使用jQuery“success”回调而不是“complete”。您可以使用“error”回调来报告任何错误。@Azadrum请随意发布答案：）
$('#results-submit-ticker').on('touchstart click', function(e){
    var tickerResultsVal = $('#PickHolder #ticker').val(); // inside the scope of click event
    console.log('clicked?');
    $.ajax({
        type: "POST", 
        url: 'http://differenturl.com/something.php', 
        data: "something="+$('#PickHolder #ticker').val()+"&something", // or just use relative path to input value
        complete: function(data){   
           pickContent.html(data.responseText);
           console.log(data);
        }  
    });
});