制作另一个窗体,该窗体将显示列表(自动完成)并将用作所选字段的值


Make another form that will display a list(autocomplete) and will be used as a value for selected fields

我有两种形式,第一种有一个自动完成字段(工人姓名//来自mysql表(,以及用于手动输入日期的输入字段。另一个是下面的表单,其中包含要由用户填写的字段。

<form class="well form-search">
    Date of Payment:
    <?php if($sf_user->hasCredential('PAYMENT')): ?>
        <input type="text" class="field2 required" size="15" name="date_of_payment_<?php echo $l['id'] ?>" value="<?php echo $sf_params->get('date_of_payment_'.$l['id'], date('Y-m-d')) ?>" placeholder="payment date"/>
    <?php endif; ?> 
    Laborer: <input type="hidden" class="laborers" id="laborer_id_<?php echo $l['id'] ?>" name="collector_id_<?php echo $l['id'] ?>" value="<?php echo $sf_params->get('collector_id_'.$l['id']) ?>" />
    <input rel="<?php echo $l['id'] ?>" type="text" class="field2 required laborer_autocomplete" size="15" name="laborer_<?php echo $l['id'] ?>" value="<?php echo $sf_params->get('laborer_'.$l['id'])?>" id="laborer_<?php echo $l['id'] ?>" placeholder="laborerr"/>
        <?php if(isset($fieldErrors['laborer_id_'.$l['id']])): ?>
            <div class="error">
                <?php echo $fieldErrors['laborer_id_'.$l['id']] ?>
            </div>
        <?php endif; ?>
    <button type="submit" class="btn">Go</button>
</form>

第二种形式

<form action="<?php echo //?>" method="post" onsubmit="return confirm('Are you sure? This cannot be undone!')">
    <table class="table table-bordered table-striped table-condensed">
        <thead>
            <tr>
                <th class="personid" style="width:5px;">#</th>
                <th>Days</th>
                <th>Term</th>
                <th>Date of Payment</th>//I want this to hide
                <th>Laborer</th>//I want this to hide
                <th>Amount Received</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach($works as $i=>$l): ?>
                <tr class="<?php echo ($i%2==0)?'even':'odd' ?>">
                    <td class="personid"></td>
                    <td>PHP<?php echo number_format($l['days'], 2) ?></td>
                    <td><?php echo $l['term'] ?> days</td>
                    <td>
                        Date of Payment (YYYY-MM-DD)<br />
                        <input type="text" class="field2 required" size="15" name="date_of_payment_<?php //echo $l['id'] ?>" value="<?php// echo $sf_params->get('date_of_payment_'.$l['id'], date('Y-m-d')) ?>" placeholder="payment date"/>
                    </td>
                    <td>
                        <input type="hidden" class="laborers" id="laborer_id_<?php //echo $l['id'] ?>" name="laborer_id_<?php echo $l['id'] ?>" value="<?php echo $sf_params->get('laborer_id_'.$l['id']) ?>" />
                        <input rel="<?php// echo $l['id'] ?>" type="text" class="field2 required collectors_autocomplete" size="15" name="laborer_<?php echo $l['id'] ?>" value="<?php echo $sf_params->get('laborer_'.$l['id'])?>" id="laborer_<?php echo $l['id'] ?>" placeholder="laborerr"/>
                        <?php if(isset($fieldErrors['laborer_id_'.$l['id']])): ?>
                            <div class="error">
                                <?php echo $fieldErrors['laborer_id_'.$l['id']] ?>
                            </div>
                        <?php //endif; ?>
                    </td>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table> <!--end table-->

是否可以通过填写第一个表单来自动填充这些字段,而不是手动输入第二个表单中的人工和付款日期字段?

使用 javascript "blur" 事件,我们可以将数据从一个字段复制到页面上的任何其他元素。"模糊"事件意味着场不再具有焦点。也就是说,用户按 Tab 键转到下一个字段或单击页面上的其他元素。

不确定你的浏览器要求是什么,所以我建议jQuery。下面是一个简单的示例:

.html:

<!-- form snippet -->
<input type="text" name="field1" id="field1" value="">
<!-- destination -->
<input type="hidden" name="field1b" class="show-field1">
<input type="hidden" name="field1c" class="show-field1">
<p class="show-field1"></p>

JavaScript:

$("#field1").blur(function(event) {
    // jquery sets "this" to the element handling the event; i.e. "field1"
    // "value" is a standard property on <input> elements
    var value = this.value;
    // next, select your targets
    var copyTo = $(".show-field1");
    // if copying to a form element
    copyTo.val(value);
    // if copying to a DOM element
    copyTo.text(value);
});

我希望这有所帮助。我也创建了一个jsfiddle:http://jsfiddle.net/jbarreiros/o5cuv2nt/。