I created a tabular form in yii2 with question and multiple options. Getting issue with radio button due to different name. Not able to select single correct option.
<input type="radio" id="tbloptions-0-correct" name="Tbloptions[0][correct]" value="1" checked="" aria-invalid="false">
<input type="radio" id="tbloptions-1-correct" name="Tbloptions[1][correct]" value="1" checked="">
Yii2 create action code
<?php foreach ($modelOptions as $i => $modelOption): ?>
<div class="item panel panel-default"><!-- widgetBody -->
<div class="panel-heading">
<h3 class="panel-title pull-left">Option</h3>
<div class="pull-right">
<button type="button" class="add-item btn btn-success btn-xs"><i class="glyphicon glyphicon-plus"></i></button>
<button type="button" class="remove-item btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></button>
</div>
<div class="clearfix"></div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-1">
<?= $form->field($modelOption, "[{$i}]correct")->radio(['label'=>false]) ?>
</div>
<div class="col-md-6">
<?= $form->field($modelOption, "[{$i}]options")->textArea()->label(false) ?>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
Snapshot given below -
$( "#container" ).on( "click", ".list-cell__radio", function() {
$('input[type=radio]').each(function( index ) {
$( this ).prop("checked", false);
});
$(this ).find("input[type=radio]").prop("checked", true);
});
Related
I'm working with one web app using Materialize, everything work fine till add search field. There are no error but button do nothing. In the same row, there are two buttons, first one work.
usuario.php:
<div class="container">
<div class="col s6 left">
Buscar:
<div class="input-field inline">
<input id="fCriterio" type="text" class="validate">
<label for="fCriterio">
</label>
</div>
<button class="btn-floating btn-small blue" onclick="buscarCrit()">
<i class="material-icons">search</i>
</button>
</div>
<div class="col s2 right">
<button class="btn modal-trigger blue" data-target="idModal1">
Nuevo
</button>
</div>
</div>
And js (user-functions.js) included is just a test:
function buscarCrit(){
M.toast({html: "Buscando", classes:'green'});
}
I copy another button who is working and doesn't work, no error, no nothing.
Ok I found the error, it was very simple but I did not see it, the call to the function has to have parentheses at the end of its name.
`
<a class="btn-floating btn-small green" data-toggle="modal" onclick="buscarCrit()">
<i class="material-icons">search</i>
</a>
</td>`
Thank's #imvain2 and #Zugor for your time and help!!
Try using a click event than inline onclick. Declare a click event listener for that button and call buscarCrit in there.
Example:
function buscarCrit(){
alert('Hello World!')
M.toast({html: "Buscando", classes:'green'});
}
window.addEventListener('load', () => {
document.getElementById('btn-foo').addEventListener('click', buscarCrit);
});
<div class="container">
<div class="col s6 left">
Buscar:
<div class="input-field inline">
<input id="fCriterio" type="text" class="validate">
<label for="fCriterio">
</label>
</div>
<button id="btn-foo" class="btn-floating btn-small blue">
<i class="material-icons">search</i>
</button>
</div>
<div class="col s2 right">
<button class="btn modal-trigger blue" data-target="idModal1">
Nuevo
</button>
</div>
</div>
First and foremost, the code is a mess because I had gotten some outside help from a person who did not take his coding seriously, right now I need to meet a deadline and am focusing on functionality, so I apologize beforehand, I'll get to cleaning it up in time.
We are creating a simple shopping page that includes PHP, bootstrap. We store the product information the in a mysqli database. We have multiple modals for each item where you can choose the size, and then add them to the cart.
The problem is that while the bootstrap modals cannot be seen, they are still "clickable" as if they were active when they are not. This does not apply to the cart modal, at least as far as I can tell.
I tried to fix this by changing the z index of the class of modals, however, that did not work.
the html (and PHP):
<section class="products">
<?php
$db = new Database();
$db->connect();
$db->select('tbl_items','productid,Product_Name,Product_Price,Product_Quantity,Category,Product_Picture',NULL,'Category!="Beverage" and Product_Quantity > 0','productid ASC'); // Table name, Column Names, JOIN, WHERE conditions, ORDER BY conditions
$res = $db->getResult();
$rows = array();
foreach ($res as $row)
{?>
<div class="product-card">
<form method="post" class="product-form card-form">
<div class="product-image">
<?php echo '<img class="gallery-pic responsive" src="data:image/jpeg;base64,'.base64_encode( $row['Product_Picture'] ).'"/>';?>
</div>
<div class="product-info-container">
<div class="product-info">
<h3 id="prod-name" class="prod-info"><?php echo $row['Product_Name']; ?><h3>
</div>
<div class="product-info">
<span class="prod-info">
<h4>R<?php echo $row['Product_Price']; ?></h4>
</span>
</div>
</div>
<div class="product-info add-btn-container">
<div class="customn-btn btn-lg btn-block add-cart-btn" title="Add to FOGo"
data-toggle="modal" data-target="#product<?php echo $row['productid'];?>modal"
onclick="resetSize()">
Add to cart<i class="fa fa-cart-plus" aria-hidden="true"></i>
</div>
</div>
</form>
</div>
I assign the product ID to the id of the modal to so that it can be referenced in the add to cart button above
Continue in the loop:
<div class="modal fade product-modal" id="product<?php echo $row['productid'];?>modal"
role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header color-gradient">
<button type="button" title="Close Plate" class="close"
data-dismiss="modal">×</button>
<h4 id="item-title" class="modal-title"><?php echo $row['Product_Name'];?></h4>
</div>
<div class="display-pic-container">
<?php echo '<img class=" responsive" src="data:image/jpeg;base64,'.base64_encode( $row['Product_Picture'] ).'"/>';?>
</div>
<div class="modal-footer">
<div class="form-group">
<label class="size-lbl" for="size">Size</label>
<select class="form-control" name="size" onchange="changeSize(event)">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
</select>
</div>
<button type="button" title="Close Plate"
class="close-btn btn-lg btn-block cart-btn" id="close_cart"
data-dismiss="modal"><i class="fa fa-times" aria-hidden="true"></i>
Close</button>
<span onclick="addToCart(<?php echo $row['productid'];?>, event )"
title="Add to cart" class="btn-lg btn-block cart-btn check-out-btn"><i
class="fa fa-credit-card" aria-hidden="true"></i>
Add to cart</span>
</div>
</div>
</div>
</div>
<?php
}
?>
</section>
I am currently working on create-post view of dashboard of my blogging site. I have used Aero template.
#extends('Dashboard.Layout.master')
#section('content')
<section class="content blog-page">
<div class="body_scroll">
<div class="block-header">
<div class="row">
<div class="col-lg-7 col-md-6 col-sm-12">
<ul class="breadcrumb">
<li class="breadcrumb-item"><i class="zmdi zmdi-home"></i>Computer Bitches</li>
<li class="breadcrumb-item">Blog</li>
<li class="breadcrumb-item active"> New Post</li>
</ul>
<button class="btn btn-primary btn-icon mobile_menu" type="button"><i class="zmdi zmdi-sort-amount-desc"></i></button>
</div>
<div class="col-lg-5 col-md-6 col-sm-12">
<button class="btn btn-primary btn-icon float-right right_icon_toggle_btn" type="button"><i class="zmdi zmdi-arrow-right"></i></button>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<form method="post" action="{{route('dashboard.store.post')}}">
#method('post')
#csrf
<div class="card">
<div class="body">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Blog title" />
</div>
<div class="form-group">
<select class="mdb-select md-form form-control" multiple searchable="Search here..">
<option>LARAVEL</option>
<option>GIT</option>
<option>AWS</option>
<option>REACT</option>
<option>PHP</option>
<option>JAVASCRIPT</option>
<option>CSS3</option>
<option>HTML5</option>
<option>WEB TECHNOLOGIES</option>
<option>JQUERY</option>
</select>
</div>
<div class="form-group">
<textarea id="editor" name="editor " class="form-control" rows="10" placeholder="Enter your Content">
</textarea>
</div>
</div>
</div>
<input type="submit" class="btn btn-success" value="Save"/>
</form>
</div>
</div>
</div>
</div>
</section>
#endsection
#section('scripts')
ClassicEditor
.create( document.querySelector( '#editor' ) )
.then(editor => {
document.getElementById('editor').innerHTML = editor.getData();
})
.catch( error => {
console.error( error );
} );
#endsection
I have tried all the possible ways, from posting back throuh jquery to removing elements and putting them back but no lock yet. It's been 10 hours still trying but I don't think I will find the solution. Thank you guys in advance for any leads.
I'm using Laravel 4 on this. I have a form with a list of departments in which there are members per department. I used an accordion to place all members under one checkbox of department. Now when I check the checkbox and submit it I want it to be posted on my ajax.
Here's what I can do but found an error.
Syntax error, unrecognized expression: input[name=dept_id:checked
HTML
<div class="col-md-6 col-sm-6">
<div class="blue-steel box portlet">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-calendar"></i>Bulk select Department off day
</div>
</div><!-- /.portlet-title -->
<div class="portlet-body form">
<div class="form-body">
{{Form::open(['url'=>url('admin/schedule'), 'id' => 'department_bulk_off_day', 'class'=>'form-horizontal', 'method'=>'GET'])}}
<div class="form-group">
<label class="col-md-3 control-label" style="padding-left: 0px;">Select Department</label>
<div class="col-md-9">
<!-- <div id="accordion">
<h3><span id="id"><input type="checkbox"/></span>Text More text </h3>
<div>content etc</div>
</div> -->
<div class="employee_checkbox_wrapper" id="accordion">
<?php $department = DB::table('department')->get(); ?>
#foreach($department as $key => $val)
<label><span id="id"><input type="checkbox" name="dept_id[]" value="{{ $val->id }}"/></span>{{ $val->deptName }} </label>
<div>
<?php
$dept_id = $val->id;
$schedule = '';
$desig_ids = DB::table('designation')->where('deptID', $dept_id)->get();
foreach ($desig_ids as $desig_id) {
$emp_des = $desig_id->id;
$employee_desigs = DB::table('employees')->where('designation', $emp_des)->get();
foreach ($employee_desigs as $employee_desig) {
?>
<label style="margin-left: 15px;"><!-- <input type="checkbox" name="employee_id[]" value="{{ $employee_desig->id }}"/> -->
{{ $employee_desig->fullName }}
</label>
<a data-toggle="modal" data-id="{{ $employee_desig->id }}" data-target="#myModal" title="Add this item" class="open-AddBookDialog btn " href="#addBookDialog">
Change Department
</a>
</br>
<?php
}
}
?>
</div>
#endforeach
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" style="margin-top: 20px;">Select Date</label>
<div class="col-md-3">
<div class="input-group input-medium date date-picker" data-date-format="dd-mm-yyyy" data-date-viewmode="years" style="margin-top: 20px;">
<input type="text" class="form-control" name="off_day" value="{{ date('d-m-Y') }}">
<span class="input-group-btn">
<button class="btn default" type="button"><i class="fa fa-calendar"></i></button>
</span>
</div>
</div>
</div>
<div class="row form-group">
<div class="col-md-12 text-center">
{{Form::token()}}
<input type="hidden" name="department_bulk_off_day" value="2">
<button class="btn btn-button button-tip-form-submit">Update</button>
</div><!-- /.col-md-12 text-center -->
</div>
</form><!-- /.form-horizontal -->
</div><!-- /.form-body -->
{{ Form::close() }}
</div><!-- /.portlet-body form -->
</div><!-- /.blue-steel box portlet -->
</div><!-- /.col-md-6 col-sm-6 -->
And here's my JS
<script>
$('#department_bulk_off_day').on('submit', function(e){
e.preventDefault();
var checkValues = jQuery('input[name=dept_id:checked').map(function()
{
return $(this).val();
}).get();
alert(checkValues);
</script>
you can try the following code
var checkValues = jQuery('input[name="dept_id"]').map(function()
{
var this_var = $(this);
if($(this):checked){
return this_var.val();
}
}).get();
Try This. You have the selectors all messed up.
$('#department_bulk_off_day').on('submit', function(e){
e.preventDefault();
var checkValues = $('input[name="dept_id"]:checked').map(function()
{
return $(this).val();
}).get();
alert(checkValues);
I'm working with divs, jquery & PHP. Here is what I have up to now:
http://rabelatos.com/admin/prueba.php
If you click on some of the 2 gray buttons a new div will be added. But I would like to add a new icon to delete divs.
How can I implement this functionality?
This is the code that I have at this moment:
HTML & PHP:
<div class="page-content">
<div class="container-fluid">
<div class="row">
<div align="col-sm-12" style="padding-bottom: 15px;">
<center>
<button type="button" class="btn btn-secondary" data-dismiss="modal" id="addProduct">
<i class="fa fa-plus-circle" aria-hidden="true"></i> <i class="fa fa-cutlery" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal" id="addDrink">
<i class="fa fa-plus-circle" aria-hidden="true"></i> <i class="fa fa-coffee" aria-hidden="true"></i>
</button>
</center>
</div>
</div>
<div id="FoodContainer">
<div class="form-group row" id="Food" style="display:block">
<label class="col-sm-2 form-control-label">
Food
</label>
<div class="col-sm-10">
<select name="food[]" id="food[]" class="form-control">
<option selected>Select</option>
<?
$s1=mysql_query("select * from productos where idCategoria='2'");
while($f1=mysql_fetch_array($s1)){
$idProduct=$f1["id"];
$title=$f1["titulo"];
echo "<p class=\"form-control-static\"><option value=\"$idProduct\">$title</option></p>";
}
?>
</select>
</div>
</div>
</div>
<div id="DrinkContainer">
<div class="form-group row" id="Drink" style="display:block">
<label class="col-sm-2 form-control-label">Drink</label>
<div class="col-sm-10">
<select name="drink[]" id="drink[]" class="form-control">
<option selected>Select</option>
<?
$s2=mysql_query("select * from productos where idCategoria='1'");
while($f2=mysql_fetch_array($s2)){
$idProduct1=$f2["id"];
$title1=$f2["titulo"];
echo "<option value=\"$idProduct1\">$title1</option>";
}
?>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
jQuery:
<script type="text/javascript">
jQuery(function($){
var $food = $('#Food'), count = 1;
$('#addProduct').click(function(e){
e.preventDefault();
var idname = 'food' + (++count);
$food.parent().append($food.clone().attr({id: idname, name: idname}));
});
var $drink = $('#Drink'), count = 1;
$('#addDrink').click(function(e){
e.preventDefault();
var idname = 'drink' + (++count);
$drink.parent().append($drink.clone().attr({id: idname, name: idname}));
});
});
</script>
Thanks !
Why don't you just add a delete (an X image) button next to each of the select boxes. As they are distinguished with their IDs (idname) , it can be easily deleted using jQuery. Hope that works for you.