制作另一个窗体,该窗体将显示列表(自动完成)并将用作所选字段的值
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/。
相关文章:
- 主干窗体隐藏字段未呈现
- 即使对于非空窗体,FormData对象也返回空.对于具有2个输入字段的表单,
- 禁用基于rails中另一个字段的字段窗体
- 在ASP.Net web窗体/MVC中动态加载和添加字段
- 根据窗体上的Picklist字段值,选中并取消选中复选框
- 制作另一个窗体,该窗体将显示列表(自动完成)并将用作所选字段的值
- 将新字段追加到窗体
- 如何根据字段名称在SharePoint显示窗体中隐藏字段(jQuery)
- web2py控件窗体,选择选项时显示字段
- 在窗体中的字段中循环
- 禁用html5”;“必需”;不显示窗体部分时的字段输入属性
- 如何使用内联背景颜色样式设置窗体输入字段的样式
- Sencha Touch:在窗体面板上显示和编辑HasMany字段
- 选择字段时清除模式窗体
- 窗体-通过在select标记中选择一个选项来显示隐藏字段
- 在Lotus Notes Web窗体中设置字段的JavaScript
- 弹出窗体的字段为空错误
- ASP.NET Web窗体-通过jquery填充字段时客户端验证不起作用
- 在依赖于另一个字段选择的窗体中隐藏表的某个部分
- Angular:Ng仅在窗体中关闭“输入字段”时显示