We Keep Coding

Send multiple fields on form

I am developing a system for equipment rental in PHP.
I need to send a form that contains the id, quantity, time and value fields of the selected equipment.
Each rent can have N equipments, consequently N amount of fields.
How do I do this? Do I generate the fields by javascript? To send, an array for each piece of equipment?
It would be something like that:
<input type='text' name='equipment[]'>
<input type='text' name='quantity[]'>
<input type='text' name='time[]'>
But how would I do it like this:
array(array[0](equipment=>1,quantity=>2,time=>4),array[1](equipment=>2,quantity=>2,time=>4),array[2](equipment=>1,quantity=>2,time=>4));

I think you could group by rental doing like this:
<div id="rental_group_1">
<input type="text" name="rent_1[]" id="equipment_1">
<input type="text" name="rent_1[]" id="quantity_1">
<input type="text" name="rent_1[]" id="time_1">
</div>
<div id="rental_group_2">
<input type="text" name="rent_2[]" id="equipment_2">
<input type="text" name="rent_2[]" id="quantity_2">
<input type="text" name="rent_2[]" id="time_2">
</div>...
This way you will get on Post an array per group so:
$rent_1[0] = equipment_1
$rent_1[0] = quantity_1
$rent_1[0] = time_1
...
Adding this to #Blesson Christy solution will create a good UI/UX for what you want.
Hope it helps! :D

A small example :
HTML:
<div id="content">
<input type="text" class="fieldone" id="fields_1" name="fields[]"/>
</div><input type="button" id="addmore" />
Jquery:
counter=1;
$(document).on('click','#addmore',function(){
counter++;
var htmltoadd='<input type="text" class="fieldone" id="fields_"'+counter+' name="fields[]"/>';
$("#content").append(htmltoadd);
});
You need to include jquery in this example.

Cannot validate user input correctly from server?

How do I check multiple variable inputs at once to ensure that the regex is working? Everytime I enter anything, the form submits and doesn't alert anything.
I have tried test()method of regex validation too, and still no luck.
I am trying to validate user input with the following regex that makes to where anything that is not a number or blank space is considered a wrong input.
var format=/^(\s*|\d+)$/;
It only accepts numbers and blank spaces in the text box.
The following javascript is what I have:
var pitch = document.getElementById("pitch");
var chisel = document.getElementById("chis");
var saw = document.getElementById("saw");
//var arguments = [chisel, saw, pitch];
var format = /^(\s*|\d+)$/;
function regexTest() {
if (!chisel.match(format) && !saw.match(format) && !pitch.match(format)) {
alert("Repressed Action");
return false;
} else {
alert('Thank you');
}
}
<div class="lab">
<form method="post" action="http://weblab.kennesaw.edu/formtest.php">
Chisels: <input type="text" name="chisels" id="chis" size="5" /> Saw: <input type="text" name="saw" id="saw" size="5" /> Pitchfork: <input type="text" name="pitchfork" id="pitch" size="5" />
<br /> Customer Name: <input type="text" name="customer name" size="25" />
<br /> Shipping Address: <input type="text" name="shipping address" size="25" />
<br /> State:
<input type="radio" id="master" name="card" value="master" /><label for="master">MasterCard</label>
<input type="radio" id="american" name="card" value="american" /><label for="american">American Express</label>
<input type="radio" id="visa" name="card" value="visa" /><label for="visa">Visa</label>
<br />
<input type="reset" value="Reset" />
<div class="lab">
<button onclick="regexTest()">Submit</button>
<button onclick="return false">Cancel</button>
</div>

