I'm currently working with Asset Management system. The company is spread through out different locations.
This system can return asset items to store again if these items are not in use.
What I want to do is return the item there are lots of items. So I have input fields like this:
<td><input type="text" name="asset_id[]"/></td>
<td><input type="text" name="batch_code[]"/></td>
<td><input type="text" name="description[]"/></td>
<td><input type="text" name="status[]"/></td>
// current condition of the item
I can't use these fields again and again, I don't know how many fields are required for each particular situation.
If I can give an option to the user to add input fields if he/she needs, how do I do this.
Here you can see something like that
http://jsfiddle.net/damian_silvera/ATzne/
Using JS/jQuery propably :
HTML :
Add Row
jQuery
$(document).ready(function(){
$("a#plus_row").click(function(){
$("table#form_table").append($("table#form_table").find('tr').get(0));
});
});
Related
I'm trying to generate the total price on a one page store.
I have different products on the same page laid out like this within a foreach:
<input type="hidden" name="price_<?=$product_id?>" value="<?=$product_price?>" />
<input type="text" name="<?=$product_id?>" value="" onchange="calculateTotal();" />
So, the first input is hidden and contains the price of the product. The second input contains the quantity, with the name set as the product_id. The only issue is that there can be multiple inputs on one page.
Which would be the best way to do it? Either using Javascript to calculate the price, or an Ajax post and using PHP to do the calculations.
why not use the new data attribute and skip the hidden price field? Something like this:
<input class='quantity' type="number" data-price="1.5" name="prod1" value="" />
<div class='subtotal'>0.00</div>
<input class='quantity' type="number" data-price="7" name="prod2" value="" />
<div class='subtotal'>0.00</div>
<div id='total'>0.00</div>
with this:
$('.quantity').on('change', function(){
var sub = $(this).val() * $(this).data('price');
$(this).next('div.subtotal').html(sub).data('sub',sub);
var tot=0;
$('.subtotal').each(function(){
tot+= $(this).data('sub');
});
$('div#total').html(tot);
});
Noting that using HTML to store a price variable is usually bad etiquette why not keep a running total of all prices? Something like
$running_total = $running_total+$product_price;
This would output the total of all products that have been cycled through. If I misinterpreted your question I'm sorry.
Storing prices as a an HTML entity to be passed via POST or GET leaves the variable open for manipulation by the end user.
Do it however you want. As long as you perform the calculation at checkout (again?) on the server.
Have a query that should hopefully be nice and simple to answer.
I have a form that will be used to add rows into a database. The default number of rows to show when loading the page is 6. I would like to add the option to add more rows to the form, by changing a field, or clicking a button etc.
I currently use a while loop to print out the form. I simply say:
while($rows > 0) {
echo "FORM INPUTS HERE";
$rows = $rows - 1;
}
So the loop goes through a prints a set of inputs for record 1, and then takes one off the count, then prints a set of inputs for record 2, and so on.
Is there a way I can get the while loop to print more without refreshing the page? The simplest way would be to have a small form at the top of the page, with an extra columns field, and submit button. This would then post the value back to the same page, and add it to the default number of rows.
I would like to do this without having to submit, post or GET anything, but to have it happen then and there.
I think it may be tricky, as the while loop will have already run, and I dont know how to get it to run a second time.
Cheers
Eds
If you need an empty form, use Javascript and add this new form elements to the DOM on the fly! :)
Do you need to load some information on that form?
You can use ajax to make your wish. It doesn't refresh page, but sends out a request to the server asynchronously and fetches the content and appends to the form.
Example, if you have a code this way:
<form method="post">
<ul>
<li><label><strong>Field 1:</strong> <input type="text" /></label></li>
<li><label><strong>Field 2:</strong> <input type="text" /></label></li>
<li><label><strong>Field 3:</strong> <input type="text" /></label></li>
<li><label><strong>Field 4:</strong> <input type="text" /></label></li>
<li><label><strong>Field 5:</strong> <input type="text" /></label></li>
</ul>
</form>
Now using jQuery's $.getScript function, you can fetch a script, which is similar to this:
$("form ul").append('<li><label><strong>Field ' + $currentValue + ':</strong> <input type="text" /></label></li>');
This works out for you.
Thanks for all the suggestions guys.
I decided to just go for a small 1 filed form at the top of my page, where a user enters the number of rows they want to add, and then press the add button.
It should suffice, as the page doesnt NEED to be too fancy, and is much quicker and simpler to implement.
Thanks very much
Eds
Having looked at various similar questions, both on SO and elsewhere, I have a horrible feeling what I want to do is impossible, but here goes.
I have a page that is a table of text input rows. The user enters information on each row, and submits the data to a separate file, which creates a PDF.
The problem is that I need the user to be able to add rows to the table at will, since the amount of data can vary.
[Before you go there, I need to point out that I cannot use Javascript for any of this - I know it is easy to do in JS but the page needs to be accessible.]
Here is a very simplified version I just cobbled together to (hopefully) illustrate the point:
<?php
if (filter_has_var(INPUT_POST, 'add_rows')) {
$howmanyrows = filter_input(INPUT_POST, 'howmanyrows', FILTER_SANITIZE_NUMBER_INT);
//get all the data from table and put it in an array,
//then add 5 (or however many) new rows to said array.
}
else if (filter_has_var(INPUT_POST, 'send_data')) {
//get table data, add to session and redirect to other page with a header()
}
?>
<html>
<form action="" method="POST">
<table>
<?php //table rows added using an array of data
foreach ($data as $d): ?>
<tr><td><input type="text" value="<?php echo $d; ?>"></td></tr>
<?php endforeach; ?>
</table>
<input type="text" name="howmanyrows" value="5">
<input type="submit" name="add_rows">
<input type="submit" name="send_data">
</form>
...
</html>
As you can see, at the moment I have a clunky setup where there is just one form that encompasses the entire page, and submits the page to itself. Depending on the button that was clicked, a new row is added or the data is submitted to the PDF-creation page.
This is not ideal, for so many reasons. What I really want to be able to do is have two separate forms, or nested forms. But the former won't allow the input values to be submitted to both, and the latter is apparently bad form (no pun intended) and doesn't work.
Is it at all possible to make this do what I want it to do? Any suggestions for a different way to go about it?
I think you have the best non-javascript solution - certainly hte way I'd run with it.
One thing to make it easier is that you can use multiple inputs with the same name:
<input name="tablerow[]" type="text" value="A" />
<input name="tablerow[]" type="text" value="B" />
<input name="tablerow[]" type="text" value="C" />
And these come through the $_POST['tablerow'] as an array. The length of the array is the number of fields. Then add additional fields to that.
For accessibility, you should add a link at the top that allows the user to hop directly to the first "new" field - otherwise they need to tab through the entire form to get to the new field. (See my comment above about if JS is really unavoidable as you and they can avoid this scenario!)
I am looking for a neat solutions for the multiple Forms.
Have a look at the example screenshot:
There are three networks in the dropdown, AT&T, Verizon Wireless and T-Mobile.
I've selected 'AT&T' from the dropdown list and then 'Sale Type' radios appear.
T-Mobile network may have same Sale Type as 'AT&T' network but two extras Sale Type.
Majority of the text boxes from all the Sale Type are the same. For example:
Consumers will have 20 Fields and Business have 27 Fields (Extras Fields). Sim-Only will have less fields - 15 Fields (A few removed and new fields).
What is a good solution implement like this and DRY principle?
I have used jQuery with a lot of $('.name').hide(); $('.name').hide(); but it get real messy. Example:
$(".at&t_consumer_radio").click(function(){
showSaleType("at&t_consumer");
});
function showSaleType(type) {
if (type == "at&t_consumer") {
$('.name').hide();
$('.name').hide(); and so on..
}
}
When completing the form, then I use PHP to validate it.
Here's the Fiddle: http://jsfiddle.net/GvGoldmedal/FxEGP/
Your best bet is to create the following class tags:
.att, .verizon. , .tmobile, .consumer, .business, .sim
Then you can tag the fields based on when they need to be hidden. If a field is used for verison then it'd get a verizon class. If a field is bussiness type then it'd get the business class. Also add the "hide" class to any field that isn't ALWAYS showing.
Some Field:
<input type="text" class=" hide verizon att consumer" />
Another Field
<input type="text" class = " hide att business" />
Make sure to label every field. Also make sure your radio buttons and the options in your select have values that match the classes. And give your select and radio button a class of 'option', like so:
att
verizon
tmobile
<input type='radio' name='sale_type' class='option' value="business" />
<input type='radio' name='sale_type' class='option' value="consumer" />
<input type='radio' name='sale_type' class='option' value="consumer" />
.. and so on
Now for the Jquery:
//selectId is the ID of your select
// myform is the id of your form
$(".option").change(function()
{
// get the value of our select and option
carrier = $('#selectId option:selected').val();
sale_type = $('input[name=sale_type]:checked').val();
// Hide all fields that don't always show up.
$(".hide").hide();
//Show all fields that match our carrier and sale type
$(".hide").each(function(){
if($(this).hasClass(carrier) && $(this).hasClass(sale_type))
{
$(this).show();
}
});
});
There you have it. Anytime a new option is selected all the fields that aren't part of the form all the time will be hidden and the ones matching your carrier and sale type will then be shown. It will happen almost immediately and the user won't be able to tell the different. You can do some fading to make it look more smooth if you want. Also, if a field is visible for both verizon and att then just add both classes to that input. Let me know if you have any questions.
I'll try and get a Fiddle up showing exactly how to do it.
Hide all the fields that are only shown for specific choices e.g Business or sim free.
Like so
<input type="text" class="standard" />
<input type="text" class="business" style="display:none" />
<input type="text" class="simOnly" style="display:none" />
<input type="text" class="standard" />
<input type="text" class="business simOnly" style="display:none" />
Not sure i'm explaining this that well. :(
Then use jquery to just show the business ones if that option is chosen
$("#businessRadio").click(function(){
$('.business').show();
});
This way you aren't showing and hiding everything, just those inputs specific to each sale type
Ok so i have a form I need to find a good way of going the adding products to a system.
<form action="create.php" method="post" id="form">
<table class="form">
<tr>
<td><span class="required">*</span> System Name:</td>
<td><input name="name" value="" size="100" />
</td>
</tr>
<tr>
<td>Sort Order:<br/><span class="help">Set to -1 to hide from listing</span></td>
<td><input name="sort_order" value="" size="1" /></td>
</tr>
</table>
</form>
So the problem is that a system has multiple products and each one of those products has its own quantity. So i was looking at a user friendly way of displaying the products. Here is my array with all the products. I was thinking a checkbox but that can get so long since there is 200 products in the db. I really want some sort of jquery draggable or something that will make it easy for the user....I am looking for any good suggestions....thanks again
<?php foreach ($products as $product) { ?>
<!-- make the checkbox or something to all the user to pick the product and quantity -->
<?php } ?>
Your best bet is a plugin that is already done, you can see a demo here for example:
http://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/
You can find the source code and tutorial here:
http://www.webresourcesdepot.com/dynamic-dragn-drop-with-jquery-and-php/
I use these quite often and work really well.
Things worth remembering and noting:
I would add a handler (a button of a sort) to grab the line and move it around. This will allow you to add input fields and other info on the rest of the bar.
Don't forget to add a order field in your DB or array. So that when it gets reorganised, it can be stored.
I hope this helps.