So within my grails application I have a form consisting of multiple fields. One of these fields is being named 'mandatory'. Currently it's a text field that allows one character to be inputted but I'd like the field to be a drop down with the option of blank, Y or N to be select-able.
This is how my text field for mandatory looks now:
<g:textField name="mandatory" maxlength="1" value="${templateInputInstance?.mandatory}"/>
This is what I have come up with for the dropdown:
<select name="mandatory" maxlength="1" value="${templateInputInstance?.mandatory">
<option>Y</option>
<option>N</option>
</select>
This allows me to select Y or N however when I hit submit at the bottom of the form the value for 'mandatory' isn't saved and shown in the show.gsp page.
Can someone tell me why that is?
If I understand You correctly, You want to set textField value depending on the select value?
If so,
You should use javascript, for example:
js:
...
$('#mandatory').change(function()
{
$('#textFieldMandatory').val($(this).val());
});
...
Yours html:
<g:textField name="textFieldMandatory" maxlength="1" value="${templateInputInstance?.mandatory}"/>
<select name="mandatory" maxlength="1" value="${templateInputInstance?.mandatory">
<option>Y</option>
<option>N</option>
</select>
Or if You want to set this value after submitting a form, You should use Ajax.
Edit
As Jamie write:
<g:select name="mandatory" from=" YN" maxlength="1" value="${templateInputInstance?.mandatory}"/>
solve the problem.
Related
At this point I'm just trying to getting the input from the form. When I hit submit it does nothing and show nothing in the terminal. I'm using Slim with Sinatra.
My two routes are
post '/user_search' do
puts params[:checkbox]
#slim :user_search_results
# commented because I just would like to see something in terminal.
end
get '/user_search_form' do
slim :user_search_form
end
I've tried creating a class for search as well as a helper method. None of those approaches have changed anything.
Finally here is the form. Granted I have some other forms that work find. Those use text fields, so maybe it is the checkboxes that are throwing things.
form method="POST" action="/user_search"
label for="mp3" mp3:
input type="checkbox" name="mp3" value="mp3"
label for="flac" flac:
input type="checkbox" name="flac" value="flac"
label for="ape" ape:
input type="checkbox" name="ape" value="ape"
label for="m4a" m4a:
input type="checkbox" name="m4a" value="m4a"
label for="jpg" jpg:
input type="checkbox" name="jpg" value="jpg"
label for="gif" gif:
input type="checkbox" name="gif" value="gif"
label for="png" png:
input type="checkbox" name="png" value="png"
input type="submit" value="Submit"
This is non database input. Just want to grab the params for a search method.
Wow, it all came down to indenting all the lines below action method. I also indented submit passed those above. Weird thing is other forms I have, have no indentation at all.
I have a bit of an issue, im trying to select a radio button in a data-tables data. Im able to filter the single data-tables row down to one so it's the only one appearing on the page...but i've tried page.choose, page.find(<xpath>), page.find(<css>), i've also tried doing all the previous within a certain css selection and I can't quite figure out what's left to try.
The relevant HTML is here, unfortunately as this is a work item I can't post everything. however I AM able to click on the label if I specify the id via:
find(:xpath, "//label[#for='approve_row_5']").click however this doesn't actually seem to 'select' the radio button. I've also tried doing a wait after I filter the data-table results
anyways, here is the HTML for the 2 radio buttons after the row has been filtered (the radio buttons reside in a column)
<td class=" align-middle">
<div class="radio">
<input type="radio" name="approve_deny_row_5" id="approve_deny_row_5_approve" value="person_approve" data-ui-verify-key="test_approve" data-ui-verify-title="2017-07-13 14:59:46 -0400">
<label for="approve_deny_row_5_approve">
<span>Approve</span>
</label>
</div>
<div class="radio">
<input type="radio" name="approve_deny_row_5" id="approve_deny_row_5_deny" value="person_deny" data-ui-verify-key="test_deny" data-ui-verify-title="2017-07-13 14:59:46 -0400" data-ui-verify-url="/irrelevant/stuff">
<label for="approve_deny_row_5_deny">
<span>Deny</span>
</label>
</div>
</td>
I thought about just finding the span by the text and clicking it, which passes....but doesn't actually select the radio button. Also I tried searching by the specific value selector as well via a find('input[value="test_approve"]').click but that had no luck either
Any ideas?
Assuming the actual radio inputs are visible on the page (and not hidden to allow for styling) the methods that should work for this are
choose("Approve")
choose("Deny")
or
choose("approve_deny_row_5_approve")
choose("approve_deny_row_5_deny")
If those tell you they can't find the elements then it's most likely the input elements are actually hidden (for styling reasons) and you should be able to use the
choose('Approve', allow_label_click: true)
which will click on the label element associated with the input rather than the input element. That should produce the same result (setting the radio button) unless the behavior you're looking for is based on JS looking for a click on a very specific element (rather than the change event on the input). If that happens to be the case then you need to figure out exactly what element the JS is looking for clicks on, or fix the JS to behave in a more intuitive manner.
Hi I tried adding a range from 1-10 to a field in my model and it caused 2 mini arrows to appear to the right of my editor field that increment and decrement the value inside by 1. I would like to know how to remove these arrows. Any advice would be great. Thanks
Instead of using #Html.Editor html helper, use #Html.TextBox, this will solve your problem.
Because the property type is integer, if you'r using #Html.Editor, it will generate html like below:
<input type="number" id="Data" />
Notice the input element type is number, if your browser support HTML 5, it will show two arrows to the right. It's an html 5 feature.
But, if you're using #Html.TextBox, it will generate html like below:
<input type="text" id="Data" />
This time the type is text, it will not show the arrows.
I am trying to use voice over in my web page.
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
First name: <input type="text" name="fname" tabindex="1"><br>
Second name: <input type="text" name="sname" tabindex="2"><br>
Third name: <input type="text" name="tname" tabindex="3"><br>
Last name: <input type="text" name="lhan" tabindex="4"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
If I open this page in a Iphone, First it reads " First name ".
I just clicked on "fname" textbox to enter any text then press the "Done" button of keypad.
Keypad disappears and then it automatically focus the "Third Name" textbox and read the text.
This behavior is not consistent.
Is it expected behavior?
How can I give order to the voice control ? (tabindex)
Thank you so much.
Not sure why you're using tabindex attribute? Most of the time, they're unnecessary - especially strictly positive values that will mess with natural tab order when browsers are in fact already doing fine with normal HTML code with links and form elements.
My advice: remove any tabindex attribute from your code, except for very special cases like a comment form in a forum where you want to type text into a textarea, then 1 or 2 tab, Enter and you're submitting your message regardless of buttons for inserting bbCode that could be placed between the textarea and the submit button.
At the slightest change in HTML code of your templates, the presence of tabindex will be forgotten, they won't be updated and it will break the tab order.
Relevant WCAG 2.0 Techniques:
F44: Failure (...) due to using tabindex to create a tab order that does not preserve meaning and operability
H4: Creating a logical tab order through links, form controls, and objects
other Techniques are linked from the ones above
Now about the rest of the code: labels of a form elements should be tagged with... label elements. Associating each label element to its respective form element (any input type - except submit, image and button one - and also any select and textarea) is done via identical values of for and id attributes:
<label for="blah">My label</label><textarea id="blah"></textarea>
JSFiddle of your code corrected
each form element and label is in its own paragraph element
label is added (around each form element so message of error or hint on the right of form element or below it can still be in the label
unique id added to each form element (I took the same value as name but whatever is a valid id is OK)
for attribute added to label with identical value as each id above
HTML code
<form action="demo_form.asp">
<p>
<label for="fname">First name: <input type="text" name="fname" id="fname"></label>
</p>
<p>
<label for="sname">Second name: <input type="text" name="sname" id="sname"></label>
</p>
<p>
<label for="tname">Third name: <input type="text" name="tname" id="tname"></label>
</p>
<p>
<label for="lhan">Last name: <input type="text" name="lhan" id="lhan"></label>
</p>
<p class="w300p txtright">
<input type="submit" value="Submit">
</p>
</form>
Relevant WCAG 2.0 Techniques:
H44: Using label elements to associate text labels with form controls
G131: Providing descriptive labels
F17: Failure (...) due to insufficient information in DOM to determine one-to-one relationships (e.g., between labels with same id) in HTML
F86: Failure (...) due to not providing names for each part of a multi-part form field, such as a US telephone number
The 5 seconds test to determine if label elements and for / id pairs are coded with accessibility in mind or not:
take a mouse
click on each text that should be a label right before or after a form element. Cursor/caret/focus must go into the form element next to it
This is a 10 second test on tablets and smartphones because tap is a bit slower ^^
Here is the answer from another question: jQuery find $.find('selector') versus $('selector') difference
The reason this does not work is because find() lets you filter on a set of elements based on a selection you've already made.For example if you wanted to select all of the inputs within a particular form, you could write:
$('#aParticularForm').find('input')
It cannot be called on its own.
How can I expand this statement to find specific inputs on a page? (Specifically listviews)
Working example: http://jsfiddle.net/Gajotres/93VFG/
Wanted element must have a unique identification, like id or class.
HTML :
<form id="aParticularForm">
<input type="text" value="One" id="input1"/>
<input type="text" value="Two" id="input2"/>
</form>
Javascript :
var input = $('#aParticularForm').find('#input1');
alert(input.val());
You can even go further, because you are working with a jQuery Mobile you can have several pages loaded into the DOM and they can all have identical input fields, so to find elements only in a current active page you would use:
$.mobile.activePage.find('#input1');