I'm trying to get a form to output a number value based on the outcome of two fields. A value input and a radio selection but I can't seem to get it to work.
<form oninput="retVal.value=parseInt(pavVal.value)-(parseInt(pavVal.value)*parseInt(pavCAT.value))">
<table>
<tr>
<td>
<label for="pavVal"><b>PAV:</b></label>
</td>
<td>
<input type="number" id="pavVal">
</td>
</tr>
<tr>
<td>
<label for="pavCAT" ><b>CAT:</b></label>
<td>
<input type="checkbox" name="pavCAT" id="pavCAT" value="0.3">
<label for="0.3" > N (30%)</label>
<input type="checkbox" name="pavCAT" id="pavCAT" value="0.2">
<label for="0.2" > S (20%)</label>
<input type="checkbox" name="pavCAT" id="pavCAT" value="0.1">
<label for="0.1"> B (10%)</label>
</td>
</tr>
<tr>
<td>
<label for="retVal"><b>Retention Value:</b></label>
</td>
<td>
<output name="retVal" for="pavVal pavCAT"></output>
</td>
</tr>
</table>
</form>
Anyone able to tell me where I'm going wrong>
Ids must be unique -- there were three #pavCAT. When the browser is told to do anything with #pavCAT, it will find the first #pavCAT do whatever it was supposed to do then quit, leaving the other 2 #pavCATs untouched as if they never existed. The easiest solution is to suffix each id with a number.
The rest of the code should work since in this case the id #pavCAT is just as accessible as the name [name="pavCAT"].
Also, the HTML had checkmarks not radios.
The inline event handler is now streamlined:
oninput = "retVal.value = pavVal.value - (pavVal.value * pavCAT.value)"
Note that parseInt() isn't used to convert the string values into numbers. That's because the strings are being coerced into numbers by the use of these operators: - and *.
<form id='calc' oninput = "retVal.value = pavVal.value - (pavVal.value * pavCAT.value)">
<table>
<tr>
<td>
<label for="pavVal"><b>PAV:</b></label>
</td>
<td>
<input id="pavVal" type="number">
</td>
</tr>
<tr>
<td>
<label for="pavCAT"><b>CAT:</b></label>
</td>
<td>
<input id="pavCAT3" name="pavCAT" type="radio" value="0.3">
<label for="pavCAT3"> N (30%)</label>
<input id="pavCAT2" name="pavCAT" type="radio" value="0.2">
<label for="pavCAT2"> S (20%)</label>
<input id="pavCAT1" name="pavCAT" type="radio" value="0.1">
<label for="pavCAT1"> B (10%)</label>
</td>
</tr>
<tr>
<td>
<label for="retVal"><b>Retention Value:</b></label>
</td>
<td>
<output name="retVal" for="pavVal pavCAT"></output>
</td>
</tr>
</table>
</form>
Your formula is working, but you assigned the same ID for the pavCat checkbox elements, thus returning NaN and not the correctly assigned value - try it yourself with removing/commenting out two ot the pavCAT elements.
imho is a checkbox the wrong UI element - go for a single select dropdown or even better a radio input.
Also parseInt should be parseFloat instead for pavCat. Anyways it's a little bit over the top in this situation and you could totally remove it in this simple example - maybe you have more context to justify parsing it.
<input type="radio" id="pavCat1" name="pavCAT" value="0.3">
<label for="0.3" > N (30%)</label>
<input type="radio" id="pavCat2" name="pavCAT" value="0.2">
<label for="0.2" > S (20%)</label>
<input type="radio" id="pavCat3" name="pavCAT" value="0.1">
<label for="0.1"> B (10%)</label>
https://jsfiddle.net/p9v1f53w/16/
I have a page where there is a table. In each row of the table, there is data about an online grocery delivery order. At the end of each row, there is a submit button about action to be performed on the order and the form ends there. A new form begins with the next row <tr>
Where exactly should I put the <form> and </form> tags? Should I put the <form> before each <tr> and </form> after the </tr> or should I introduce them in the first data cell <td> of each row and close in the last <td>?
I mean, the page would probably function all right in both ways, but what is "proper" way of doing this? Right now mozilla code view is showing the table tag in red color.
This is how it looks right now.
And this is the relevant part of the php code I am using to dynamically generate a new form for each table row. I am posting this just for the sake of reference, because this does not matter at all here. My question is basic HTML based, not php based.
for($i=0;$i<$count;++$i){
$res.='<form action="" method="post">' ."\n" .'<input type="hidden" name="orderid" value="' .$orders[$i]->idcode .'" />';
$res.="$nt<tr><td align=\"center\">" .$orders[$i]->display("pe","</td><td align=\"center\">") ."</td>$nt\t<td align=\"center\"><select name=\"agent\">$alistcode</select></td>$nt\t<td align=\"center\"><select name=\"vendor\">$vlistcode</select></td>";
$res.="$nt\t<td align=\"center\"><input type=\"submit\" value=\"PROCESS\" /></td>\n</tr>\n</form>\n";
}
$res.="</table>";
echo $res;
HTML5 offers decent solution for your problem. And its name is form attribute. Just put the form into last <td> and refer to its id from other inputs. See example.
<table>
<tr>
<td>
<input type="text" name="inp1" form="form1" />
</td> <!-- ^^^^ ^^^^^ -->
<td>
<form id="form1" method="get" action="/">
<!-- ^^ ^^^^^ -->
<input type="submit" name="submit1" value="submit" />
</form>
</td>
</tr>
<tr>
<td>
<input type="text" name="inp2" form="form2" />
</td>
<td>
<form id="form2" method="get" action="/"><input type="submit" name="submit2" value="submit" /></form>
</td>
</tr>
</table>
If using javascript is an option, you can work without <form> tags?
I used jQuery in this example, data is posted to itself (first argument of $.post()).
Table
<table>
<tbody>
<tr>
<td><input name="inputfield[]" type="text" value="input1" /></td>
<td><select name="selectfield[]">
<option selected value="select1-option1">select1-option1</option>
<option value="select1-option2">select1-option2</option>
<option value="select1-option3">select1-option3</option>
</select></td>
<td><a class="submit">Update</a></td>
</tr>
<tr>
<td><input name="inputfield[]" type="text" value="input2" /></td>
<td><select name="selectfield[]">
<option selected value="select2-option1">select2-option1</option>
<option value="select2-option2">select2-option2</option>
<option value="select2-option3">select2-option3</option>
</select></td>
<td><a class="submit">Update</a></td>
</tr>
<tr>
<td><input name="inputfield[]" type="text" value="input3" /></td>
<td><select name="selectfield[]">
<option selected value="select3-option1">select3-option1</option>
<option value="select3-option2">select3-option2</option>
<option value="select3-option3">select3-option3</option>
</select></td>
<td><a class="submit">Update</a></td>
</tr>
</tbody>
</table>
Script
$(".submit").on("click", function(){
var row = $(this).parents("tr");
$.post("", row.find("input, select, radio").serialize(), function(data){ console.log(data); });
});
JSFiddle
I am OK at html but new to PayPal.
I want to be able to use a Paypal button directly from my site without having to use a third party shopping cart.
The only problem I have is that I am in the UK and Paypal do not offer postage/shipping options here dependent on where you are shipping to. So for instance PayPal's standard buttons would not allow me to charge different postage whether I was sending the product to the US or just a nearby town.
They allow you to add postage/shipping dependent on the value of the cart only.
So I have been looking at the html variables available for the buttons here https://developer.paypal.com/docs/classic/paypal-payments-standard/integration-guide/Appx_websitestandard_htmlvariables/#id08A6HH0D0TA and at posts on Stackoverflow
I wondered if there was any way of combining the option value.. and ="handling_cart" to do this – please see my working below.
So you would click the add to cart button and from the drop down select the shipping area e.g. UK, Europe, Rest of World. The handling charge on the cart would then reflect the option you chose. Instead of the handling cart value being NNNN it would be the value specified for the option, so for Europe £5.00.
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="DLNKFJWJGHZFW">
<table>
<tr><td><input type="hidden" name="on0" value="Shipping Options">Shipping Options</td></tr><tr><td><select name="os0">
<option value="UK Second Class + £2.85">UK Second Class + £2.85 £2.85 GBP</option>
<option value="UK First Class + £3.85">UK First Class + £3.85 £3.85 GBP</option>
<option value="Europe + £5.00">Europe + £5.00 £5.00 GBP</option>
<option value="Rest of World + £7.00">Rest of World + £7.00 £7.00 GBP</option>
</select> </td></tr>
<tr><td><input type="hidden" name="on1" value="or call us on +44(0)444444444">or call us on +44(0)444444444</td></tr><tr><td><input type="text" name="os1" maxlength="200"></td></tr>
</table>
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="handling_cart" value="NNNN">
<input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>
Secondary question: this html gets a straight error from PayPal, probably – among other things - because I am still calling it a hosted button (I think I might need to remove this and somehow link it to the Merchant ID???).
Note I have altered the hosted button id here as I was concerned about security - I might not need to be.
Many Thanks
Allyson
Your hosted button is not formatted correctly to handle the shipping drop down. Also you cannot modify a hosted button it will not work. I have created some sample non-hosted button code as an example of what will work if the shipping calculator is not available in your region.
You will have to update the business value to reflect your merchant id or your email address to test the button code.
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" >
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="youremail#email.com">
<input type="hidden" name="lc" value="GB">
<input type="hidden" name="item_name" value="Shipping Options">
<input type="hidden" name="button_subtype" value="products">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="cn" value="Add special instructions to the seller:">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="add" value="1">
<input type="hidden" name="bn" value="PP-ShopCartBF:btn_cart_LG.gif:NonHosted">
<table>
<tr><td><input type="hidden" name="on0" value="Shipping Options">Shipping Options</td></tr><tr><td><select name="os0">
<option value="UK Second Class">UK Second Class £2.85 GBP</option>
<option value="UK First Class">UK First Class £3.85 GBP</option>
<option value="Europe">Europe £5.00 GBP</option>
<option value="Rest of World">Rest of World £7.00 GBP</option>
</select> </td></tr>
<tr><td><input type="hidden" name="on1" value="or call us on +44(0)444444444">or call us on +44(0)444444444</td></tr><tr><td><input type="text" name="os1" maxlength="200"></td></tr>
</table>
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="option_select0" value="UK Second Class">
<input type="hidden" name="option_amount0" value="2.85">
<input type="hidden" name="option_select1" value="UK First Class">
<input type="hidden" name="option_amount1" value="3.85">
<input type="hidden" name="option_select2" value="Europe">
<input type="hidden" name="option_amount2" value="5.00">
<input type="hidden" name="option_select3" value="Rest of World">
<input type="hidden" name="option_amount3" value="7.00">
<input type="hidden" name="option_index" value="0">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
I've following form
<form method="post" action="getParameterValuesServlet">
<table border="1">
<tr>
<td>User Name</td>
<td><input type="text" name="userName"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>Gender</td>
<td>
<input type="radio" name="gender" value="male">Male<br>
<input type="radio" name="gender" value="female">Female<br>
</td>
</tr>
<tr>
<td>Hobbies</td>
<td>
<input type="checkbox" name="hobbies" value="cycling">Cycling<br>
<input type="checkbox" name="hobbies" value="swimming">Swimming<br>
<input type="checkbox" name="hobbies" value="treking">Treking<br>
</td>
</tr>
<tr>
<td>City</td>
<td>
<select name="city" multiple>
<option value="mysore">Mysore</option>
<option value="pune">Pune</option>
<option value="chandigarh">Chandigarh</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Register"></td>
</tr>
</table>
</form>
When I submit this form without entering or selecting any values, I see only blank userName and password (text & password) in post body (same is the case with GET query string)
Why don't radio button, check box and drop down values get submitted with default values?
One more thing, if I remove "multiple" attribute from "select" tag, the first option gets submitted.
Would be thankful, if someone explains this behavior!!
FYI, I'm using Fiddler Web Debugger tool to trace the request and response and submitting this form to a Java Servlet
What default values do you imagine would be sent?
The only values that get sent are the selected options; since no options are selected, there's nothing to send.
That's in contrast to text and password controls, which always have a value, even if that value is the empty string.
You can use a hidden field with a fallback value, if a checkbox in a form is submitted unchecked:
<input type="hidden" name="hobbies" value="">
<input type="checkbox" name="hobbies" value="swimming">Swimming<br>
This seems to work also with radio buttons:
<input type="hidden" name="gender" value="">
<input type="radio" name="gender" value="male">Male<br>
<input type="radio" name="gender" value="female">Female<br>
I can best describe this as follows:
I want this (entire table in editmode and save button in every row).
<table>
<tr>
<td>Id</td>
<td>Name</td>
<td>Description</td>
<td> </td>
</tr>
<tr>
<td><input type="hidden" name="id" value="1" /></td>
<td><input type="text" name="name" value="Name" /></td>
<td><input type="text" name="description" value="Description" /></td>
<td><input type="submit" value="Save" /></td>
</tr>
<tr>
<td><input type="hidden" name="id" value="2" /></td>
<td><input type="text" name="name" value="Name2" /></td>
<td><input type="text" name="description" value="Description2" /></td>
<td><input type="submit" value="Save" /></td>
</tr>
<!-- and more rows here ... -->
</table>
Where should I put the <form> tags?
It's worth mentioning that this is possible in HTML5, using the "form" attribute for input elements:
<table>
<tr>
<td>Id</td>
<td>Name</td>
<td>Description</td>
<td> </td>
</tr>
<tr>
<td><form id="form1"><input type="hidden" name="id" value="1" /></form></td>
<td><input form="form1" type="text" name="name" value="Name" /></td>
<td><input form="form1" type="text" name="description" value="Description" /></td>
<td><input form="form1" type="submit" value="Save" /></td>
</tr>
<tr>
<td><form id="form2"><input type="hidden" name="id" value="1" /></form></td>
<td><input form="form2" type="text" name="name" value="Name" /></td>
<td><input form="form2" type="text" name="description" value="Description" /></td>
<td><input form="form2" type="submit" value="Save" /></td>
</tr>
</table>
While clean in its lack of JS and use of original elements, unfortunately this isn't working in IE10.
I had a similar question and this answer in question HTML: table of forms? solved it for me. (Not sure if it is XHTML, but it works in an HTML5 browser.)
You can use css to give table layout to other elements.
.table { display: table; }
.table>* { display: table-row; }
.table>*>* { display: table-cell; }
Then you use the following valid html.
<div class="table">
<form>
<div>snake<input type="hidden" name="cartitem" value="55"></div>
<div><input name="count" value="4" /></div>
</form>
</div>
You can't. Your only option is to divide this into multiple tables and put the form tag outside of it. You could end up nesting your tables, but this is not recommended:
<table>
<tr><td><form>
<table><tr><td>id</td><td>name</td>...</tr></table>
</form></td></tr>
</table>
I would remove the tables entirely and replace it with styled html elements like divs and spans.
I wrote the below over ten years ago, when the world was a different place. These days I know of many ways to crack this particular nut, but a quick and dirty solution that will validate is to do much the same but use CSS tables for layout, not a regular HTML table.
I'd say you can, although it doesn't validate and Firefox will re-arrange the code (so what you see in 'View generated source' when using Web Developer may well surprise). I'm no expert, but putting
<form action="someexecpage.php" method="post">
just ahead of the
<tr>
and then using
</tr></form>
at the end of the row certainly gives the functionality (tested in Firefox, Chrome and IE7-9). Working for me, even if the number of validation errors it produced was a new personal best/worst! No problems seen as a consequence, and I have a fairly heavily styled table. I guess you may have a dynamically produced table, as I do, which is why parsing the table rows is a bit non-obvious for us mortals. So basically, open the form at the beginning of the row and close it just after the end of the row.
The answer of #wmantly is basicly 'the same' as I would go for at this moment.
Don't use <form> tags at all and prevent 'inappropiate' tag nesting.
Use javascript (in this case jQuery) to do the posting of the data, mostly you will do it with javascript, because only one row had to be updated and feedback must be given without refreshing the whole page (if refreshing the whole page, it's no use to go through all these trobules to only post a single row).
I attach a click handler to a 'update' anchor at each row, that will trigger the collection and 'submit' of the fields on the same row. With an optional data-action attribute on the anchor tag the target url of the POST can be specified.
Example html
<table>
<tbody>
<tr>
<td><input type="hidden" name="id" value="row1"/><input name="textfield" type="text" value="input1" /></td>
<td><select name="selectfield">
<option selected value="select1-option1">select1-option1</option>
<option value="select1-option2">select1-option2</option>
<option value="select1-option3">select1-option3</option>
</select></td>
<td><a class="submit" href="#" data-action="/exampleurl">Update</a></td>
</tr>
<tr>
<td><input type="hidden" name="id" value="row2"/><input name="textfield" type="text" value="input2" /></td>
<td><select name="selectfield">
<option selected value="select2-option1">select2-option1</option>
<option value="select2-option2">select2-option2</option>
<option value="select2-option3">select2-option3</option>
</select></td>
<td><a class="submit" href="#" data-action="/different-url">Update</a></td>
</tr>
<tr>
<td><input type="hidden" name="id" value="row3"/><input name="textfield" type="text" value="input3" /></td>
<td><select name="selectfield">
<option selected value="select3-option1">select3-option1</option>
<option value="select3-option2">select3-option2</option>
<option value="select3-option3">select3-option3</option>
</select></td>
<td><a class="submit" href="#">Update</a></td>
</tr>
</tbody>
</table>
Example script
$(document).ready(function(){
$(".submit").on("click", function(event){
event.preventDefault();
var url = ($(this).data("action") === "undefined" ? "/" : $(this).data("action"));
var row = $(this).parents("tr").first();
var data = row.find("input, select, radio").serialize();
$.post(url, data, function(result){ console.log(result); });
});
});
A JSFIddle
You just have to put the <form ... > tag before the <table> tag and the </form> at the end.
Hopte it helps.
In fact I have the problem with a form on each row of a table, with javascript (actually jquery) :
like Lothre1 said, "some browsers in the process of rendering will close form tag right after the declaration leaving inputs outside of the element"
which makes my input fields OUTSIDE the form, therefore I can't access the children of my form through the DOM with JAVASCRIPT..
typically, the following JQUERY code won't work :
$('#id_form :input').each(function(){/*action*/});
// this is supposed to select all inputS
// within the form that has an id ='id_form'
BUT the above exemple doesn't work with the rendered HTML :
<table>
<form id="id_form"></form>
<tr id="tr_id">
<td><input type="text"/></td>
<td><input type="submit"/></td>
</tr>
</table>
I'm still looking for a clean solution (though using the TR 'id' parameter to walk the DOM would fix this specific problem)
dirty solution would be (for jquery):
$('#tr_id :input').each(function(){/*action*/});
// this will select all the inputS
// fields within the TR with the id='tr_id'
the above exemple will work, but it's not really "clean", because it refers to the TR instead of the FORM, AND it requires AJAX ...
EDIT : complete process with jquery/ajax would be :
//init data string
// the dummy init value (1=1)is just here
// to avoid dealing with trailing &
// and should not be implemented
// (though it works)
var data_str = '1=1';
// for each input in the TR
$('#tr_id :input').each(function(){
//retrieve field name and value from the DOM
var field = $(this).attr('name');
var value = $(this).val();
//iterate the string to pass the datas
// so in the end it will render s/g like
// "1=1&field1_name=value1&field2_name=value2"...
data_str += '&' + field + '=' + value;
});
//Sendind fields datawith ajax
// to be treated
$.ajax({
type:"POST",
url: "target_for_the_form_treatment",
data:data_string,
success:function(msg){
/*actions on success of the request*/
});
});
this way, the "target_for_the_form_treatment" should receive POST data as if a form was sent to him (appart from the post[1] = 1, but to implement this solution i would recommand dealing with the trailing '&' of the data_str instead).
still I don't like this solution, but I'm forced to use TABLE structure because of the dataTables jquery plugin...
Im late to the party, but this worked great for me and the code should explain itself;
<script type="text/javascript">
function formAJAX(btn){
var $form = $(btn).closest('[action]');
var str = $form.find('[name]').serialize();
$.post($form.attr('action'), str, function(data){
//do stuff
});
}
<script>
HTML:
<tr action="scriptURL.php">
<td>
Field 1:<input type="text" name="field1"/>
</td>
<td>
Field 2:<input type="text" name="field2" />
</td>
<td><button type="button" onclick="formAJAX(this)">Update</button></td>
</tr>
If you try to add a form warping a tr element like this
<table>
<form>
<tr>
<td><input type="text"/></td>
<td><input type="submit"/></td>
</tr>
</form>
</table>
some browsers in the process of rendering will close form tag right after the declaration leaving inputs outside of the element
something like this
<table>
<form></form>
<tr>
<td><input type="text"/></td>
<td><input type="submit"/></td>
</tr>
</table>
This issue is still valid for warping multiple table cells
As stereoscott said above, nesting tables are a possible solution which is not recommended.
Avoid using tables.
<table >
<thead >
<tr>
<th>No</th><th>ID</th><th>Name</th><th>Ip</th><th>Save</th>
</tr>
</thead>
<tbody id="table_data">
<tr>
<td>
<form method="POST" autocomplete="off" id="myForm_207" action="save.php">
<input type="hidden" name="pvm" value="207">
<input type="hidden" name="customer_records_id" value="2">
<input type="hidden" name="name_207" id="name_207" value="BURÇİN MERYEM ONUK">
<input type="hidden" name="ip_207" id="ip_207" value="89.19.24.118">
</form>
1
</td>
<td>
207
</td>
<td>
<input type="text" id="nameg_207" value="BURÇİN MERYEM ONUK">
</td>
<td>
<input type="text" id="ipg_207" value="89.19.24.118">
</td>
<td>
<button type="button" name="Kaydet_207" class="searchButton" onclick="postData('myForm_207','207')">SAVE</button>
</td>
</tr>
<tr>
<td>
<form method="POST" autocomplete="off" id="myForm_209" action="save.php">
<input type="hidden" name="pvm" value="209">
<input type="hidden" name="customer_records_id" value="2">
<input type="hidden" name="name_209" id="name_209" value="BALA BAŞAK KAN">
<input type="hidden" name="ip_209" id="ip_209" value="217.17.159.22">
</form>
2
</td>
<td>
209
</td>
<td>
<input type="text" id="nameg_209" value="BALA BAŞAK KAN">
</td>
<td>
<input type="text" id="ipg_209" value="217.17.159.22">
</td>
<td>
<button type="button" name="Kaydet_209" class="searchButton" onclick="postData('myForm_209','209')">SAVE</button>
</td>
</tr>
</tbody>
</table>
<script>
function postData(formId,keyy){
//alert(document.getElementById(formId).length);
//alert(document.getElementById('name_'+keyy).value);
document.getElementById('name_'+keyy).value=document.getElementById('nameg_'+keyy).value;
document.getElementById('ip_'+keyy).value=document.getElementById('ipg_'+keyy).value;
//alert(document.getElementById('name_'+keyy).value);
document.getElementById(formId).submit();
}
</script>