i have two files
in xml.php i am displaying data from a xml file
also displaying button with xml data by this code
<input type="button" id="class" value="Select this Agent" onClick="Selected(this.id);">
so buttons displayed on page is equal to elements in xml. and i want to change background color of clicked button.
here is my javascript code for changing style of button
function Selected(ClickedId){
alert(ClickedId);
ClickedId.css('background-color', 'Green');
}
and whole code is
<?php
$xml = simplexml_load_file("agent.xml") or die("Error: Cannot create object");
function processXML($node){
foreach($node->children() as $agent => $data){
$agent= trim($agent);
if($agent!="" && $agent=='image'){
?><div class="inline"><?php
echo "<br>";
echo "</br>";
echo "</br>";
echo '<img src='.$data.' >';?></div>
<!--<input type="button" value="Select this Agent">--><?php
}
elseif($agent == 'phone'){
?><div class="btqn"><input type="button" id="class" value="Select this Agent" onClick="Selected(this.id);"></div> <?php
}
elseif($agent!=""){
?> <div class="Table"><?php echo $data;?></div>
<?php
//echo "</br>";
}
else{
echo "<hr>";
}
processXML($data);
}
}
processXML($xml);
?>
So please anyone can tell me where i am wrong.
any suggestion should be appreciable
Please Help
Try out
change this line
<input type="button" id="class" value="Select this Agent" onClick="Selected(this.id);">
to
<input type="button" id="class" value="Select this Agent" onclick="Selected(this);">
Note here instead of passing id pass this reference.
So you can use
function Selected(ClickedId){
alert(ClickedId);
ClickedId.style.backgroundColor = 'green';
}
JQuery
$("#class").click(function(){
$(this).css("background-color","green");
})
See Fiddle Demo
Try
document.getElementById(ClickedId).style.backgroundColor = "green";
[Updated part as user requested]
First change from id to class selector as ids are not supposed to be duplicated and pass this instead of this.id. Also if you want to clear all the other buttons backgrounds you can make use of getElementsByClassName() function.
HTML
<input type="button" class="class" value="Select this Agent" onClick="Selected(this);">
<input type="button" class="class" value="Select this Agent" onClick="Selected(this);">
<input type="button" class="class" value="Select this Agent" onClick="Selected(this);">
Javascript code
function Selected(elem) {
var buttons = document.getElementsByClassName('class');
for (var i = 0; i < buttons.length; i++) {
buttons[i].style.backgroundColor = '';
}
elem.style.backgroundColor = "green";
}
Jsfiddle here
Related
I am trying to plus or minus 1, a simple quantity input box, which can be different like in the picture below :
PHP:
$query = ...
while ($row= mysqli_fetch_array($query))
{
<input type="hidden" value="<?php echo $row['id']; ?>" id="id_part">
<input type="text" value="<?php echo $row['quantity']; ?>" id="<?php echo $row['id']; ?>_count"><br>
<input type="button" value="-" id="minus" onclick="minus()">
<input type="button" value="+" id="plus" onclick="plus()">
}
Javascript:
<script>
var count = 1;
var id = document.getElementById("id_part").value;
var countEl = document.getElementById(id + "_count");
function plus(){
count++;
countEl.value = count;
}
function minus(){
if (count > 1) {
count--;
countEl.value = count;
}
}
</script>
It doesn't work. It takes me only the first id quantity box. Can't manage to edit the second quantity box, where the id should be different. As you can see, I assigned each id tag with different names, taken from database id.
Working fiddle.
That happen because you've a duplicate id's when the id attribute should be unique.
Please use common classes instead.
The ID id_part is being generated for every row in your script.
When you click on the button it finds the instance of id_part and its first value and edits its value.
Use unique ids say id='id_part' +<?php echo $row['id']; ?>
Actually your Hidden field ID should be unique but it is in loop and returning the same value for all rows.
<input type="hidden" value="<?php echo $q; ?>" id="**id_part**">
Try blow changes,
change your inner html as below
<input type="button" value="-" id="minus" onclick="minus(<?php echo $row['id']; ?>)">
<input type="button" value="+" id="plus" onclick="plus(<?php echo $row['id']; ?>)">
<script>
var count = 1;
function plus(position){
count++;
var countEl = document.getElementById(position + "_count");
countEl.value = count;
}
function minus(position){
if (count > 1) {
count--;
var countEl = document.getElementById(position + "_count");
countEl.value = count;
}
}
</script>
function check_uncheck(truefalse) {
var boxes = document.forms[0].chkboxarray.length;
var form = document.getElementById('checkForm');
for (var i = 0; i < boxes; i++) {
if (truefalse) {
form.chkboxarray[i].checked = true;
} else {
form.chkboxarray[i].checked = false;
}
}
}
<form name="checkForm" id="checkForm" method="post" action="checkboxes1.php">
<input type="checkbox" name="chkboxarray" value="1" /><br />
<input type="checkbox" name="chkboxarray" value="2" /><br />
<input type="button" name="CheckAll" value="Check All Boxes" onclick="check_uncheck(true)" />
<input type="button" name="UncheckAll" value="Uncheck All Boxes" onclick="check_uncheck(false)" />
<input type="submit" value="Save">
</form>
The snippet shows how it works without connection to a database
I am trying to save the data that is sent from the checklist to a database but i'm stuck. I was thinking of using a foreach but I don't know what to put in it.
I though of putting it as:
foreach($_POST['id'] as $add){
insert into database...
}
How do I do this?
If I do this as Fred-ii and xjstratedgebx suggested where I just change name="chkboxarray" to name="chkboxarray[]" then the javascript code would stop working.
<?php
include '../conec.php';
mysql_select_db("test",$conec)or die('Database does not exist.') or die(mysql_error());
$sql = mysql_query("SELECT * FROM user WHERE state='Not Signed Up'");
?>
<form name="checkForm" id="checkForm" method="post" action="checkboxes1.php">
<?php
while($row = mysql_fetch_array($sql)){
$id = $row['id'];
$name = $row['name'];
$lName= $row['lName'];
$concate = $name.' '.$lName;
echo '<input type="checkbox" name="chkboxarray" value="'.$id.'" />'.$concate.'<br />';
}
?>
<!--<input type="checkbox" name="chkboxarray" value="1" /><br />
<input type="checkbox" name="chkboxarray" value="2" /><br />-->
<input type="button" name="CheckAll" value="Check All Boxes" onclick="check_uncheck(true)" />
<input type="button" name="UncheckAll" value="Uncheck All Boxes" onclick="check_uncheck(false)" />
<input type="submit" value="Save">
</form>
<script type="application/javascript">
function check_uncheck(truefalse){
var boxes = document.forms[0].chkboxarray.length;
var form = document.getElementById('checkForm');
for(var i=0;i < boxes;i++){
if (truefalse) {
form.chkboxarray[i].checked=true;
} else {
form.chkboxarray[i].checked=false;
}
}
}
</script>
If you change the name of your checkbox from "chkboxarray" to "chkboxarray[]", then any boxes that are checked when the form is submitted will pass their values as an array to the server under the key of "chkboxarray".
Basically, change this line:
echo '<input type="checkbox" name="chkboxarray" value="'.$id.'" />'.$concate.'<br />';
To:
echo '<input type="checkbox" name="chkboxarray[]" value="'.$id.'" />'.$concate.'<br />';
As a result, if you var_dump the $_POST super global, you should see something like:
array(1) {
[chkboxarray]=>
array(2) {
[0]=>
string(1) "3"
[1]=>
string(1) "4"
}
}
In the example above, the checkboxes for id's 3 and 4 were checked, so they were sent to the server.
Once you have that array, inserting it into your database depends heavily on what you're trying to accomplish and your database's schema.
Hope that helps.
Also, in fairness, this is exactly what #Fred meant in his comment.
Edit 1
To make the javascript work with the change of the input name, you'll need to update all the places in your javascript where you were referencing the name of the input to the new name (chkboxarray[]).
The resulting code should look like this:
<script type="application/javascript">
function check_uncheck(truefalse) {
var boxes = document.forms[0]["chkboxarray[]"].length;
var form = document.getElementById('checkForm');
for (var i = 0; i < boxes; i++) {
if (truefalse) {
form["chkboxarray[]"][i].checked = true;
} else {
form["chkboxarray[]"][i].checked = false;
}
}
}
</script>
I've created a fiddle to show this works for checking/unchecking all the boxes: https://jsfiddle.net/solvomedia/3Ln468u3/
im noob at php but my question is this:
im having a while loop which presents to me all the products from the db
im trying to add a + and - quantity buttons next to the buy now button that will increase and decrease by pressing them (just display the number not affect the db)
but the problem is that the quantity number won't pass the number 2. Can anyone lend me some brains with this one?
$value = 1; //to be displayed
if(isset($_POST['incqty'])){
$value= $value +1;
echo $value;
}
if(isset($_POST['decqty'])){
$value = $value -1;
echo $value;
}
<form method='post'>
<input type='hidden' name='item'/>
<td><button name='incqty'>+</button><input type='text' size='1' name='item' value='$value'/><button name='decqty'>-</button></td>
</form>
I already tried to do it with js
<form name="f1"> <input type='text' name='qty' id='qty' />
<input type='button' name='add' onclick='javascript:document.getElementById("qty").value++;' value='+'/>
<input type='button' name='subtract' onclick='javascript: document.getElementById("qty").value--;' value='-'/>
</form>
but the buttons were unclickable...
I'm guessing you're learning PHP and because of that not doing this with javascript. Below code should work for you:
<?php
$value = isset($_POST['item']) ? $_POST['item'] : 1; //to be displayed
if(isset($_POST['incqty'])){
$value += 1;
}
if(isset($_POST['decqty'])){
$value -= 1;
}
?>
<form method='post' action='<?= $_SERVER['PHP_SELF']; ?>'>
<!--<input type='hidden' name='item'/> Why do you need this?-->
<td>
<button name='incqty'>+</button>
<input type='text' size='1' name='item' value='<?= $value; ?>'/>
<button name='decqty'>-</button>
</td>
</form>
If I understood the question, you need to show the values of the items in the cart and modify it by pressing + and - button.
I think you shoud use javascript for this (as you are saying that no affects database)
I'm writing some code in jQuery to show an example of the plus button
$('button[name="incqty"]').bind('click', funcion(){
var actual = $('input[name="intem"]').val();
if (actual <= 1) {
actual = actual +1;
}
$('input[name="intem"]').val(actual);
});
Of course is better not to hardcode values in the code and use constants or variables (for the 1 limit) but I hope this example help you.
I tried your javascript snippet and it worked perfectly.
That being said, is there a reason you are not using the HTML number input?
<input type="number" name="quantity" min="1" max="99">
Edit: I used the code from Daan's answer as the template but...
<?php
$value = isset($_POST['item']) ? $_POST['item'] : 1; //to be displayed
?>
<form method='post' action='<?= $_SERVER['PHP_SELF']; ?>'>
<!--<input type='hidden' name='item'/> Why do you need this?-->
<td>
<input type="number" name="item" min="1" max="99" value="<?= $value; ?>">
</td>
</form>
<input type="button" value = "-" onclick="minusbot()" />
<input type="number" name="kgcount" id = "kilohere" value = "1" >
<input type="button" value = "+" onclick="plusbot()" />
<script>
function minusbot()
{
document.getElementById('kilohere').value = parseInt(document.getElementById('kilohere').value) - 1;
var checknumifzero = parseInt(document.getElementById('kilohere').value);
if(checknumifzero < 1) //preventing to get negative value
{
document.getElementById('kilohere').value = 1;
}
}
function plusbot()
{
document.getElementById('kilohere').value = parseInt(document.getElementById('kilohere').value) + 1;
var checknumiffifty = parseInt(document.getElementById('kilohere').value);
if(checknumiffifty > 50) //just a limit
{
document.getElementById('kilohere').value = 50;
}
}
</script>
I have a page in Codeigniter in which i can set the product quantity (sq.m) that the client wants to buy. When the client sets the quantity i have to do some calculations (about the quantity number whis was set before) and i am doing that with Javascript setting some variables. Now i want to show these variables in the same (php) page and it's working, but i don't know what should i do to put these variables in the values of the hidden inputs so that i can send them to the controller. Here is the coding:
<input type="text" name="productQuantity">
<input type="button" class="button" onclick="return showHide();" value="Calculate Packs">
<script type="text/javascript" language="javascript">// <![CDATA[
function showHide() {
var ele = document.getElementById("showHideDiv");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
<?php $pack = explode(' ', $pro->productPackSize); ?>
ele.style.display = "block";
var val = document.getElementById('productQuantity').value;
document.getElementById('val').innerHTML = val;
var req = Math.round(val/<?php echo $pack[0]; ?>);
document.getElementById('req').innerHTML = req;
var total = req * <?php echo $pack[0]; ?>;
document.getElementById('total').innerHTML = total;
}
}
// ]]></script>
<div id="showHideDiv" style="display:none;">
<?php echo form_open('main/add_to_cart_validation/' . $pro->productId); ?>
To cover <strong id="val"></strong> sq.m, you will need <strong id="req"></strong> Packs
which is <strong id="total"></strong> sq.m in total</a> //the ids' here are working, i can show them in the page
<input type="hidden" id="" value="" name="productPacks"> //how can i get the 'reg' variable here?
<input type="hidden" id="" value="" name="productQuantity"> //the same here as above for 'total' variable
<input type="submit" class="button" value="Add to Cart">
</form>
</div>
Thanks for your answers
Add these lines in the else condition after your math:
document.getElementById("productPacks").value = val;
document.getElementById("productQuantity").value = total;
Starty by giving your inputs an id and then you can pass the values like this :
document.getElementById('myField').value = total;
It is very simple.You do it the same way.
var MyHiddenValue = document.getElementById('myHiddenField').value;
alert(MyHiddenValue);
WORKING FIDDLE
I am new in programming. Here I have given description of my problem
I have one pair of two text box. One text box is for URL and other is for instruction but all text-boxes created dynamically depending on what value comes from database.
For example $testing_type_id=2 so I get total two pair of text boxes, let it called bundle. $i is used to identify textbox uniquely.
<input type = "text" size="33" class="uploadtxt1 url" name="txturl_<?php echo $testing_type_id ; ?>" id = "txturl_<?php echo $testing_type_id; ?>_<?php echo $i ; ?>" value="" />
<input type = "text" class="uploadtxt2" size="33" name="txtinstruction_<?php echo $testing_type_id ; ?>" id = "txtinstruction_<?php echo $testing_type_id; ?>_<?php echo $i ; ?>" value="" /> <br/>
<input type="submit" name="checkout" id="checkout" class="graybtn1 ptr button_float_left_checkout" disabled="disabled" value="Proceed To Checkout" />
Here what I wanted to do that if all bundle has value, either in one textbox or both textbox so and so enable submit button. If I removed value so disable submit button using jQuery.
I think this will work
$(document).ready(function(){
$("input[class^='uploadtxt']").keyup(function(e){
var alltxt=$("input[class^='uploadtxt']").length;
var empty=true;
$("input[class^='uploadtxt']").each(function(i){
if($(this).val()=='')
{
empty=true;
$('#checkout').prop('disabled', true);
return false;
}
else
{
empty=false;
}
});
if(!empty) $('#checkout').prop('disabled', false);
});
});
An example is here.
if($('.uploadtxt1').val() !='' && $('.uploadtxt2').val() !='')
{
$('#checkout').hide();
}
else
{
$('#checkout').show();
}
So assuming you want to show/ enable the button if the textareas / inputs have values. You could do something like this using jQuery.
$(window).ready(function(){
if( $('input, textarea').val().length >=0 ){
//run function to enable button
}
else if ( $('input, textarea').val().length <=0 ){
//run function to disable button
}
});
I think this is what you are sort of looking for. Let me know if I am way off or not understanding you correctly.
I am going to suggest a minor markup changes so that will be easy to handle the traversing.
Wrap the elements in a <div>
<div class="item">
<input type = "text" size="33" class="uploadtxt1 url" name="txturl_<?php echo $testing_type_id ; ?>" id = "txturl_<?php echo $testing_type_id; ?>_<?php echo $i ; ?>" value="" />
<input type = "text" class="uploadtxt2" size="33" name="txtinstruction_<?php echo $testing_type_id ; ?>" id = "txtinstruction_<?php echo $testing_type_id; ?>_<?php echo $i ; ?>" value="" /> <br/>
<input type="submit" name="checkout" id="checkout" class="graybtn1 ptr button_float_left_checkout" disabled="disabled" value="Proceed To Checkout" />
</div>
Then, Attach a snippet on the change event
$("input[type=text]", $(".item")).change(function() {
var allField = true;
$(this).closest(".item").find("input[type=text]").each(function() {
allField = allField && ($(this).val().length > 0)
});
if(allField) {
$(this).closest(".item").find("input[type=submit]").prop('disabled', false);
}
});
Demo of Working Solution