There are a number of issues with your code, below I've refactored it to be a bit easier to read and so it works.
The validation listener should be on the form's submit handler, not the submit button since forms can be submitted without clicking the button. Also, if you pass a reference to the form to the listener, it's much easier to access the form controls by name.
You should get the values of the form controls when the submit occurs, not before. Your code gets the values immediately, before the user has done anything (and possibly before the form even exists), so put that code inside the listener function.
Lastly, the regular expression needs to match anything that isn't a space or digit, so:
/[^\s\d]/
seems appropriate. However, this will still allow the form to submit if the fields are empty (they don't contain non-digits or non-spaces). You'll need to add a test for that.
function regexTest(form) {
// Get values when the function is called, not before
var pitch = form.pitchfork.value;
var chisel = form.chisels.value;
var saw = form.saw.value;
// Test for anything that's not a space or digit
// var format = /^(\s*|\d+)$/;
var format = /[^\s\d]/;
if (format.test(chisel) || format.test(pitch) || format.test(saw)) {
// There must be at least one non-space or non-digit in a field
alert("Repressed Action");
return false;
} else {
alert('Thank you');
// return false anyway for testing
return false;
}
}
<div class="lab">
<form onsubmit="return regexTest(this)">
Chisels: <input type="text" name="chisels" id="chis" size="5"><br>
Saw: <input type="text" name="saw" id="saw" size="5"><br>
Pitchfork: <input type="text" name="pitchfork" id="pitch" size="5"><br>
Customer Name: <input type="text" name="customer name" size="25"><br>
Shipping Address: <input type="text" name="shipping address" size="25">
<br> State:
<select name="states">
<option>Florida</option>
<option>Georgia</option>
<option>Alabama</option>
</select>
<br>
<input type="radio" id="master" name="card" value="master"><label for="master">MasterCard</label>
<input type="radio" id="american" name="card" value="american"><label for="american">American Express</label>
<input type="radio" id="visa" name="card" value="visa"><label for="visa">Visa</label>
<br>
<input type="reset" value="Reset">
<div class="lab">
<button>Submit</button>
<button onclick="return false">Cancel</button>
</div>
Hopefully this gets you to the next step.

Simple Gallon Calculator

I'm attempting to build a simple web form that takes 3 number inputs and outputs one number based on this formula: (a*b*c)/271).
This is the code I have but nothing is displayed in the output.
Clearly I have almost no clue what I'm doing.
I appreciate all help:
<body>
<img id="logo"src="images/a&l.png" alt="A&L Cesspool"/>
<h1>Grease Trap Gallon Calculator<h2>
<form name=calculator">
<input label="length" type="number" id="a">
<input label="width" type="number" id="b">
<input label="height" type="number" id="c">
<input type=Button value=Calculate onClick="gallons();">
<input name="OUTPUT" id="output" SIZE="4" maxlength="6" >
</form>
<script language="JavaScript" type="text/javascript">
<!--
function gallons() {
var LENGTH = document.calculator.a.value;
var WIDTH = document.calculator.b.value;
var HEIGHT = document.calculator.c.value;
var Total =(LENGTH*WIDTH*HEIGHT)/271;
document.calculator.OUTPUT.value = Total;
}
// -->
</script>

document.forms.calculator. There's no such thing as document.calculator. Also, form elements need name attributes to refer to them in form context, not IDs.
In other news
You have unclosed quotes
You have irregular naming conventions (OUTPUT, a, Total)
You have irregular quotes policy (sometimes you have, sometimes you don't).
So basically
<form name="calculator">
<input label="length" type="number" name="a">
<input label="width" type="number" name="b">
<input label="height" type="number" name="c">
<input type=Button value=Calculate onClick="gallons();">
<input name="OUTPUT" id="output" SIZE="4" maxlength="6">
</form>
function gallons() {
var LENGTH = document.forms.calculator.a.value;
var WIDTH = document.forms.calculator.b.value;
var HEIGHT = document.forms.calculator.c.value;
var Total = (LENGTH * WIDTH * HEIGHT) / 271;
document.forms.calculator.OUTPUT.value = Total;
}
Please grab a proper tutorial from MDN or some similar good source, and start reading.

Your call to document.calculator is not finding the element because its looking by id
change your form definition and it will work
<form name="calculator" id="calculator">

getElementById Not Working Returns NULL

I'm trying to pull a dynamic page value as a JS VAR. It returns NaN. Not sure why.
function calculate(inputString) {
var tendered=inputString;
var curTotal=document.getElementById("total2");
x=tendered-curTotal;
y=(Math.round(x * 100) / 100).toFixed(2);
if (y > 0) $(".submit").show();
if (y < 0) {
y="<font color='red'>Customer Still OWES: ".concat(y.replace('-','')).concat("</font>");
$(".submit").hide();
}
$('#change').html(y);
document.getElementById('changeowed').value = y;
}
The function is called onkeyup entering the amount tendered.
HTML:
<div class="overlay">
<div class="border">
<div class="cashform">
<center>
<h1>Cash Payment</h1><br>
<form name="cash" action="sale.php" method="post">
<h2>Amount Due: <font color="green"><b><div id="total2"></div></b></font></h2>
<h2>Amount Tendered: <input type="text" id="tendered" name="tendered" size="10" onkeyup="calculate(this.value)"></h2>
<h2>Change Owed<font color="green"><b><div id="change"></div></b></font></h2>
<br><br><br>
<input type="hidden" name="action" value="cash" />
<input type="hidden" name="total" value="<?php echo $total; ?>" />
<input type="hidden" id="changeowed" name="changeowed" />
<input type="hidden" name="sid" value="<?php echo $sid; ?>" />
<input type="submit" name="submit" value="Submit" class="submit"> || <input type="button" value="Cancel" class="cancel">
</form>
</center>
</div>
</div>
I have tried with the JS above and below the HTML.
I say the value (element) is dynamic because it changes based on the transaction (page is not reloaded when scanning items into the sale or deleting items from the sale). Adding or deleting items to or from the sale calls a JS POST function.

document.getElementById("total2") returns an DOM object. Thus, curTotal is an object.
Therefore, tendered - curTotal is a string minus an object, which yields NaN. The string might be able to be coerced into a number, but the DOM object definitely cannot.
Perhaps you meant to do document.getElementById("total2").value (assuming #total2 is an input element), which would make tendered - curTotal a string minus a string, which is more likely to succeed.
(As a best practice, you should convert your numerical input to numbers; e.g., parseInt(inputString, 10) or parseFloat(inputString, 10).)

How can I automatically calculate a payment on page load using javascript?

I want to calculate loan payment automatically, after loading a page. For the payment calculation I have javascript function calculatePayment(field.form).
I have four variables, which can be changed by users. By default I am going to use information from the current post (E.g. price of the car, 5.5% interest, 5 years, 10% downpayment from the car price):
<p><label class="loan-title" for="l-amount"><?php _e('PRICE: '.$symbols['currency'].'','language')?></label>
<input type="text" size="10" name="price" value="<?php if ( $fields['price']){ echo $fields['price'];} else { echo '0'; };?>" class="l-inputbar" id="l-amount" onBlur="checkForZero(this)" onChange="checkForZero(this)"></p>
<p><label class="loan-title" for="l-down"><?php _e('DOWNPAYMENT: '.$symbols['currency'].'','language')?></label>
<input type="text" size="10" name="dp" id="l-down" class="l-inputbar" value="<?php if ( $fields['price']){ echo $fields['price']*0.1;} else { echo '0'; };?>" onChange="calculatePayment(this.form)"></p>
<p><label class="loan-title" for="l-amount"><?php _e('PROCENTU LIKME: %','language')?></label>
<input type="text" size="5" name="ir" value="5.5" class="l-inputbar" onBlur="checkForZero(this)" onChange="checkForZero(this)"> </p>
<p><label class="loan-title" for="l-amount"><?php _e('PERIOD: (years) ','language')?></label>
<input type="text" size="4" name="term" value="5" class="l-inputbar" onBlur="checkForZero(this)" onChange="checkForZero(this)"> </p>
<p class="calculate-wrapper"><input type="button" name="cmdCalc" value="" class="calculate-btn" onClick="cmdCalc_Click(this.form)" onLoad="calculatePayment(this.form)" ></p>
<p><label class="loan-title" for="l-amount"><?php _e('MONTHLY PAYMENT: '.$symbols['currency'].'','language')?></label>
<input type="label" size="12" class="l-inputbar" name="pmt"></p>
All the data loads into input fields, but I can't find the solution how to calculate the payment on page load. I have tried all the javascript function calls. Nothing seems to work.

You could use jQuery's document.ready() or *$(function(){ / * your stuff here * / })* which does the check, whether the document is loaded and rendered. It's a bit more complex than window.onload, so I would recommend you to use a framework (anyway).