This script below allow to validate all checkox inside a form.
My problem, I need to have just one to validate.
What is the element to change to verify if just one chabox is validated ?
<?php
$display_option .= '<div class="form-group ProductsInfoOptionCheckbox" options>';
$display_option .= '<label class="control-label ProductsInfoOptionCheckbox" for="input-option' . $option['products_option_id'] . '">' . $option['name'] . '</label>';
foreach ($option['products_option_value'] as $t => $option_value) {
$display_option .= '<div class="checkbox">';
$display_option .= '<ul class="list-unstyled ProductsInfoOptionCheckbox">';
$display_option .= '<li class="ProductsInfoOptionCheckbox">';
$display_option .= HTML::checkboxField('id[' . $option['products_option_id'] . ']', $option_value['products_option_value_id'], $checked_attribute, 'required');
}
$display_option .= '<div>';
echo $display_option;
?>
<script>
$(function(){
var requiredCheckboxes = $('.options :checkbox[required]');
requiredCheckboxes.change(function(){
if(requiredCheckboxes.is(':checked')) {
requiredCheckboxes.removeAttr('required');
} else {
requiredCheckboxes.attr('required', 'required');
}
});
});
</script>
I solved this by using:
$display_option .= '<div class="form-group ProductsInfoOptionCheckbox options">';
Related
i have a problem when i want to select dropdown after that the value in option not change and back to normal again. i want to know how to make when i choose an option in dropdown select the value keep on i choose not back to normal ? sorry for my bad english.. look at example below
$out .= '<form method="POST" >';
$out .= ' <table class="table table-bordered table-condensed"><tbody>';
$out .- ' <tr>';
$out .= ' <td class="info" width="5%"><b>Race</b></td>';
$out .= ' <td>';
$out .= ' <select class="form-control" name="race_select" onchange="this.form.submit();">';
$out .= ' <option value selected>All Races</option>';
$out .= ' <option>Accretia</option>';
$out .= ' <option>Bellato</option>';
$out .= ' <option>Cora</option>';
$out .= ' </select>';
$out .= ' </td>';
$out .= ' </tr>';
$out .= ' </tbody></table>';
$out .= '</form>';
$out .= '<br>';
look i have select option when i choose for e.g Accretia. when it render again the value in option still All races, i want to when people choose some option, the value in option keep that people choose not back to All races again.
look at this image
when i choose bellato the option not change to bellato but still All Races
I will insert new boostrap card inside my page. My problem, I have not success to include a new card inside my content.
When i click on insert, the card is not displayed
Below the code
display a new boostrap card if record exist
<div class="row">
<button type="button" class="btn btn-primary" aria-label="Insert" id="insert">
<span aria-hidden="true">Insert</span>
</button>
</div>
<div class="row">
<ul class="row list-unstyled" id="list">
<?php
$i = 0;
while ($QoptionValue->fetch()) {
.....
?>
<li class="col-md-4" id="element'<?php echo $i; ?>">
<div class="card">
<h4 class="card-header">Card title <a class="close" href="#">×</a></h4>
<div class="card-body">
<div class="card-text">
<div><?php ..... ?></div>
</div>
</div>
</li>
<?php
$i++;
}
?>
</ul>
</div>
Display a new card or first card inside the content
<?php
$card = '<li class="col-md-4" id="element0">';
$card .= '<div class="card">';
$card .= '<h4 class="card-header">Card title <a class="close" href="#">Remove</a></h4>';
$card .= '<div class="card-body">';
$card .= '<div class="card-text">';
$card .= '<div>';
for ($l=0, $n=count($languages); $l<$n; $l++) {
$card .= Language->getImage($languages[$l]['code']) . ' ' . HTML::inputField('option_value[' . $i . '][option_value_description][name][' . $l . ']', $options_name) . '<br />';
$card .= HTML::hiddenField('option_value[' . $i . '][option_value_description][language_id][' . $l . ']', $options_name);
}
$card .= '</div>';
$card .= '<div>';
$card .= HTML::inputField('option_value[' . $i . '][sort_order]', $QoptionValue->value('sort_order'), 'id="sort_order[' . $i . ']"');
$card .= '</div>';
$card .= '<div>';
$card .= '</div>';
$card .= '</div>';
$card .= '</li>';
?>
<script>
$('#insert').click(function(){
$( "ul#list" ).append( "<?php echo $card; ?>" );
});
</script>
<script type="text/javascript">
$('.close').click(function(){
var $target = $(this).parents('li');
$target.hide('slow', function(){ $target.remove(); });
})
</script>
console error
it seems on this line has a problem :
$( "ul#list" ).append(""<li class=\"col-md-4\" id=\"element0\"><div class=\"row\"><div class=\"col-md-12\"><div class=\"card\"><h4 class=\"card-header\"><a class=\"close\" href=\"#\">Supprimer<\/a><\/h4><div class=\"card-body\">Nom de la valeur<div><img src=\"http:\/\/localhost\/test_option\/shop\/sources\/third_party\/flag-icon-css\/flags\/4x3\/gb.svg\" alt=\"Anglais\" title=\"Anglais\" width=\"16\" height=\"12\" \/> <input type=\"text\" name=\"option_value[0][option_value_description][name][0]\" class=\"form-control\" \/><br \/><input type=\"hidden\" name=\"option_value[0][option_value_description][language_id][0]\" \/><img src=\"http:\/\/localhost\/test_option\/shop\/sources\/third_party\/flag-icon-css\/flags\/4x3\/fr.svg\" alt=\"Francais\" title=\"Francais\" width=\"16\" height=\"12\" \/> <input type=\"text\" name=\"option_value[0][option_value_description][name][1]\" class=\"form-control\" \/><br \/><input type=\"hidden\" name=\"option_value[0][option_value_description][language_id][1]\" \/><\/div><div class=\"row\"><span class=\"col-md-4\">Ordre de tri<\/span><\/div><\/div><\/div><\/div><\/div><\/li>"");
Uncaught SyntaxError: missing ) after argument list
It's good practice to pass any PHP variable to javascript using json_encode(). Using json_encode() you'll always get a properly formatted JavaScript object with the quotes escaped.
<script>
$('#insert').click(function(){
$( "ul#list" ).append(<?php echo json_encode($card); ?>);
});
</script>
Question:
I have a div element with id of "tableholder" which is purely to hold the output on a javascript function that pulls data via ajax from a PHP file.
Within the tableholder element, is a list.js table that works if we simply include he php file instead of calling it via ajax and setting it via innerHTML = "".
How do I use the contents of innerHTML of the tableholder div when it has been created dynamically?
Code so far:
PHP File called:
<?php
// Connection details for the database being called.
include 'connection.php';
// Putting the query to the database in a variable called "$assets".
$assets = "SELECT * FROM assetregister.getassets";
$assetPull = $conn->query($assets);
$output = "";
// Pulling all of the details from the database and displaying them on the page within the inidividual divs.
if ($assetPull->num_rows > 0) {
$output .= "<div id='users'>";
$output .= "<input class='search form-control mt-2' placeholder='Search...' />";
$output .= "<div class='m-2'>";
$output .= "<button class='sort btn' data-sort='model'>Sort By Model</button>";
$output .= "<button class='sort btn ml-2' data-sort='domain'>Sort By Domain</button>";
$output .= "<button class='sort btn ml-2' data-sort='location'>Sort By Location</button>";
$output .= "</div>";
$output .= "<table class='table table.hover list'>";
$output .= "<thead>";
$output .= "<th style='text-align: center;'>Model</th>";
$output .= "<th style='text-align: center;'>Serial Number</th>";
$output .= "<th style='text-align: center;'>Asset Number</th>";
$output .= "<th style='text-align: center;'>Domain</th>";
$output .= "<th style='text-align: center;'>Location</th>";
$output .= "<th style='text-align: center;'>Type</th>";
$output .= "</thead>";
while ($row = $assetPull->fetch_assoc()) {
$output .= "<tbody class='list' style='text-align: center;'>";
$output .= "<td class='model'>" . $row['modelName'] . "</td>";
$output .= "<td class='serialNumber'>" . $row['serialNumber'] . "</td>";
$output .= "<td class='assetNumber'>" . $row['assetNumber'] . "</td>";
$output .= "<td class='domain'>" . $row['domain'] . "</td>";
$output .= "<td class='location'>" . $row['locationName'] . "</td>";
$output .= "<td class='type'>" . $row['type'] . "</td>";
}
$output .= "</tbody>";
$output .= "</table>";
$output .= "</div>";
// If there is no rows in the table that is being called then they will display 0 Results... See below.
} else {
$output .= "0 results";
}
echo $output;
$conn->close();
?>
This works:
<div class="container-fluid">
<div class="container">
<div class="row">
<main class="col-12" style="margin-top: 80px;">
<button class="btn btn-primary" onclick="assetSubmit()" style="width: 100%;">Add An Asset</button>
<?php include 'scripts/getAsset.php'; ?>
</main>
</div>
</div>
</div>
<script>
populatetable('tableholder');
window.onload = function () {
var options = {
valueNames: ['model', 'serialNumber', 'assetNumber', 'domain', 'location', 'type']
};
var userList = new List('users', options);
};
</script>
This outputs the table and all of the list.js functions work fine as expected.
This Doesn't Work:
<div class="container-fluid">
<div class="container">
<div class="row">
<main class="col-12" style="margin-top: 80px;">
<button class="btn btn-primary" onclick="assetSubmit()" style="width: 100%;">Add An Asset</button>
<!-- Pulling in the results of the assets (most recent assets) -->
<div id="tableholder"></div>
<!-- end -->
</main>
</div>
</div>
</div>
<!-- PHP include for the footer -->
<?php include 'assets/layout/footer.php'; ?>
<!-- end -->
<script>
populatetable('tableholder');
window.onload = function (){
var options = {
valueNames: [ 'model', 'serialNumber', 'assetNumber', 'domain', 'location', 'type']
};
var userList = new List('users', options);
};
function populatetable(name){
$.ajax({
url: "scripts/getAssets.php",
success: function(data){
document.getElementById(name).innerHTML = data;
}
})
}
</script>
What I can assume:
From the various console.log lines and php echos I have put in to test the code, it would appear that the issue it that the javascript command for initiating the list.js table isn't able to find the "user" table that is created by the document.getElementById(name).innerHTML = data; in the populatetable() function. I know this because the folllowing shows blank:
console.log(document.getElementById(tableholder).innerHTML);
What am I doing wrong, or is it not possible to pull the innerHTML data of a dynamically created element?
The problem is that by the time you're calling List(), the ajax call hasn't finished yet, since it's asynchronous.
Try this instead:
var options = {
valueNames: ['model', 'serialNumber', 'assetNumber', 'domain', 'location', 'type']
};
var userList;
$(document).ready(function() {
populatetable('#tableholder');
});
function populatetable(id) {
$.ajax({
url: "scripts/getAssets.php",
success: function(data) {
$(id).html(data);
userList = new List('users', options);
}
});
}
Here I'm using jQuery everywhere it's useful, and I'm calling List() only after the data is actually inserted.
Also note, that like I mentioned in my comment, you need to move the <tbody> line outside the loop.
I have created a javascript function on drop down select it adds element and calculate the total amount of the added product now what I want do here is to make a function to delete that product added from the dropdown list but when I click on delete button it us only deleting the selected button and not deleting the row which I want it to be deleted by clicking on the button. You can review on this fiddle and will understood what is going on with it https://jsfiddle.net/h1k6mohs/ and also my script is not working may be is because it is not calling to that function below is my php script file
Controller
Home.php
public function addpart() {
$part = $this->input->post('parts');
$part_modify = explode(")", $part);
$part_id = $part_modify[0];
$old_price = $this->input->post('old_price');
$old_minutes = $this->input->post('old_minutes');
$data = $this->get_data->data_cart($part_id, $old_price, $old_minutes);
echo $data;
}
public function removepart() {
$part_id = $this->input->post('partid');
$old_price = $this->input->post('old_price');
$old_minutes = $this->input->post('old_minutes');
$data = $this->get_data->delete_part($part_id, $old_price, $old_minutes);
echo $data;
}
Model
Get_data.php
public function data_cart($part_id, $old_price, $old_minutes) {
$get_data = $this->db->get_where('rapair_parts', array('id' => $part_id));
$total_minutes = $get_data->row()->repair_time + $old_minutes;
$total_price = $get_data->row()->part_price + $old_price;
$html = '<div class="col-xs-12">';
$html .= '<div class="col-xs-6">Repair time</div>';
$html .= '<div class="col-xs-6">'.$total_minutes.' mins</div></div>';
$html .= '<input type="hidden" id="minutes_parts" value="'.$total_minutes.'" />';
$html .= '<div class="col-xs-12">';
$html .= '<div class="col-xs-6">Discount</div>';
$html .= '<div class="col-xs-6">'."£".'0.00</div></div>';
$html .= '<div class="col-xs-12">';
$html .= '<div class="col-xs-6">Total</div>';
$html .= '<div class="col-xs-6">£'.$total_price.'</div></div>';
$html .= '<input type="hidden" id="price_parts" value="'.$total_price.'" />';
return $html;
}
public function delete_part($part_id, $old_price, $old_minutes) {
$get_data = $this->db->get_where('rapair_parts', array('id' => $part_id));
$total_minutes = $get_data->row()->repair_time - $old_minutes;
$total_price = $get_data->row()->part_price - $old_price;
$html = '<div class="col-xs-12">';
$html .= '<div class="col-xs-6">Repair time</div>';
$html .= '<div class="col-xs-6">'.$total_minutes.' mins</div></div>';
$html .= '<input type="hidden" id="minutes_parts" value="'.$total_minutes.'" />';
$html .= '<div class="col-xs-12">';
$html .= '<div class="col-xs-6">Discount</div>';
$html .= '<div class="col-xs-6">'."£".'0.00</div></div>';
$html .= '<div class="col-xs-12">';
$html .= '<div class="col-xs-6">Total</div>';
$html .= '<div class="col-xs-6">£'.$total_price.'</div></div>';
$html .= '<input type="hidden" id="price_parts" value="'.$total_price.'" />';
return $html;
}
Please help me out with this bug please
Elements in Chrome have a .remove() method which allows for self-removal of an element instead of having to do it from the parent.
So "remove" is a reserved keyword, that's the issue and the reason it removes the element and not executing your function. You need to choose another name for your function.
I gone through your code, as per code you are using remove() which is inbuilt in JQuery, so you can directly apply to the HTML, kindly follow the below code.
<div id="js-part">
<li id="parts3" style="display: list-item;" onclick="remove();">
<div class="col-md-9"><i class="fa fa-check-circle"></i> Wifi Antenna</div>
<div class="col-d-3"><a>Remove</a></div>
</li>
<li id="parts1" style="display: list-item;" onclick="remove();">
<div class="col-md-9"><i class="fa fa-check-circle"></i> Glass Screen</div>
<div class="col-d-3"><a >Remove</a></div>
</li>
<li id="parts4" style="display: list-item;" onclick="remove();">
<div class="col-md-9"><i class="fa fa-check-circle"></i> Rear Camera</div>
<div class="col-d-3"><a>Remove</a></div>
</li>
<li id="parts5" style="display: list-item;" onclick="remove();">
<div class="col-md-9"><i class="fa fa-check-circle"></i> Front Camera</div>
<div class="col-d-3"><a>Remove</a></div>
</li>
</div>
<div id="total">
<div class="col-xs-12">
<div class="col-xs-6">Repair time</div>
<div class="col-xs-6">170 mins</div>
<input type="hidden" id="minutes_parts" value="170">
</div>
<div class="col-xs-12">
<div class="col-xs-6">Discount</div>
<div class="col-xs-6">£0.00</div>
</div>
<div class="col-xs-12">
<div class="col-xs-6">Total</div>
<div class="col-xs-6">£362</div>
<input type="hidden" id="price_parts" value="362">
</div>
</div>
So, i am directly remove the div on clicking each li elements.
I have a loop i create form with, but the problem is im not sure how to pass the data from the form to the server.
this is my form:
foreach ($appeals as $appeal) {
$attached_file = $appeal["file_dir"];
$output = '<div class="appeal">';
$output .= '<div class="form-response"><form class="form-signin" method="post">';
$output .= '<div class="form-group">';
$output .= '<input type="text" class="form-control" name="first_name" value="'.$appeal['course_id'].'" required readonly/>';
$output .= '</div>';
$output .= '<div class="form-group">';
$output .= '<label>Student: '.$appeal['first_name']." ".$appeal['last_name'].'</label>';
$output .= '</div>';
$output .= '<div class="form-group">';
$output .= '<label>Submit Date: '.$appeal['submit_date'].'</label>';
$output .= '</div>';
$output .= '<div class="form-group">';
$output .= '<label>Message: '.$appeal['content'].'</label>';
$output .= '</div>';
$output .= '<div class="form-group">';
$output .= '<label for="response">Message:</label>';
$output .= '<textarea class="form-control" name="response" rows="5" required></textarea>';
$output .= '</div>';
$output .= '<button type="submit" name="approve" value="'.$appeal['appeal_id'].'" class="btn btn-default">Approve</button>';
$output .= '<button type="submit" name="decline" value="'.$appeal['appeal_id'].'" class="btn btn-default">Decline</button>';
$output .= '</form></div>';
$output .= '</div>';
echo $output;
}
considering the fact i don't want the data to be visible in the client side, is there a way to add onclick="someFunc(...) to the submit buttons and than pass the variables from $appeal to this function without showing them in the client, or should i consider passing the data using AJAX, but than again how can i call a function with the data from $appeal without revealing it in the client side? thx