从div元素中检索数据并使用JQUERY使用post提交它

时间:2014-07-02 16:00:12

标签: javascript jquery html css twitter-bootstrap

我是Jquery的新手,并努力从我的' span'中检索日期值。我的jquery代码中的元素,并希望使用java脚本将其与我的表单一起发布。我需要使用此方法的原因是我正在尝试使用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>

FORM:                                          -

     <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元素中检索date的值并将其与表单一起发布以在下一页上检索它以根据此值从数据库中过滤记录。如果有人可以帮助我,我将不胜感激。谢谢< / p>

2 个答案:

答案 0 :(得分: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脚本。 (在编辑中我已经包含了跨度的副本)

祝你好运

答案 1 :(得分:0)

我认为你没有正确地遵循你的教程。 这是教程中的一些代码,你会注意到它将数据放入一个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键并且它没有单击按钮就提交表单,您的代码将永远不会执行。此外,由于这个原因(以及许多其他原因),这是不好的做法

以下是代码的清理版本:

<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>