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>
Related
I tried to passing the input value from user to another page by using the Session method after the user click on submit button.
My page has a form with one button which called as "Add Textbox". This button allow the user to add textbox by themselves.
Here is my current code
$(document).ready(function() {
var counter = 2;
$("#addButton").click(function() {
if (counter > 10) {
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Textbox #' + counter + ' : </label>' + '<input type="text" name="textbox' + counter + '" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function() {
if (counter == 2) {
alert("System required at least one.");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="<?php $_PHP_SELF ?>" method="post">
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 :</label>
<input type='textbox' id='textbox1' name="textbox1">
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<br/>
<input type="submit" name="submit" id="submit">
</form>
And here is my code to assign the value to session in php
<?php
if(isset($_POST['submit'])) {
for($i=1; $i<=10; $i++)
{
if(isset($_POST['textbox'.$i]))
{
$obj = $_POST['textbox'.$i];
echo $obj,'<br>';
$_SESSION['textbox'.$i] = $obj;
}
}
header("Location:../brightan-system/result.php");
}
?>
and here is how I tried to get the value from the second page
<?php
for($i=1; $i<=10; $i++)
{
echo "<strong>".$i."</strong> ".$_SESSION['textbox'.$i]."<br>";//Use the session variables
}
session_destroy();
?>
Actually, I can get a result on the second page, but the problem is if the user only add 4 textboxes, then there will be an error that said Undefined index on the second page. This is because the for loop produce 10 session variable on the second page.
Is there another way to get the session variable instead using for loop in this case?
You should check first if ith textbox is set or not. Add condition to check before printing it.
<?php
for($i=1; $i<=10; $i++)
{
if(isset($_SESSION['textbox'.$i])){
echo "<strong>".$i."</strong> ".$_SESSION['textbox'.$i]."<br>";//Use the session variables
}
}
session_destroy();
?>
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 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
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