Question

我有两种形式，第一种有自动填充字段（劳动者名称//来自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-->

可以通过填写第一个表单来自动填充这些字段，而不是第二种形式的劳动者和支付日期字段的手动输入？

Answer 1

使用javascript“blur”事件，我们可以将数据从一个字段复制到页面上的任何其他元素。 “模糊”事件意味着该字段不再具有焦点。也就是说，用户选中了下一个字段或点击了页面上的其他元素。

不确定您的浏览器要求是什么，所以我建议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/。

创建另一个将显示列表（自动填充）的表单，并将其用作所选字段的值

1 个答案: