从div元素中检索数据，并使用JQUERY进行后期提交

Question

我是Jquery的新手，正在努力从jquery代码中的'span'元素中检索日期值，并希望使用Java脚本将其与表单一起发布。我需要使用此方法的原因是我试图使用date范围选择器， 网址为http://www.dangrossman.info/2012/08/20/a-date-range-picker-for-twitter-bootstrap/

我不知道如何将span元素值嵌入到表单中，并将其与其他表单数据一起发布到其他页面。

Javscript

<script type="text/javascript">

document.getElementById("btnsubmit").addEventListener("click", function () {
var s;
 s=jQuery.data($('aname'),s);

alert(s);

    document.form.submit();
  });

</script>

表格： -

     <b class="caret"></b>
     <span><?php echo date("F j, Y", strtotime('-30 day')); ?> - <?php echo date("F j, Y"); ?> </span>
    </div>
     <button id="btnsubmit" onclick="document.getElementById('frmdate').submit();">submit</button>

  </form>

我只想从span元素中检索日期值，并将其与表单一起发布以在下一页上检索它，以基于此值从数据库中过滤记录。如果有人在这方面能帮助我，我将不胜感激。

Answer 1

正如我在小提琴中建议的那样：

<form action="#">   
  <b class="caret"></b>
    <span>14-10-2014</span>
    <input type="hidden" name="tt" value="10-10-2014" />
    <input id="tt2"/>
    <input type="submit"/>
    <a href="#" id="submit">submit</a>
<form>

对于Java脚本：

$(document).on('click', '#submit', function(event) {
    event.preventDefault();
    alert($("input[name='tt']").val()+" - Method 1");
    $("#tt2").val($("span").text());
});

$(document).on('submit', 'form', function(event) {
    event.preventDefault();
    alert($("input[name='tt']").val() + " - Method 2");
    $("#tt2").val($("span").text());
});

不要忘记添加Jquery脚本。 （在编辑中，我包括了跨度的副本）

最好的祝福

Answer 2

我认为您没有正确遵循本教程。 这是教程中的一些代码，您会注意到它将数据放入INPUT字段，然后将其作为表单数据自动发送，无需添加jQuery。

<form id="frmdate">
  <div class="form-group">
    <label for="reservation">Reservation dates:</label>
    <div class="controls">
      <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
        <input type="text" name="reservation" id="reservation" />
      </div>
    </div>
  </div>
</form>

<script type="text/javascript">
$(document).ready(function() {
    $('#reservation').daterangepicker();
});
</script>

同样在代码中，您将jQuery和标准javascript混为一谈。 对于您正在监听的是单击按钮而不是提交表单，这意味着如果Enter按下Enter键，则您的代码将永远不会执行，并且无需单击按钮即可提交表单。 此外，仅出于这些原因（以及许多其他原因），这是一种不好的做法

这是代码的清理版本：

<form id="frmdate">

    ...

    <b class="caret"></b>
    <span id="aname"><?php echo date("F j, Y", strtotime('-30 day')); ?> - <?php echo date("F j, Y"); ?></span>
    <button id="btnsubmit" type="sumbit">Submit</button>
</form>

<script type="text/javascript">
$(document).ready(function() {
    $('#frmdate').submit(function(){
        // Do some code here.
    });
});
</script>