I have a CSS which looks like in my
style.css
~~~~~~~
.spanish{
display : initial;
}
.english{
display : initial;
}
and I have a HTML like:
<HTML>
<head>
<link rel=StyleSheet type="text/css" href="style.css" />
</head>
<body>
<input type="button" onclick="codecss.php" value = spanish>
<input type="button" onclick="codecss.php" value = english>
<input type="button" onclick="codecss.php" value = both>
<table>
<tr class= "spanish"><td> This is spanish text </td></tr>
<tr class = "english"><td> This is english text </td></tr>
<table>
</body>
<HTML>
Now I need help with PHP. I want a way when I click on Spanish then my HTML should display only Spanish and if clicked English then only English should be displayed. and both if pressed "both" button.
How can I edit my css from php according to the button pressed in my html???
Please help/
I just write a basic code snippet, i hope it'll help you out. Thanks
$('asd.languageChange').click(function() {
var language = '.' + $(this).attr('id');
$('.language').hide();
$(language).show();
})
.spanish {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="english" class="languageChange">English</button>
<button id="spanish" class="languageChange">Spanish</button>
<table>
<tr class="spanish language"><td> This is spanish text </td></tr>
<tr class="english language"><td> This is english text </td></tr>
<table>
Another option. You can also do it using Javascript.
document.addEventListener("click", e => {
if (e.target.matches(".languageChange")) {
var hideAllLanguages = document.getElementsByClassName("language");
for(var i = 0; i < hideAllLanguages.length; i++){
hideAllLanguages[i].style.display = "none";
}
var showRequiredLanguage = document.getElementsByClassName(e.target.id);
for(var i = 0; i < showRequiredLanguage.length; i++){
showRequiredLanguage[i].style.display = "block";
}
}
});
.spanish {
display: none;
}
<button id="english" class="languageChange">English</button>
<button id="spanish" class="languageChange">Spanish</button>
<table>
<tr class="spanish language"><td> This is spanish text </td></tr>
<tr class="english language"><td> This is english text </td></tr>
<table>
Related
So I'm currently working on an invoicing tool which works fine however what im looking to do is to increment the data inserted within the within every new row added. Once that's done, i then want to be able to grab all of that data and submit it to the MySQL database using php. Does anybody know how this is done?
I've never studied Jquery if im honest so I wouldn't know where to start. Thanks
<html lang="en">
<head>
<meta charset="utf-8">
<title>Invoce Report</title>
<style type="text/css">
form{
margin: 20px 0;
}
form input, button{
padding: 5px;
}
table{
width: 100%;
margin-bottom: 20px;
border-collapse: collapse;
}
table, th, td{
border: 1px solid #cdcdcd;
}
table th, table td{
padding: 10px;
text-align: left;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".add-row").click(function(){
var name = $("#name").val();
var variants = $("#variants").val();
var markup = "<tr><td><input type='checkbox' name='record'></td><td name>" + name + "</td><td>" + variants + "</td></tr>";
$("table tbody").append(markup);
});
// Find and remove selected table rows
$(".delete-row").click(function(){
$("table tbody").find('input[name="record"]').each(function(){
if($(this).is(":checked")){
$(this).parents("tr").remove();
}
});
});
});
</script>
</head>
<?php
$mg = "mg";
$cb = "Classic Tobacco - 10ml";
$sh = "Sahara Tobacco - 10ml";
$ed = "Energy Drink - 10ml";
?>
<body>
<form id="invoice" action="invoicereg.php" method="POST">
<select id="name" name="name">
<option value="<?php echo $cb; ?>">Aramax Classic Tobacco</option>
<option value="<?php echo $sh; ?>">Aramax Sahara</option>
<option value="<?php echo $ed; ?>">Aramax Energy Drink</option>
</select>
<select id="variants" placeholder="Variants - If Applicable">
<option></option>
<option value="3<?php echo $mg; ?>">3mg</option>
<option value="6<?php echo $mg; ?>">6mg</option>
<option value="12<?php echo $mg; ?>">12mg</option>
<input type="button" class="add-row" value="Add Row">
</form>
<table>
<thead>
<tr>
<th>Select</th>
<th>Product</th>
<th>Variant - If Applicable</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<button type="button" class="delete-row">Delete Row</button><br><br>
<input type="submit" form="invoice">
</body>
</html>
Didn't test que jquery part, but this seems to lack the field in the form you want after submit. In the:
var markup = "<tr><td><input type='checkbox' name='record'></td><td name>" + name + "</td><td>" + variants + "</td></tr>";
You need to include the data you need to submit in the form. example:
var markup = '<tr><td><input type="checkbox" name="record"></td><td name><input type="hidden" name="values[]" value="' + name + ' ' +variants+ '" >' + name + '</td><td>' + variants + '</td></tr>';
After submit, in $_POST you get the value in array $_POST['values'].
Don't forget to check isset, it could be submitted with any value. And proper escape values to sql.
I'm trying to dynamically load a form that will is populated from the number of rows in a sql data base. The data returns a hex color, name, and price. I want to display the color and the name to the user within the form and on the POST, I want to send the price attached to that specific color. I've spent all day trying to figure this out.
Any help would be greatly appreciated!
EDIT: (here's what I have so far
Here's an example of what I have :http://hruska-schuman.com/test2/feedback_form.php
Code:
$query = "SELECT
`name`,
img,
price
FROM `gutter`";
try
{
$stmt = $db->prepare($query);
$stmt->execute();
}
catch(PDOException $ex)
{
die("Failed to run query: " . $ex->getMessage());
}
$rows = $stmt->fetchAll();
$form =
'<ol id="selectable" name="selectable">';
foreach($rows as $row):
$prices[] = htmlentities($row['price'], ENT_QUOTES, 'UTF-8');
$form .= '<li class="ui-widget-content" style="background:#'.htmlentities($row['img'], ENT_QUOTES, 'UTF-8').'">'.htmlentities($row['name'], ENT_QUOTES, 'UTF-8').' Price: '.htmlentities($row['price'], ENT_QUOTES, 'UTF-8').'</li>';
endforeach;
$form .=' </ol>';
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hruska Gutter Estimator</title>
<link rel="stylesheet" href="../extras/selecttable/development-bundle/themes/base/jquery.ui.all.css">
<script src="../extras/selecttable/development-bundle/jquery-1.9.1.js"></script>
<script src="../extras/selecttable/development-bundle/ui/jquery.ui.core.js"></script>
<script src="../extras/selecttable/development-bundle/ui/jquery.ui.widget.js"></script>
<script src="../extras/selecttable/development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="../extras/selecttable/development-bundle/ui/jquery.ui.selectable.js"></script>
<link rel="stylesheet" href="../extras/selecttable/development-bundle/demos/demos.css">
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #000000; }
#selectable .ui-selected { background: #000000; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<SCRIPT type="text/javascript">
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
</SCRIPT>
<script type="text/javascript">
$(function() {
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
result.append( "" + ( index + 1) );
return index;
});
}
});
});
</script>
</head>
<body>
<h1>New Gutter Estimator!</h1>
<form action="sendmail.php" method="post">
<table>
<tr>
<td>Gutter Color:</td>
<td>
<?php echo $form; ?>
<span id="select-result" name="result">none</span>
<span id="select-result" name="price"><?php echo $prices; ?></span>
</td>
</tr>
<tr>
<td>Board Feet:</td>
<td>
<input type="txtChar" onkeypress="return isNumberKey(event)" name="spouts" value="" maxlength="120" />
</td>
</tr>
<tr>
<td>Number of Spouts:</td>
<td>
<input type="txtChar" onkeypress="return isNumberKey(event)" name="board_feet" value="" maxlength="120" />
</td>
</tr>
<tr>
<td>E-mail to Recieve Estimate:</td>
<td>
<input type="text" name="email_address" value="" maxlength="120" />
</td>
</tr>
<tr>
<td>Additional Comments:</td>
<td>
<textarea rows="10" cols="50" name="comments"></textarea>
</td>
</tr>
<tr><td> </td>
<td>
<input type="submit" value="Get Your Free Estimate!" />
</td>
</tr>
</table>
</form>
</body>
</html>
Using JQuery UI select table: http://jqueryui.com/selectable/
I just don't know how to get get the selected index and post "$prices[selectedIndex]"
You should use a custom attribute (like data- attribute) to your color elements.
$form .= '<li class="ui-widget-content" style="background:#'.
htmlentities($row['img'], ENT_QUOTES, 'UTF-8').'"
data-price=".$row['price'].">'.
htmlentities($row['name'], ENT_QUOTES, 'UTF-8').
' Price: '.htmlentities($row['price'], ENT_QUOTES, 'UTF-8').
'</li>
so then in your js you can do something like this:
$(function() {
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var price = $( "#selectable li" ).attr('data-price');
result.append( "" + ( price ) );
// or you can set it directly to an input / hidden input
$('#price-input').val(price);
return price;
});
}
});
});
Where #price-input could be a hidden input into the form:
<input type="hidden" name="selectedPrice" />
Of course you could also use radio inputs for this.
i have this code:
<?php
$i=5;
while($i > 0){
echo '
<table width="500px" border="1">
<tr>
<td>
<button id="button">Show comments</button>
</td>
</tr>
<tr>
<td id="comments" style="display:none;height:300px;width:100%;"></td>
</tr>
</table>
<script type="text/javascript">
$("#button").toggle(
function (){
$("#button").text("Hide Comments");
document.getElementById("comments").style.display="inline";
},function (){
$("#button").text("Show Comments");
document.getElementById("comments").style.display="none";
}
);
</script>
<script type="text/javascript" src="jquery.js"></script>
';
$i--;
}
?>
When the show comments button is clicked the comment box should show up. It works for the first one. But it doesn't work for the others.What's wrong?
I'd just escape the php interpreter and print the HTML markup directly into the page. I'd also change the ids to classes, so we can more easily reuse them without quirky additional numbers.
<?php
$i=5;
while($i > 0):
?>
<table width="500px" border="1">
<tr>
<td><button class="button" data-clicked="0">Show comments</button></td>
</tr>
<tr>
<td class="comments" style="display:none;height:300px;width:100%;"></td>
</tr>
</table>
<?php
$i--;
endwhile;
?>
I don't know what the element with an ID of show is, but we'll just assume it was the button.
$(".button").click(function (){
var $this = $(this);
if(!$this.data('clicked')){
$this.text("Hide Comments");
$this.closest('table').find('.comments').css('display', 'inline');
$this.data('clicked', 1);
}else{
$this.text("Show Comments");
$this.closest('table').find('.comments').css('display', 'none');
$this.data('clicked', 0);
}
});
Don't print that javascript in a while loop in php, just include it in the head of the page, or in a separate file.
Edit
As indicated in a comment below,in jQuery 1.9 the toggle no longer works as you're intending to use it, as a work around, you can add a data attribute to the button, and check it each time we click.
<button class="button" data-clicked="0">
As you can see we've added the new data-clicked attribute.
In our JavaScript above, you can see that we've completely changed how it works. We perform our own if/else to check the data-clicked state.
It is generally good practice to separate code, markup and style declarations. As a matter of style, I prefer numbered IDs. I find they help with debugging. ymmv
I also like to animate changes so people can more easily follow a change.
<!doctype html>
<html>
<head>
<title>Button Testing 1 2 3</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style>
.comment {
display: none;
height: 0px;
width: 500px;
}
td {
width: 500px;
border: 1px solid #555;
border-collapse: collapse;
}
</style>
</head>
<body>
<?
$j = 0;
while ($j < 5 ) {
?>
<table>
<tr>
<td>
<button id="button_<?= $j ?>" class="button">Show comments</button>
</td>
</tr>
<tr>
<td class="comment"><span id="comment_<?= $j ?>">J = <?= $j ?></span></td>
</tr>
</table>
<?
$j++;
} ?>
<script type="text/javascript">
$(document).ready(function(){
$(".button").click(function(){
var id = $(this).attr('id');
var j = id.substr(id.indexOf('_') +1);
if ($(this).hasClass('revealed')) {
$(this).removeClass('revealed').text('Show Comments');
$('#comment_'+j).removeClass('revealed').parent().animate({'height' : 0}, function(){$(this).css({'display': 'none'})});
} else {
$(this).addClass('revealed').text('Hide Comments');
$('#comment_'+j).addClass('revealed').parent().css({'display': 'inline'}).animate({'height' : '300px'});
}
});
});
</script>
</body>
</html>
i have this code :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body {
background-image: url(../images/paper_03.png);
}
form {
background-image: url(../images/paper_02.png);
}
</style>
</head>
<?php
require("../function.php");
// echo sizeof($_SESSION['liste']);
?>
<body >
<form name="log" method="post" style="position: absolute; top:50px; left: 320px; width: 600px; height: 100%;" >
<table BORDER=2 style="position: relative; top:15px; left: 3px;" >
<TR>
<TH style="width:100px"><font color="blue">Date</font></TH>
<TH style="width:400px"><font color="blue">Location</font></TH>
<TH style="width:400px"><font color="blue">Job Title</font></TH>
<TH style="width:300px"><font color="blue">Company</font></TH>
</TR>
<?php
session_start();
for($i=0;$i<sizeof($_SESSION['liste']);$i++){
?>
<TR>
<td ><center><label><?php echo $_SESSION['liste'][$i]['date']; ?></label></center></td>
<td ><label><?php echo $_SESSION['liste'][$i]['region'].','.$_SESSION['liste'][$i]['city'].','.$_SESSION['liste'][$i]['state']; ?></label></td>
<td ><center><label><?php echo $_SESSION['liste'][$i]['title']; ?></label></center></td>
<td ><center><label><?php echo $_SESSION['liste'][$i]['comapany_name']; ?></label></center></td>
</TR>
<?php
}
?>
</table>
</form>
</body>
</html>
i have a form i want that every 10 results be displayed togother ie add the pagination to my form with two icons ( next, previous ).
can i do this only with php?
do i need ajax in this work?
Pass a $liststart value in as a parameter to your code (get it with $liststart = $_REQUEST['liststart']).
Then adjust your loop to loop from $liststart to $liststart+10.
Make a button that onClick, goes to your code above with the new $liststart value. for example for the 'next' button on the first page, use echo "' onClick='location.href=\"yourcodeabove.php?liststart=".$liststart+10."\";'>";
or if you prefer, you could do it without javascript by making the next and prev buttons their own forms. like this:
<FORM METHOD="LINK" ACTION="yourcodeabove.php?liststart="<?php $liststart+10 ?>">
<INPUT TYPE="submit" VALUE="next->">
</FORM>
close out your other form first (which doesn't look like it needs to be a form actually... could be a div just as well). forms usually have 'actions' and are submitted with buttons but since you'll have 2 buttons (next and prev) each could be their own form with either the javascript onClick or the form method.
If you use mysql this should work:
$page = $_GET['page'];
$query = mysql_query("SELECT * FROM some_table LIMIT $page, 10");
And do some work with $query variable, your links should be something like this:
Next
I am developing an application where i am capturing images from a camera and streaming them online. To capture images i am using an opencv code. It stores(rewrites) the image on the same image file on server. This image is then streamed online. However if the streaming and storing take place simultaneously then the image gets corrupt. So i have synchronized those processes using system locks. The html page that checks that reloads the image every 2 secs checks if the img file has a system lock. If yes then it doesn't reload the image. So to check whether the file is locked or not i have to put some php code in my html file. I believe that my code is sytactically correct. Yet it is not giving the desired output.
<html>
<head>
<!--to keep requesting the server new page without displaying the image from the cache pragma
is used -->
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<title>YOUR SITE TITLE GOES HERE</title>
<style type="text/css">
#imgJSselbox{
position: absolute;
margin: 0px;
padding: 0px;
visibility: hidden;
width: 0px;
height: 0px;
border: 1px solid #006;
color: #fff;
background-image: url(selection_area.gif);
z-index: 20;
}
</style>
<script type="text/javascript" src="globalvar.js"></script>
<script language="Javascript">
var x = 2;
var y = 1;
var now;
function startClock() {
x = x-y;
document.form1.clock.value = x;
<?php
$fp1=fopen("a.jpg","r");
$fp2=fopen("b.jpeg","r");
if(flock($fp1,LOCK_EX|LOCK_NB)==0 && flock($fp2,LOCK_EX|LOCK_NB)==0)
$x=1;
else
$x=0;
?>
var ch;
ch=<?php echo $x; ?>
if (x < 1 && ch==1) reload();
<?php
$fp1=fopen("a.jpg","r");
$fp2=fopen("b.jpeg","r");
flock($fp1,LOCK_UN);
flock($fp2,LOCK_UN);
?>
timerID = setTimeout("startClock()", 1000);
}
function reload()
{
now = new Date();
<!-- to pass the new image to the src -->
var camImg = "a.jpg" + "?" + now.getTime();
document.campicture.src = camImg;
var crpImg = "b.jpeg" + "?" + now.getTime();
document.croppic.src = crpImg;
x = 2;
document.form1.clock.value = x;
}
</script>
<script type="text/javascript" src="image_cropper.js">
document.form1.x-coord.value=x1;
document.write(x1);
</script>
<script>
function window.open('im','imgg')
{
window.open('im','imgg');
}
</script>
</head>
<body bgcolor="white" onLoad="startClock()">
<center>
<font size=-1>
<h1>AYS WEBCAM PAGE</h1>
<h2>This page loads images and refreshes them after every given interval of time keeping
the same name of the image file</h2><p><br />
<div id="imgJSselbox"></div>
</center>
<img name="campicture" src="a.jpg" id="testimage" border=1 width=640 height=480
alt="AYS
founder's IMAGE" onClick="getImageCropSelectionPoint
'testimage',event,document.form1);">
====>>ROI==>>
<img name="croppic" src="b.jpeg" width=320 height=240 alt="cropped_image">
<center>
<form NAME="form1"action="image_cropper.php" method="POST"><b><font size="-1"
face="Arial">AutoReload in :==> </font>
<input TYPE="text" NAME="clock" SIZE="2" VALUE="5"> <font size="-1"
face="Arial">seconds.</font></b><br />
<br><br><input type="button" value="Crop" onclick= setImageCropAreaSubmit
("image_cropper.php",'testimage')><br><br>
</center>
<!-- <input type="text" name="x-coord" value=""><br>
<input type="text" name="y-coord" value=""><br>
<input type="text" name="wid" value="" ><br>
<input type="text" name="hght" value="" ><br>
-->
</form>
</body>
</html>
Thank you
Your problem is in the code timerID = setTimeout("startClock()", 1000);.
Use
timerID = setTimeout(startClock, 1000); instead.
See window.setTimeout - MDN.