从多个表单中获取值并根据表单id在适当的字段中显示

Question

我在一个页面上有两个带有结构的表单。

<div id="tabs-7">
    <form action="/admin/languages" id="1" class="mainForm" method="POST">
        <fieldset>
            <div class="widget">

                <input type="hidden" maxlength="40"class="autoF" name="base" id="base" value="<?php echo base_url(); ?>" />
                <input type="hidden" maxlength="40"class="autoF" id="lang_id" name="lang_id" value="1" />


                <div class="rowElem">
                    <label>Calender</label> 
                    <div class="rowElem noborder" >
                        <label>Date:</label>
                        <div class="formLeft">
                            <input type="text"  name="date" class="datepicker date" value="<?php echo isset($data['1']['date']['text']) ? $data['1']['date']['text'] : ""; ?>" />
                        </div>
                    </div>
                    <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Note:</label>
                    <div class="formLeft">


                        <?php
                        if (!empty($data['1']['calender_contents'])) {
                            $text = preg_replace('/\s+/', ' ', $data['1']['calender_contents']['text']);
                        }
                        ?>
                        <textarea name="calender_contents"  class="auto limit calender_contents" style="min-width: 600px;max-width: 600px;min-height:80px;max-height: 80px;"><?php echo isset($data['1']['calender_contents']['text']) ? $text : ""; ?></textarea>
                    </div>
                    <div class="rowElem "><input type="button" value="Add Note" class="blueBtn left addnote"></div>
                </div>


                <div class="rowElem "><input type="submit" value="Save" class="greenBtn right"></div>

            </div>
        </fieldset>
    </form>
</div>

<div id="tabs-8">
    <form action="/admin/languages" id="2" class="mainForm" method="POST">
        <fieldset>
            <div class="widget">

                <input type="hidden" maxlength="40"class="autoF" name="base" id="base" value="<?php echo base_url(); ?>" />
                <input type="hidden" maxlength="40"class="autoF" id="lang_id" name="lang_id" value="2" />


                <div class="rowElem">
                    <label>Calender</label> 
                    <div class="rowElem noborder" >
                        <label>Date:</label>
                        <div class="formLeft">
                            <input type="text"  name="date" class="datepicker date" value="<?php echo isset($data['2']['date']['text']) ? $data['2']['date']['text'] : ""; ?>" />
                        </div>
                    </div>
                    <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Note:</label>
                    <div class="formLeft">


                        <?php
                        if (!empty($data['2']['calender_contents'])) {
                            $text = preg_replace('/\s+/', ' ', $data['1']['calender_contents']['text']);
                        }
                        ?>
                        <textarea name="calender_contents" class="auto limit calender_contents" style="min-width: 600px;max-width: 600px;min-height:80px;max-height: 80px;"><?php echo isset($data['2']['calender_contents']['text']) ? $text : ""; ?></textarea>
                    </div>
                    <div class="rowElem "><input type="button" value="Add Note" class="blueBtn left addnote"></div>
                </div>


                <div class="rowElem "><input type="submit" value="Save" class="greenBtn right"></div>

            </div>
        </fieldset>
    </form>
</div>

和javascript：

 $(".datepicker").datepicker({
        defaultDate: +7,
        autoSize: true,
        appendText: '(yyyy-mm-dd)',
        dateFormat: 'yy-mm-dd',
        onClose: function(dateText, inst) {
           var form = $(this).closest("form");
             var formID = $(form).attr("id");
             console.log(formID);
             if(formID == "1"){
                  formID = 1;
                   }
                   else{
                     formID = 2;  

                   }
            var lang_id = formID;
            var date = $(".date").val();
            console.log(lang_id);
            console.log(date);

            $.ajax({
                type: 'POST',
                url: "/admin/getnote",
                dataType: "json",
                data: {"date": date, "lang_id": lang_id},
                success: function(data) {

                    console.log(data.arr[0]);

                     if(data.arr[0] != undefined){
                    $('.calender_contents').val(data.arr[0].note);
                    $('.date').val(data.arr[0].date);
                     }
                      else {
                         $('.calender_contents').val("");                         
                     }
                }

            });

        }
    });

我能够从第一个选项卡中的数据库中获得值，这是表7的好值，但是当使用第二个表单中的日期选择器时，它的值也会显示在第一个表中，因此我正在寻找一些建议，作为我如何将$(this).closest("form");与这些字段组合在一起的方法。

$('.calender_contents').val(data.arr[0].note);
                        $('.date').val(data.arr[0].date);

这样我就可以在特定的表单字段中得到值。谢谢。

Answer 1

选择#calendar_contents。如果您对两个元素使用相同的" id“，那么首先您做错了(一个id必须是唯一的)，那么jQuery将只返回包含所请求的id的第一个元素。

尝试使用一个类，并“定位”您正在使用的选项卡。

Answer 2

在同一页上不能有具有相同id的html元素，即使它们以不同的形式存在。id属性在整个页面上必须是唯一的。