Hello Friends I am having issue with sizes option on my page
this is the form of sizes
<!-- Sizes And Quantity [Onclick Modal]-->
<div class="form-group col-md-3">
<label>Sizes & Quntity<span class="required">*</span>:</label>
<button class="btn btn-default form-control btn-info" onclick="jQuery('#sizesModal').modal('toggle'); return false;">Sizes & Quantity</button>
</div>
<!-- Sizes & Quantity Preview -->
<div class="form-group col-md-3">
<label for="sizes">Size & Quantity Preview:</label>
<input type="text" name="sizes" id="sizes" class="form-control" value="<?= ((isset($_POST['sizes']))?sanitize($_POST['sizes']):''); ?>" disabled/>
</div>
and this is modal it is using when click on button
<!-- Modal for sizes & quantity -->
<div class="modal fade" id="sizesModal" tabindex="-1" role="dialog" aria-labelledby="sizesModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="sizesModalLabel">Size & Quantity</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<?php for($i=1; $i <= 12; $i++): ?>
<!-- Size Edit -->
<div class="form-group col-md-4">
<label for="size<?= $i; ?>">Size</label>
<input type="text" class="form-control" id="size<?= $i; ?>" name="size<?= $i; ?>" value="<?= ((!empty($sArray[$i-1]))?$sArray[$i-1]:''); ?>" />
</div>
<!-- Quantity Edit -->
<div class="form-group col-md-2">
<label for="qty<?= $i; ?>">Quantity</label>
<input type="number" class="form-control" id="qty<?= $i; ?>" name="qty<?= $i; ?>" value="<?= ((!empty($qArray[$i-1]))?$qArray[$i-1]:''); ?>" min="0"/>
</div>
<?php endfor; ?>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="updateSizes();jQuery('#sizesModal').modal('toggle');return false;">Save changes</button>
</div>
</div>
</div>
</div>
And this is function to update sizes
function updateSizes(){
var sizeString ='';
for (var i= 1; i<=12; i++){
if(jQuery('#size'+i).val() != ''){
sizeString += jQuery('#size'+i).val()+':'+jQuery('#qty'+i).val()+',' ;
}
}
jQuery('#sizes').val(sizeString);
}
My issues are
1. When the form is submited and if it gives error the sizes field shouldn't be black it should have already entered values like every feild holds them it should do the same it shouldn't erase them so that user don't need to re-enter them
2.Whenever i use 'sizes' in php it gives me error as sizes is undefined.
This is PHP where i am using it its on the same page
if ($_POST) {
if (!empty($_POST['sizes'])) {
$sizeString = sanitize($_POST['sizes']);
$sizeString = rtrim($sizeString,',');
echo $sizeString;
$sizesArray = explode(',', $sizeString);
$sArray = array();
$qArray = array();
foreach ($sizesArray as $ss) {
$s = explode(':', $ss);
$sArray[] = $s[0];
$qArray[] = $s[1];
}
}
else {
$sizesArray = array();
}
$required = array('//Some Arrays' 'sizes');
foreach ($required as $field) {
if ($_POST[$field] == '') {
$errors[] = 'All Fields with <span class="required">*</span> are required.';
break;
}
}
i have rechecked the entire code 5 times now but i didn't find anything at all.
Please help me.
Related
Newbie here, My target is, how can I pass the value of my amount column to my textbox? I did the same logic as i pass the ID using script (below), but it's not working. I'm trying different approach but none of them is working. Hoping someone can help. Thank you in advance.
Views:
<?php
foreach($result as $rows) { ?>
<?php if($rows->status==='pending'){ ?>
<tr>
<td><?php echo $rows->userID; ?></td>
<td><?php echo $rows->transID; ?></td>
<td><?php echo $rows->amount; ?></td>
<td><?php echo $rows->currentBalance; ?></td>
<td><?php echo $rows->status; ?></td>
<td>
<button data-id="<?php echo $rows->transID?>" ustatus="approved" class="showmodal fundTable btn btn-success btn-sm text-bold user_status">
<?php echo $rows->transID?> accept
</button>
<div id="fundModal" class="modal" tabindex="-1" role="dialog">
<form method="post" action="<?php echo site_url('ewallet/statuschanged')?>">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="">transID</label>
<input type="text" id="transID" name="transID" value="">
</div>
<div class="form-group">
<label for="">Amount</label>
<input type="text" id="amount" name="amount" value="<?php echo $rows->amount; ?>">
</div>
<div class="form-group">
<label for="">Status</label>
<input type="text" name="status" id="user_status" value="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</form>
</div>
</div>
</div>
</div>
Controllers:
public function statuschanged($transID = 0)
{
$this->ewallets->statuss($transID);
}
Model:
function statuss($transID) {
$transID = $this->input->post('transID');
$status = $this->input->post('status');
$data = array('status' => $status );
$this->db->where('transID',$transID);
$this->db->update('cash_out', $data); //Update status here
return redirect('ewallet/cashout');
}
Script:
<script>
$('.showmodal').on('click', function(e){
e.preventDefault();
$('#transID').val(this.dataset.id); // passing of ID to my textbox
$('#fundModal').modal('show')
})
$('#fundModal').on('hidden.bs.modal', function () {
$('#transID').val('')
$('#ustatus').val('')
})
</script>
Step 1 -
<button data-amount="<?php echo $rows->amount?>" data-id="<?php echo $rows->transID?>" ustatus="approved" class="showmodal fundTable btn btn-success btn-sm text-bold user_status">
<?php echo $rows->transID?> accept
</button>
Step 2 -
$('.showmodal').on('click', function(e){
e.preventDefault();
$('#amount').val($(this).data("amount")); // passing amount to textbox
$('#transID').val(this.dataset.id); // passing of ID to my textbox
$('#fundModal').modal('show')
});
Step 3 -
When model close - $('#amount').val('');
I have some kind of trouble, actually my code should be working just fine, but there is some bug here...
eventhough I already set the value of my dropdown select, it's appearance still not changed, in my case here, the value of second dropdown-select showing the first option eventhough I set it to be the second option.. why is this happening? My first dropdown select show the value just fine though...
I use bootstrap-select 1.13.15 in my codeigniter and my browser is google chrome
here is my view
<!-- modal edit -->
<div class="modal fade" id="MoEditCP" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<center><h3 class="modal-title" id="exampleModalLabel">Edit Catatan</h3></center>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="<?php echo site_url('server/updatePI');?>" method="post" enctype="multipart/form-data">
<div class="form-group">
<label class="col-form-label">Nama Pelanggar :</label><br>
<select id="anggota1" class="selectpicker" data-show-subtext="true" data-live-search="true">
<?php foreach ($daftaranggota as $dafang) { ?>
<option value="<?php echo $dafang['nim'] ?>"><?php echo $dafang['namaLengkap'] ?> - <?php echo $dafang['nim'] ?></option>
<?php } ?>
</select>
</div>
<div class="form-group">
<label class="col-form-label">Tanggal Pelanggaran :</label><br>
<input type="date" name="tgl1" class="form-control" id="tgl1">
</div>
<div class="form-group">
<label class="col-form-label">Sanksi Kedisiplinan :</label><br>
<select id="sd1" class="selectpicker">
<option value="Ringan">Ringan</option>
<option value="Sedang">Sedang</option>
<option value="Berat">Berat</option>
</select>
</div>
<div class="form-group">
<label class="col-form-label">Catatan Pelanggaran :</label>
<input type="text" name="cp1" class="form-control" id="cp1">
</div>
<div class="modal-footer">
<input type="hidden" name="nimPenulis1" value="<?php echo $this->session->userdata('nim') ?>" class="form-control" id="nimPenulis1">
<button type="submit" class="btn btn-success" id="btn_update">Buat</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- /.modal edit -->
here is my script:
<script>
...
$('#tabelCP tbody').on('click', 'button.edit_cp', function() {
let tr = $(this).closest('tr');
let row = tabel_cp.row(tr);
let data = row.data();
$('#MoEditCP').modal('show');
$('#anggota1').val(data.nimPelanggar);
$('#tgl1').val(data.tgltrue);
$('#sd1').val(data.tingkat);
$('#nimPenulis1').val("<?php echo $this->session->userdata('nim') ?>");
});
...
</script>
i am new to web development and i am trying to make a modal with data retrieved from data base depending on a selected value
i used java script to get the selected value and to make the request
<script>
function getselectedc () {
var sel = document.getElementById('coursesids');
var sv = sel.options[sel.selectedIndex].value;
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.open("GET", "managerview.php?q="+sv, true);
xhttp.send();
}
</script>
when button is clicked modal should appear this is my html code for the buttton and modal
<button type="submit" onclick="getselectedc()" data-toggle="modal" data-target="#updateModal" class="btn btn-info btn-lg card" id="update" style="width:50%;" <?php echo $buttonenable;?> > <span class="glyphicon glyphicon-pencil"></span> Update</button>
<br> <br>
<!-- Modal -->
<div class="modal fade" id="updateModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" style="background-image:url(images/mb2.jpg);">
<div class="modal-header" style="padding:35px 50px; ">
<button type="button" class="close" data-dismiss="modal" >×</button>
<h1 style="color:#0e5c6d;"><span class="glyphicon glyphicon-pencil bold"></span> <strong >Update Course</strong></h1>
</div>
<div class="modal-body" style="padding:40px 50px; ">
<form role="form">
<div class="form-group" style="text-align:left;">
<label for="courseid">Course ID</label>
<input type="text" class="form-control" id="corseid" disabled placeholder=<?php echo $uid;?> >
</div>
<div class="form-group" style="text-align:left;">
<label for="noclasses">Number Of Classes</label>
<input type="number" class="form-control" id="noclasses" placeholder=<?php echo $nclasses;?> >
</div>
<button type="submit" class="btn btn-info btn-block"><span class="glyphicon glyphicon-ok"></span> Update</button>
</form>
</div>
</div>
</div>
</div>
my php code
<?php
$buttonenable="";
$nhrs=0;$nclasses=0;$price=0;$tcid=0;$sname="";$uid="";
$conn = mysqli_connect('localhost','root','','project');
if (mysqli_connect_error()) { die("Connection to database failed: " . mysqli_connect_error());}
$scid=$_GET["q"];
function populatecdata()
{
if($GLOBALS['scid']!="")
{ $sql="SELECT * FROM COURSES WHERE ID=".$GLOBALS['scid'];
echo $sql;
$result=mysqli_query($GLOBALS['conn'], $sql);
if (!$result) { die(mysqli_error($GLOBALS['conn'])); }
else {
$row = mysqli_fetch_assoc($result);
$GLOBALS['uid']='"'.$GLOBALS['scid'].'"';
$GLOBALS['nclasses']='"'.$row["NoOfClasses"].'"';
$GLOBALS['nhrs']='"'.$row["NoOfHours"].'"';
$GLOBALS['price']='"'.$row["Price"].'"';
$GLOBALS['tcid']='"'.$row["TrainerID"].'"';
$GLOBALS['sname']='"'.$row["Sportname"].'"';
}
}
}
populatecdata();
function options()
{
$x=0;
$sql ="SELECT ID FROM COURSES ";
$GLOBALS['result'] = mysqli_query($GLOBALS['conn'], $sql);
$r1="block";
if (!$GLOBALS['result']) { die(mysqli_error($GLOBALS['conn'])); }
$a=array();
$i=0;
if(mysqli_num_rows($GLOBALS['result']) > 0)
{
while($row = mysqli_fetch_assoc($GLOBALS['result']))
{
echo '<option value="'.$row["ID"].'">'.$row["ID"].'</option> '."\r\n";
}
$GLOBALS['buttonenable']="";
}
else {echo '<option value="0">no courses to show</option>';
$GLOBALS['buttonenable']="disabled";}
}
?>
i wrote all of this in one file named managerview.php
the problem is when the modal appear data in it isn't correct (not the correct values from database)
any help would be appreciatedthanks in advance
sorry for the long post but i was only trying to make everything clear
hi how to keep bootstrap modal active after clicking submit button. In my case after clicking submit button it refresh the page so it close the modal. In my modal form i have a textboxes that when you click submit it will save the data in database. Now i have a php code that check the textboxes if their empty it will show/say the error and if not empty it will says success.
Thanks in advance who will help.
This is my code
<div class="modal fade" id="addtopic" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Add Topic</h4>
</div>
<form method="POST" action="index.php" role="form" id="saveform">
<div class="modal-body">
<div class="form-group">
<label for="cCategory">Category</label>
<input type="text" class="form-control" id="cCategory" name="category" value="<?php if (!empty($categ)) { echo $categ; } ?>">
</div>
<div class="form-group">
<label for="cTitle">Title</label>
<input type="text" class="form-control" id="cTitle" name="topicTitle" value="<?php if (!empty($topicTitle)) { echo $topicTitle; } ?>">
</div>
<div class="form-group">
<label for="cDesc">Description</label>
<textarea class="form-control custom-control" rows="3" style="resize:none" name="desc" value="<?php if (!empty($desc)) { echo $desc; } ?>"> </textarea>
</div>
<div class="form-group">
<label for="cDesc">Created By</label>
<input type="text" class="form-control" id="cDesc" name="createdby" value="<?php if (!empty($created)) { echo $created; } ?>">
</div>
</div>
<div class="modal-footer">
if($insert = $db->query("
INSERT INTO pncontent (category, title, description, createdby, dateadded)
VALUES ('$categ', '$topicTitle', '$desc', '$created', NOW() )
")) {
echo "<p class='pull-left'> Topic Save! </p>";
}else {
echo "<p class='pull-left'>Failed to Save</p>";
die($db->error);
}
}else {
echo "<p class='pull-left'>All Fields are required</p>";
$desc = $_POST['desc'];
$categ = $_POST['category'];
$topicTitle = $_POST['topicTitle'];
$created = $_POST['createdby'];
}
}
?>
<button type="submit" name="Sbt" class="btn btn-primary" >Save changes</button>
<button data-dismiss="modal" class="btn btn-danger">Close</button>
</div>
</form>
</div>
</div>
</div>
Where you return
echo "<p class='pull-left'>All Fields are required</p>";
Add this bit of code to open the modal on page load.
<script type="text/javascript">
$(window).load(function(){
$('#addtopic').modal('show');
});
</script>
I am building a website using SCM Music Player (an open source web player), and I would like to use the "finish" callback to modify my DOM when the music stops. I can access this callback and execute a "console.log()", but I can't access DOM... I've noticed that this script uses Knockout library, but I don't know how it works and if it is necessary... Here is my code from scm.js:
finish = function(){
//repeat one start again, otherwise next song
if(repeatMode()==2) start();
else {
console.log('Next son de scm.js :');
var div = ko.observable($('#ajouterSon').attr('role'));
console.log('Div: ' + div);
next();
}
};
And the kind of changes I do when I play a song :
$('.musiqueLink').on('click', function(event) {
console.log('clic musique - last id = ' + lastidmusique);
event.preventDefault();
if(lastidmusique != null)
document.getElementById('row'+lastidmusique).setAttribute("class", "row");
document.getElementById('row'+$(this).attr('data-idmusique')).setAttribute("class", "row highlighted");
SCM.play({title:$(this).attr('data-titre'),url:$(this).attr('data-lien')});
lastidmusique = $(this).attr('data-idmusique');
});
The dom which contains 'ajouterSon' :
<body style=" background-image: url('imgs/backgrnd.jpg'); background-size: 100% 100%; background-repeat:no-repeat; background-attachment:fixed;">
<div id="ajouterSon" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h1 class="text-center">Ajouter un son</h1>
<?php
?>
</div>
<div class="modal-body">
<form class="form col-md-12 center-block" id="ajoutSon">
<div class="form-group">
<input type="text" title="Titre du son" class="form-control input-lg" placeholder="Titre" id="titre">
</div>
<div class="form-group">
<input type="text" title="Auteur du son" class="form-control input-lg" placeholder="Artiste" id="artiste">
</div>
<div class="form-group">
<label for="genre">Style</label>
<div class="form-group">
<select class="selectpicker" multiple id="genre">
<?php
$genres = $mysqli->query("SELECT idgenre, nom FROM GENRE");
while($row = $genres->fetch_array())
$rows[] = $row;
mysqli_free_result($genres);
foreach($rows as $row)
{
$styles = $mysqli->query("SELECT idstyle, nom FROM STYLE WHERE GENRE = ".intval($row['idgenre']));
while($rowStyles = $styles->fetch_array())
$rowsStyles[] = $rowStyles;
echo "<optgroup label=\"".$row['nom']."\">";
foreach ($rowsStyles as $rowStyles)
echo "<option value=\"".$rowStyles['idstyle']."\">".$rowStyles['nom']."</option>";
echo "</optgroup>";
mysqli_free_result($styles);
unset($rowsStyles);
}
unset($rows);
?>
</select>
</div>
</div>
<div class="form-group">
<input type="text" title="Décris ton son" class="form-control input-lg" placeholder="Description" id="description">
</div>
<div class="form-group">
<input type="url" title="Lien Youtube/Soundcloud" class="form-control input-lg" placeholder="Lien Youtube/Soundcloud" id="lien">
</div>
<div class="form-group">
<button class="btn btn-primary btn-lg btn-block" type="submit" id="submit">Ajouter</button>
</div>
</form>
</div>
<div class="modal-footer">
<div class="col-md-12">
<button type="button" class="btn" data-dismiss="modal" aria-hidden="true">Annuler</button>
</div>
</div>
</div>
</div>
</div>
...
</body>
I precise that I have placed my include balise for the JS just above the end of the body.
Thank you for your help,
Théo