We Keep Coding

web2py How to add id to submit_button

In my html file, I'm adding two forms, each with their own submit_button. I have a text input in one of the forms and want to make it required to be not blank but it doesn't seem to work...
userQueryForm = SQLFORM.factory(
Field('userQuery', label='', requires=IS_NOT_EMPTY() ),
submit_button = T('Generate Report')
)
The html that gets rendered is as follows
<td class="w2p_fw">
<input class="string" id="no_table_userQuery" name="userQuery" type="text" value="">
</td>
...
<tr id="submit_record__row">
<td class="w2p_fl"></td>
<td class="w2p_fw">
<input type="submit" value="Generate Report" class="btn">
</td>
</tr>
I want my <input> to have an id so i can access it in Jquery...
My ultimate goal is to not allow the form to be subitted if the text

You can access the submit button server-side DOM element via userQueryForm.custom.submit, so to add an id attribute:
userQueryForm.custom.submit.update(_id='submit_button')
Alternatively, there are other methods to access the submit button via jQuery rather than relying on an id. For example:
jQuery('input[value="Generate Report"]')

JavaScript confirm when a dynamic HTML field is selected within a form

My PHP file echoes results from a data query as a form-table so the user can edit the records. The table will contain up to 30 records. When the form is submitted, if the VoidTag checkbox is selected, I need the user to confirm this action, otherwise the form can submit without the confirm box. I have very little JavaScript experience and have no idea how to do it.
<tr>
<td class="count gridtable">
<input type="text" class="tableTxt" name="inv[1091][Count]"/>
</td>
<td class="count gridtable">
<input type="text" class="count" name="inv[1091][Notes]" value=""/>
</td>
<td class="count gridtable">
<input type="text" class="tableTxt" name="inv[1091][CountedBy]" value=""/>
</td>
<td class="count gridtable">
<input type="checkbox" class="center" name="inv[1091][VoidTag]"/>
<input type="hidden" class="center" name="inv[1091][TagNum]"/>
</td>
</tr>

The other question thread is slightly different, but points you in the right direction, in regards to using a confirmation dialog:
First, I'm assuming that you have a form wrapped around all of these form elements in your table rows . . . you will have to give that form an onsubmit action to return the result of the confirmation function:
<form onSubmit="return confirmSubmit(this);">
Then, use the following function to confirm the submission, based on the presence of any checked checkboxes:
function confirmSubmit(theForm) {
if (theForm.querySelectorAll('input:checked').length > 0) {
return confirm('Do you really want to **insert question criteria here**?')
}
else {
return true;
}
}
When the user submits the form, the code will check to see if there are any "checked" checkboxes in the form (I'm also assuming that there are no other checkboxes or radio buttons in the form, outside of the ones that you want to check in each row). If it finds at least one checked checkbox, it will ask the user to confirm that they want to submit. If they choose "Cancel", it will return false, stopping the form submission . . . in all other cases, it will return true, allowing the submission to continue.
If there ARE other checkboxes or radio buttons in the form, the .querySelectorAll() parameter would need to be changed to accomodate for that, including (potentially) assigning a common class to all of the checkboxes that need to be included in the validation logic.

Reset button does not clear fields in HTML5

I have a page which reads from a file and displays filtered results depending on what is entered in the search boxes. When I click the reset button it clears the search boxes which is what I want, but I also want the filtered results to be cleared too. If I uncomment the call below, which is commented at the moment - it works but the search boxes do not clear.
HTML:
<form>
<ul data-bind="foreach:properties">
<li><input data-bind="attr:{placeholder:id},event:{change:$root.onInputChange}, value:value, valueUpdate: 'afterkeydown'" /></li>
</ul>
<input type="reset" value="Reset"/>
<!--<input type="reset" value="Reset" data-bind="click:$root.onclick"/>-->
</form>
<p></p>
<table data-bind="foreach:itemsFiltered">
<tr data-bind="foreach:$parent.formatItem($data)">
<td data-bind="text:value"></td>
</tr>
</table>
I need the search boxes and filtered results to clear.

Resetting a form resets the fields in it back to their default values (as specified by the value attribute). It doesn't clear the fields unless the default values are blank.
Your JavaScript is setting value attributes.
If you want to blank the fields, you'll need to set their value property to an empty string instead of simply resetting the form.

How to enable HTML elements on submit

I have a checkbox and a few input elements related to this checkbox as shown below
<input name="balanceFeaturesOn" id="balanceFeaturesOn" type="checkbox" disabled="disabled" checked="" />Control
<input name="IntervalDays26566521" type="Text" onclick="" onchange="" value=" 31 ">
<input name="IntervalHours26566521" type="Text" onclick="" onchange="" value=" 12 ">
For some reasons, I will have to keep my checkbox always disabled.
On the submit of above form (Say that the checkbox and inputs are inside a form), in the server code, I want to grab the text inputs based on if the checkbox was checked/unchecked. However since the checkbox is disabled, the request parameter does not contain the balanceFeaturesOn property.
So when I execute the below line:
String[] balanceFeatArr = request.getParameterValues("balanceFeaturesOn");
I am not getting any value...
So my question is how do I be able to get the value of the checkbox while still keeping it disabled on the UI?

Try the following code,
In the form use javascript function to submit the form,
<input type='submit' onclick='javascript:submitMe()' />
Javascript function,
function submitMe(){
$('#balanceFeaturesOn').removeAttr('disabled');
$('#formId').submit(); //Replace with the actual id of the form
}
Make sure you have included jquery library in your code.

Use Hidden Fields.
Hidden fields are similar to text fields, with one very important difference!
The difference is that the hidden field does not show on the page. Therefore the visitor can't type anything into a hidden field, which leads to the purpose of the field:
To submit information that is not entered by the visitor.
http://www.echoecho.com/htmlforms07.htm

Enable and disable form fields in Safari

I am trying to enable and disable a field using Javascript, works fine on IE but does not work on Safari.
FIELDS
If yes is clicked, should enable free text below, else disabled.
<tr id="ContainerQ1266I1396">
<td>Ultrasound Used</td>
<td>
<input type="radio" name="Q1266I1396" id="Q1266I13960" onclick="">No</input>
<input type="radio" name="Q1266I1396" id="Q1266I13961" onclick="regft();">Yes</input>
</td>
</tr>
<tr id="ContainerQ1267I1276">
<td>fretext</td>
<td>
<input id="Q1267I1276" type="text"size="80" />
</td>
</tr>
JAVASCRIPT
function regft(){
var regf=document.getElementById("Q1266I13961");
document.getElementById("ContainerQ1267I1276").disabled=true;
if (regf.checked==true){
document.getElementById("ContainerQ1267I1276").disabled=false;
}
}

First off the radio buttons don't seem to be in the same group - if you want them to be mutually exclusive options (which is what radio buttons mostly get used for) you could give them the same "name" attribute. See this tutorial for example: http://www.w3schools.com/jsref/dom_obj_radio.asp
Second, I think you are setting the disabled property on the tr element instead of the input element. Try:
document.getElementById("Q1267I1276").disabled=false;