how are you?
I would like to know how I can do to allow the user to edit(text) the quantity field in addition to using the + and - buttons (plus and minus). Briefly, how can i make the user enter the amount of items he wants to add to his cart. It is possible?
``` <div class="col-5 col-xs-5 col-md-2 border-bottom border-right" style=" text-align: center;"><br>
<button product_id="{{ $product->id }}" class="btn_minus rounded-circle btn btn-danger">-</button>
<span id="qtde_txt{{ $product->id }}">0</span>
<button product_id="{{ $product->id }}" class="btn_plus rounded-circle btn btn-success"><b>+</b></button>
</div>```
Many thanks!!
You can easily do this (for example) with JQuery. For the particular code that you have shown, you can use the following script to do this:
$(".btn_plus").on("click", function()
{
var span_element = $(this).prev(); //get the span element
var quantity = span_element.html(); //get the span value
quantity = parseInt(quantity) + 1; //increment it
span_element.html(quantity); //update the quantity in the span element
});
The same will go for the minus button, except that you will decrement your quantity. However, if you want the user to be able to edit the quantity just change the span into an input of type text:
<input type="text" id="qtde_txt{{ $product->id }}" value="0" />
But you will need to update the JQuery code I wrote above to map with the changes.
you need to use javascript for that, there are multiple examples for a counter / number input like that.
One example: Vanilla JS quantity increment and decrement buttons update only one input
Related
I'm creating an eCommerce website using HTML and PHP. I have a table named "products" in the database.
the minimum order values of the products are all saved in this table.
I have an admin panel to set the minimum order for that particular product. The quantity of the minimum order of each and every product was saved in the MySQL database. The minimum order value of that particular product is set by the admin according to the amount of availability of the product. There are no constraints for the admin to set the minimum order in the admin panel.
My question is how do I get the minimum order($row['moq']) quantity from the "product" table in the database so that the orders(cart_qty) from the users will be restricted to a certain amount that has been set from the Admin Panel using minimum attributes.
These are the codes that I used to require users to add the quantity that they wanted to order:
<div class="clearfix"></div>
<form action="store_items.php" method="post">
<div class="col-12 form-group">
<div class="row">
<div class="col-3">
<input type="number" name="cart_qty" step="0.01" value="1" class="form-control text-center" </div>
<div class="col-9">
<input class="btn btn-block addtocart" type="submit" value="Add to cart" name="addtocart" <?php if($row[ 'product_status']==0 ) echo 'disabled="disabled"'; ?> >
</div>
</div>
This is where I add the minimum order from the admin panel. moq is the entity of the minimum order in the product table.
<div class="col-md-2">
<div class="form-group">
<label>Minimum Order Quantity*</label>
<input type="number" step="0.01" class="form-control" placeholder="Enter minimum order quantity" name="moq" value="<?php echo $row['moq'];?>" required>
</div>
</div>
How do I get the $row['moq'] to restrict the number of orders in cart_qty. I know the method of using the minimum attributes but how do I get the values from of the moq in the product table to restrict the input value of cart_qty in the user page.
I'm not using any eCommerce platform (eg. WooCommerce) to build my website. Just a pure HTML, PHP, and JavaScript.
You can use the onChange event to restrict the value using Javascript.
<input type="number" onchange="restrictValue(this, 10, 30);">
Then in Javascript you do:
function restrictValue(inputElement, minimum, maximum)
{
let value = inputElement.value;
if (value < minimum) value = minimum;
if (value > maximum) value = maximum;
inputElement.value = value;
}
You could use the onKeyUp to constantly correct any value entered, but that could be quite disruptive and irritating.
I am trying to make a simple shopping website using mainly PHP and HTML.
Inside PHP, I created objects from a class, and those objects are in array.
Now inside HTML, I am printing each object's photo and name using PHP's foreach.
Since this is a shopping website, I have added a FORM under each item photo where the customer can type in the number of the items they wish to purchase. The default value is 0.
Now, using angularJS, What I want to do is:
1)when the value(the number of the items they want) is 0, nothing happens and the webpage prints nothing.
2)when the value is more than 0, print the number * the price right next to the form, so the user can see in real time how much the total is going to be for that specific item.
Here is my code..
<?php
class Stock{
public $name; //in real program it is private.
public $price;
}
//Create objects and initialize them by giving each of them name and price
//Assume there are 3 objects
$items = array($object1, $object2, $object3);
?>
//now in HTML code
<form method="POST" action="order.php">
<?php foreach($items as $item): ?>
<!--Print name and price of each -->
<input type="text" value="0" name="<?php echo $item->name; ?>"> {{ <!--*****--> }}
<?php endforeach ?>
I want to print the product of the number * price of the item right next to the form only if the value is greater than 0. I tried adding ng-model="quantity" inside input tag and wrote {{ quantity * $_POST[$item->name] }}. However, this does not fully work. This does print the product, but because it is inside foreach, when I change the value in the form for an item, the values for the other items' form change along with it. How can you apply angularJS only for the specific item?
Your loop must be in angular to do this.
So you could bind it as a model ..
FORM.PHP
<div ng-app="appModule">
<form action="order.php" method="post" ng-controller="orderFormController">
<div ng-repeat="item in itemList">
{{ item.name }} (price - {{ item.price }}): <input type="text" value="0" name="{{item.name}}" ng-model="qty[item.name]" />
Total: <span ng-if="qty[item.name] > 0">{{ item.price*qty[item.name] }}</span>
</div>
</form>
</div>
MODULE.JS
var app = angular.module("appModule", []);
app.controller("orderFormController", function($scope) {
// $scope.itemList - ajax your item list here
$scope.itemList = [
{name: 'Pencil', 'price': 10},
{name: 'Paper', 'price': 2},
{name: 'Folder', 'price': 13},
];
});
Change the value inside the input tag. Refer to HTML input value Attribute on W3 Schools.
<input value='<?php // your php code ?>' />
input value w3c schools
input value w3c schools example
I have created an input field in my custom metabox and linked it to wpColorPicker object in jquery so that it becomes a color picker field.But i dont know to get the meta key to show the value.My code is:
<label for="title-background-color">Choose background color: </label>
<input type="text" name="title-background-color" id="title-background-color"
class="title-background-color" value="#dddddd" data-default-color="#dddddd">
I want to show it here
<div class="post-title-under-header" style="background: `i want that value here` ;">
<div class="post-title-under-header">
<?php the_title('<h1>', '</h1>');?>
</div>
</div>
To set the background color of your element with class post-title-under-header you can do something like this with jQuery. The background-color will, in this example, change on an change event.
$(document).ready(function(){
$('#title-background-color').on('change',function(){
$('.post-title-under-header').css('background-color',$('#title-background-color').val());
});
});
The code below consists of invoice-lines that contain some input fields that the user can fill out. The initial number of input lines is 20. Users will often need to add more lines to the invoice by clicking the "Add lines" button. Every click of this button uses Javascript to append more lines to the invoice.
The problem is when the form gets submitted only the first 20 lines seem to get submitted. All the javascript appended invoice lines are ignored and never POSTed.
I have been trying to work out this problem for quite a while now, I was wondering if someone can guide me as to how to go about implementing this correctly?
Many thanks in advance.
Markup / PHP
<?php
for($i=0; $i < 20; $i++){
echo '
<div class="invoice-line">
<div class="prod-id-cell"><input name="rows['.$i.'][id]" type="text" class="prod-id-input">
<div class="smart-suggestions">
<!-- RESULT SUGGESTIONS WILL POPULATE HERE --> </div>
</div>
<div class="prod-name-cell">
<input type="text" name="rows['.$i.'][name]" class="prod-name-input"/> <div class="smart-suggestions">
<!-- RESULT SUGGESTIONS WILL POPULATE HERE -->
</div>
</div>
<div class="price-cell"><input name="rows['.$i.'][price]" class="price-input" type="text" /></div>
<div class="quantity-cell"><input name="rows['.$i.'][quantity]" type="text" class="quantity-input"></div>
<div class="unit-price-cell"><input name="rows['.$i.'][unit-price]" class="unit-price-input" type="text" /></div>
<div class="num-kits-cell"><input name="rows['.$i.'][num-kits]" class="num-kits-input" type="text" /></div>
<div class="amount-cell"><input name="rows['.$i.'][amount]" class="amount-input" type="text" readonly="readonly" /></div>
</div>';
}
?>
Javascript
//**ADD 5 LINES**//
$('.invoice-links div').on("click", ".add-five-trigger", function(){
for(var i=0; i < 5; i++){
var invoiceLine = $(".invoice-line").first().clone( true, true );
$(invoiceLine).insertAfter(".invoice-line:last");
$(".invoice-line:last").find('input').val('').attr('disabled','disabled');
}
});
You forgot to change the name attributes of the cloned inputs. They would overwrite previous fields.
Use this:
var invoiceLine = $(".invoice-line").last();
var newLine = invoiceLine.clone( true, true );
invoiceLine.after(newLine);
newLine.find('input').each(function() {
if (this.type == "text")
this.value = "";
this.name = this.name.replace(/rows\[(\d+)\]/, function(m, num) {
return "rows["+(+num+1)+"]";
});
this.disabled = true;
});
The values are not being posted because you are disabling them. Input elements with disabled attribute don't get posted.
Also, always make sure that elements have unique ids and names. Elements without names don't get posted.
You are not giving new names to the elements you create. You are also disabling them.
$(".invoice-line:last").find('input').val('').attr('disabled','disabled');
Disabled form inputs will never be submitted with the form.
I'm using the http://www.advancedcustomfields.com plugin to create custom fields in Wordpress. I'm specifically using the repeater field functionality.
On a page I have a repeater that has an unlimited amount of rows. The usual way of echoing out all the data is the following:
<?php $counter = 1; if(get_field('step_by_step_training')): ?>
<?php while(the_repeater_field('step_by_step_training')): ?>
<p class="training-<?php echo $counter; ?>"><?php the_sub_field('introduction'); ?></p>
<?php $counter++; endwhile; ?>
<?php endif; ?>
Is it possible to show one row of data at a time with a next button that when pressed will show the next row of data? I only want one row of data showing at a time so if row 1 is originally showing, when next is clicked it hides row 1 and shows row 2. Essentially creating a step by step process.
Eventually I'd like to include a form so the user can submit data.
UPDATE:
<form class="form" method="POST" action="<?php the_permalink(); ?>">
<?php $counter = 1; if(get_field('step_by_step_training')): ?>
<?php while(the_repeater_field('step_by_step_training')): ?>
<div class="form-row">
<p class="training"><?php echo the_sub_field('introduction'); ?></p>
<button class="next">Next Form Element</button>
</div>
<?php $counter++; endwhile; ?>
<?php endif; ?>
</form>
<script type="text/javascript">
jQuery(function($) {
$(document).ready(function() {
// hide all form-rows, but not the first one
$('.form-row').not(':first').hide();
$('button.next').click(function(e) {
// prevent the next buttons from submitting the form
e.preventDefault();
// hide this form-row, and show the next one
$(this).parent('div.form-row').hide().next('div.form-row').show();
});
});
});
</script>
You could do something simple like this using jQuery (I think this is what you wanted?):
$(document).ready(function() {
// prepend a 'previous' button to all form-rows except the first
$('<button>').addClass('previous').text('Previous').prependTo($('.form-row').not(':first'));
// hide all form-rows, but not the first one
$('.form-row').not(':first').hide();
// add the submit button to the last form-row
$('<input>').prop('type', 'submit').val('Submit Form').appendTo($('.form-row:last'));
// handle the previous button, we need to use 'on' here as the
// previous buttons don't exist in the dom at page load
$('.form-row').on('click', 'button.previous', function(e) {
e.preventDefault();
$(this).parent('div.form-row').hide().prev('div.form-row').show();
});
$('button.next').click(function(e) {
// prevent the next buttons from submitting the form
e.preventDefault();
// hide this form-row, and show the next one
$(this).parent('div.form-row').hide().next('div.form-row').show();
});
});
some example markup:
<form action="index.php" method="post">
<div class="form-row">
<label for="forename">Forename</label>
<input type="text" name="forename" />
<button class="next">Next Form Element</button>
</div>
<div class="form-row">
<label for="forename">Surname</label>
<input type="text" name="surname" />
<div style="clear: both;"></div>
<label for="another">Another</label>
<input type="text" name="another" />
<button class="next">Next Form Element</button>
</div>
<div class="form-row">
<label for="last">Last Form Element</label>
<input type="text" name="last" />
</div>
</form>
You can add as many form elements to each form-row as you want, here's a fiddle to play with
edit
Things to note here are that the previous buttons are injected to the DOM dynamically, and so is the forms submit button (notice how I've removed it from the last form-row in the markup)
Here's an updated fiddle
You could start with a jQuery accordion menu. Some CSS will allow you to minimize the real estate occupied by the deselected rows. If you want to actually discard and retrieve certain rows based on some identifiable characteristic (for instance, ID number), you'll need to go with AJAX.
You could write your own custom method with something like JQuery.
Assign a class to each row, and keep track of which one is selected, when viewing another row simply .hide() the one that was showing and .show() the one you wish to display.
If you want to keep your HTML cleaner, you could use the JQuery .data() functionality to assign identifiers to each element and refer to them that way as well.
Most of this all depends on your constraints with wordpress, how it looks & your actual HTML layout
After it's all written to the screen, can't you just hide everything but the first row? And then each time you click the button, have it hide everything and show the next row. Try using jquery's next() function. jquery - next()
Ah, looks like deifwud beat me to it with a better explanation.