Jquery不加载从foreach循环呈现的表单
Jquery not load form rendered from foreach cicle
我试图在Laravel 5.2上为购物车中的每个项目呈现一种形式的细节。通过点击复选框("#couponyes"或"#couponno"),页面需要呈现或从数据库中获取的数据,包含在div whiteid ="azienda"(如果#couponyes被击中)或输入表单(如果#couponno被击中),div id="ritiro"。下面是完整的代码:
<?php
$carrelli = DB::table('carrello')->where('carrello.entry_by', 'Session::get('uid'))->join('tariffe', 'tariffe.id', '=', 'carrello.id_tariffa' )->join('servizi', 'tariffe.id_servizio', '=', 'servizi.id')->distinct()->select('servizi.nome as nome_servizio', 'servizi.mod_servizio as mod_servizio', 'tariffe.geo as geo', 'carrello.source_geo as source', 'carrello.destination_geo as destination' )->get();
?>
@foreach($carrelli as $carr)
@if(empty($carr->geo))
<fieldset style="height:600px">
<legend>{{ $carr->nome_servizio }}</legend>
<div class="row">
<div class="col-lg-6">
@if(!empty($coupon))
<p>Confermi di voler utilizzare gli indirizzi di presa e consegna previsti dalla tua la convenzione aziendale {{ $coupon->coupon }} ?</p>
<label class="radio-inline">
<input id="couponyes" type="radio" required name="coupon"> Si
</label>
<label class="radio-inline">
<input id="couponno" type="radio" name="coupon"> No
</label>
<div id="azienda" style="display:none;">
<?php $punti_ritiro = DB::table('punti_ritiro_aziende')
->where('entry_by', $azienda->Id)
->where('id_tipologia', 1)
->orWhere('id_tipologia', 3)
->where('attivo', 1)
->get();
$punti_consegna = DB::table('punti_ritiro_aziende')
->where('entry_by', $azienda->Id)
->where('id_tipologia', 2)
->orWhere('id_tipologia', 3)
->where('attivo', 1)
->get();
?>
<div class="form-group" style="margin-top:50px">
<label for="state">Punto di ritiro</label>
@foreach($punti_ritiro as $punto_ritiro)
<input type="text" readonly value="{{ $punto_ritiro->indirizzo }}"></option>
@endforeach
</div>
<hr>
<div class="form-group" style="margin-top:50px">
<label for="state">Punto di consegna</label>
@foreach($punti_consegna as $punto_consegna)
<input type="text" readonly value="{{ $punto_consegna->indirizzo }}"></option>
@endforeach
</div>
<div>
{{ $layout->warning_checkout }}
</div>
</div>
<div id="ritiro" style="display:none; margin-top:20px; margin-bottom:20px" >
@if($carr->mod_servizio == 1)
<div class="form-group">
<label for="state">Punto di ritiro</label>
<input type="text" required name="indirizzo_ritiro" id="source1" class="form-control">
</div>
@elseif($carr->mod_servizio == 2)
<div class="form-group">
<label for="state">Punto di consegna</label>
<input type="text" required name="indirizzo_consegna" id="source2" class="form-control">
</div>
@elseif($carr->mod_servizio == 3)
<div class="form-group">
<label for="state">Punto di ritiro</label>
<input type="text" required name="indirizzo_ritiro" id="source1" class="form-control">
</div>
<hr>
<div class="form-group">
<label for="state">Punto di consegna</label>
<input type="text" required name="indirizzo_consegna" id="source2" class="form-control">
</div>
@else
@endif
</div>
@endif
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="address">Data ritiro</label>
<div id="dataritiroS" ></div>
<div id="dataritiroN" ></div>
</div>
<div class="form-group">
<label for="address">Data riconsegna</label>
<div id="dataconsegnaS" required style="display:none"></div>
<div id="dataconsegnaN" required style="display:none"></div>
</div>
</div>
</div>
</fieldset>
@else
<fieldset style="height:600px">
<legend>Ritiro scooter</legend>
<div class="row">
<div class="col-lg-6">
<div class="form-group" style="margin-top:50px">
<label for="state">Punto di ritiro</label>
<input type="text" readonly value="{{ $geo->source }}" readonly />
</div>
<hr>
<div class="form-group" style="margin-top:50px">
<label for="state">Punto di consegna</label>
<input type="text" readonly value="{{ $geo->destination }}"/>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="address">Data ritiro</label>
<div id="dataritiro_geo" required></div>
</div>
<div class="form-group">
<label for="address">Data riconsegna</label>
<div id="dataconsegna_geo" required></div>
</div>
</div>
</div>
</fieldset>
@endif
@endforeach
,这里是javascript:
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$(document).ready(function(){
var days = <?php echo json_encode($days); ?>;
var dayx = <?php echo json_encode($dayx); ?>;
$('[id="dataritiroS"]').datepicker({
minDate : 0,
beforeShowDay: function(date){
var day = date.getDay();
return [days.indexOf(day) !== -1];
}});
$('[id="dataritiroN"]').datepicker({
minDate : 0,
beforeShowDay: function(date){
var dayz = date.getDay();
return [dayx.indexOf(dayz) !== -1];
}});
$('[id="dataritiro_geo"]').datepicker({
minDate : 0,
beforeShowDay: function(date){
var dayz = date.getDay();
return [dayx.indexOf(dayz) !== -1];
}});
$('[id="dataconsegna_geo"]').datepicker({
minDate : 0,
beforeShowDay: function(date){
var dayz = date.getDay();
return [dayx.indexOf(dayz) !== -1];
}});
});
</script>
<script>
$(document).ready(function(){
var dayconsegnas = <?php echo json_encode($days); ?>;
var dayconsegnax = <?php echo json_encode($dayx); ?>;
$('[id="dataconsegnaS"]').datepicker({
minDate : 0,
beforeShowDay: function(date){
var dayconsegna = date.getDay();
return [dayconsegnas.indexOf(dayconsegna) !== -1];
}});
$('[id="dataconsegnaN"]').datepicker({
minDate : 0,
beforeShowDay: function(date){
var dayconsegnaz = date.getDay();
return [dayconsegnax.indexOf(dayconsegnaz) !== -1];
}});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var id_tariffa = button.data('tariffa') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.hidden input').val(id_tariffa)
});
$( document).on("click", "#couponyes", function () {
$('[id="ritiro"]').hide('fast');
$('[id="azienda"]').show('fast');
$('[id="dataritiroN"]').hide('fast');
$('[id="dataritiroS"]').show('fast');
$('[id="dataconsegnaN"]').hide('fast');
$('[id="dataconsegnaS"]').show('fast');
$('[id="tariffaN"]').hide('fast');
$('[id="tariffaS"]').show('fast');
});
$( document).on("click", "#couponno", function () {
$('[id="ritiro"]').show('fast');
$('[id="azienda"]').hide('fast');
$('[id="dataritiroN"]').show('fast');
$('[id="dataritiroS"]').hide('fast');
$('[id="dataconsegnaN"]').show('fast');
$('[id="dataconsegnaS"]').hide('fast');
$('[id="tariffaN"]').show('fast');
$('[id="tariffaS"]').hide('fast');
});
});
$('#cellulare').blur(function(evt) {
evt.target.checkValidity();
}).bind('invalid', function(event) {
alert('Il telefono deve contenere almeno 11 caratteri numerici');
});
</script>
这在couponyes radio上工作,但在couponno上只显示循环的第一项…
如果您将这些ID属性更改为class属性,则可以正常工作。但是,元素不能具有相同的ID属性。查看jQuery UI Datepicker只响应第一个文本框
将<div id="dataritiroS" ></div>
改为<div class="dataritiroS" ></div>
, $('[id="dataritiroS"]').datepicker({
改为$('.dataritiroS').datepicker({
。
注意:Datepicker通常与<input ... >
元素一起使用,因此您可能需要将该div的元素类型更改为输入。参见https://jqueryui.com/datepicker获取文档和源代码示例。
相关文章:
- 当选择值x时,Javascript需要在正确的位置显示文本区域,从而循环通过具有选择选项的表单
- 循环遍历包含另一个表单的表单
- 表单提交在一段时间循环PHP,jquery
- 表单中的 jQuery DOM 不会在 for 循环中更新
- 我的单选按钮没有从foreach循环中获得值,表单验证返回'必填字段'即使已检查
- 在每个循环中的表单上使用嵌套资源和html类Rails Ajax
- 如何在HTML表单上进行制表符循环
- 如何使此表单验证脚本在返回之前循环通过整个表单部分
- 使用Jquery循环遍历表单中的元素
- 带有表单值的Javascript While循环
- 使用ajax循环while中的多个表单
- 在html表单中循环
- jQuery:从带有 for 循环的数组动态构建表单
- 在 Javascript 中循环并删除表单元素
- 避免在自动提交表单时出现重复或无限循环
- JQuery 循环访问表单元素时出现问题
- PHP 循环使用按钮 ID 的表单
- JavaScript - 在“for”循环中设置表单输入属性
- 在 Javascript 中循环访问表单中的可见输入元素
- 循环访问多个表单并发送 attr 值