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');
Related
If you've ever looked at what ASP.NET MVC actually renders when you use #Html.CheckBoxFor, then you've seen that each checkbox you request to be rendered actually results in the emission of not one but two input tags. One is the "true" value checkbox, and the other is for "false." The latter input is of type "hidden".
Generally this doesn't cause problems if you're using ASP.NET MVC correctly. You wouldn't notice the input doubling unless you tried to, for example, do something directly with Request.Form(e.g. Why does ASP.NET MVC Html.CheckBox output two INPUTs with the same name?)
My question, though, is how screen readers deal with this. For example, can they be relied upon to correctly report only the visible checkbox to the site user?
Screen readers will ignore hidden inputs.
Given the example you cite in your comment, it returns this code:
<div class="col pure-u-xl-1-3 pure-u-lg-1-3 pure-u-md-1 pure-u-sm-1 pure-u-xs-1">
<label>Home Club Newsletter</label>
<input checked="checked" … id="newsletter" name="JoinHomeClub" type="checkbox" value="true">
<input name="JoinHomeClub" type="hidden" value="false">
<span class="checkbox-label">Yes, please sign me Up!</span>
</div>
Right off the bat there is a problem here because the <label> is not associated with the control, and the visible text that is next to the checkbox is not associated with the field.
When I access the field in NVDA, all it says is "checkbox checked". There is no accessible name at all.
But to your question…
Your question was related to the <input type="hidden">. As #SLaks said, screen readers ignore <input type="hidden">. The fact that they have the same name value is no problem. If they had the same id value, then you would have a problem (how it would manifest in a screen reader depends on things and stuff).
I am trying to track form submission for a form using event based rule in DTM. I know that the ideal way to do it is to do via direct call rule but need to track the form fields as well through a data element and then into an eVar.
The form code looks something like this on the page:
<div style='display:none'>
<div id="popupform">
<div class="form_container">
<img src="/images/New-Offer-Pop-Up-Without-form_18-Jan-16.jpg" style="width: 100%;">
<form class="offerform" accept-charset="UTF-8" action="/site/sendtohs">
<div class="formrow"><input type="text" name="popup_fullname" class="new-input1 required" placeholder="Name" /></div>
<div class="formrow"><input type="email" name="popup_email" class="new-input1 required" placeholder="Email" /></div>
<div class="formrow"><input type="number" name="popup_phone" class="new-input1 required" placeholder="Mobile"
minlength="10" maxlength="15" /></div>
<input type="hidden" name="popup_url" value="/" /></br>
<p align="right"><input class="tbn newtbn" type="submit" name="submit" value="Submit" /></p>
</form>
</div>
<div class="offerform_success" style="display: none">
<img src="/images/Thank-you-pop-up-new-xyz.jpg" style="height: 440px; width: 100%; position: absolute;width: 99%;">
</div>
</div>
</div>
The even based rule in DTM is :
DTM Rule
The event fires when I click on the Submit button but the rule does not validates if the form fields have been filled or not. Any hints how can I add validation to the form submit event within DTM.
Targeting the form
Firstly, based on your screenshot vs. posted code, your event will not trigger because the form tag does not have an id attribute of "popupform" (or any id attribute at all) (You do have that as an id in a parent div, but that's not what you are targeting). So, you will need to remove that.
If you only want to target the form if it's within a div, then you will need to add it as a Rule Condition. Under Rule Conditions > Criteria, choose "Data > Custom", and click Add Criteria.
In the code box, add the following:
if ($(this).parents('#popupform').length)
return true;
return false;
Note: I'm using jQuery syntax here for brevity and easy cross-browser compatibility. The overall goal is this references the targeted form, and you want to check that it is within an html element with the popupform id. The jQuery above traverses up the form's ancestor chain to look for it. If it finds it, we return true. Otherwise we return false. Ultimately, custom rule conditions should return true if you want it to pass, or false if not. Also note that if you have multiple rule conditions (which you will; see below), all conditions must return true in order for the rule to trigger. If your site does not use jQuery or you do not want to use jQuery for this, then you will need to write your own code following the above concept.
Validating the form fields
Before I get into this, one thing I should note is in general you should not rely on client-side form validation for your forms. It is super easy to disable/get around it. You should be doing form validation with server-side code when the form is submitted, and then pop whatever you need to pop (form complete tracking or w/e) after it has been server-side validated.
Maybe you already have server-side validation in place but for whatever reason you can't control popping a dtm rule after validation, and this is your next best thing. Well hopefully the only thing you are doing is popping tracking and not using the dtm rule for actual site functionality, but even then, just want you to be aware that this is a "lesser evil" solution, not a "good" solution.
Having said that, you can again turn to a custom condition to make sure all the form fields are filled out. Here is a quick and dirty custom rule condition to demonstrate. Again, under Rule Conditions > Criteria, choose "Data > Custom", and click Add Criteria (so you will now have another custom code box). Add the following:
var isFieldsFilled=true;
$.each($(this).serializeArray(),function(i,v) {
if (!v.value||v.value=='')
isFieldsFilled=false;
});
return isFieldsFilled;
This code again uses jQuery to grab the form fields of the targeted form and loops through them and sets a flag to false if one is found not to have a value. Again, this is kind of quick and dirty and will work based on your current form example, but you may need to expand upon it in practice.
I'm creating a large dynamic form and want to create checkboxes and radio buttons like:
<label><input type="radio" name="myradio"><span class="foo">This is the Label</span></label>
This is for a number of reasons. There's nothing wrong with this as far as HTML spec goes.
But, jquery mobile generates a DOM error for every checkbox or radio button generated this way. It really seems to want:
<input type="radio" name="myradio" id="radio1"><Label for="radio1">...</label>
Any workarounds? Ideas?
This works fine: http://jsbin.com/ofuhaw/228/edit with latest JQM
Maybe you should just swap the order of elements.
Hy
What i want to do is to create a custom renderer for will_paginate which renders first, previous, next and last page and a input field where the user can type in the page number manually. I already have the links for first, last etc. but i stuck at the input field. I could create a form in the view but the input field has to be rendered between the previous and next links.
Does anyone know how to do this?
Thanks for your help
You can do this as a separate form (make sure it is a GET). All you
need is the one input element named page. Something as simple as this
should work (not all browsers may like the #). I dropped it into a
site I'm playing with now and it worked. Put it anywhere on your page.
You might have to make something more complicated if you need to
incorporate search terms.
<form action="#" method="get">
Go to page: <input type="text" name="page" value="" size="2"
maxlength="4" />
<input type="submit" name="btnSubmit" />
</form>
Background
I have this form that uses javascript exclusively to search through ~5k entries (suppliers) and populate a select dropdown from them (factories, ~10k entries). Right now, it's a javascript-required form. I'd like to make it so that javascript errors no longer render the form unusable, but the number of entries and the sequential nature of the entries leave me without a idiomatic way to provide just a basic html version.
The Issues
Sequential/hierarchical dropdowns
An example dropdown where sequence is important:
http://www.javascriptkit.com/javatutors/selectcontent2.shtml
So that shows "filtering" of sequential/hierarchical dropdown content, where the selections in the second City dropdown get filtered based on the selections in the first Country dropdown. But take away the javascript, and it could instantly become a mess. Madrid in the USA? Berlin in France? The sequence becomes corrupted.
Dropdowns that have huge numbers of options
If you have a select dropdown with 10k possible options, it's pretty easy to filter/search through them with javascript. Dealing with those options without javacript, on the other hand, is much more difficult.
How do you provide your users with all of the possibilities when just loading all the options them all would blow up their browser?
Possible Solutions
Sequential/Hierarchical Select boxes:
Server-side 2-part forms.
?Select option groups?
???
Selects with huge numbers of options:
Server-side 2-part search forms.
Server-side text search matching of entry names.
???
Simple links to resourceful solutions welcome.
The only solution that I can think of is to use a form submit each time you need to narrow down your results. You start off by showing a page to select a supplier's country. That submits, and returns a page that shows the selected country as text and now has a drop-down to select the next field, like cities. That way, the server can do the filtering at each level.
Here's a JSP example:
<c:choose>
<c:when test="${empty country}">
Country:
<form>
<select>
<option value="USA">America</option>
<option value="DEU">Germany</option>
<%-- ... --%>
</select>
</form>
</c:when>
<c:otherwise>
Country: ${country}
<c:choose>
<c:when test="${empty city}">
<input type="submit" value="Change" /> <%-- Button to change the previous value --%>
<%-- your form for choosing a supplier's city --%>
</c:when>
<c:otherwise>
<%-- continue filtering until you have all of the data --%>
</c:otherwise>
</c:choose>
</c:otherwise>
<c:choose>
When you select a country, the form submits. Your server processes the country, returns the same page with the country field value and a list of possible cities for your next drop-down. Doing it like this allows you to rely only on form submits (rather than JavaScript) to filter data sequentially. Your server would be responsible for keeping track of how far along the user is. The obvious downfall of this solution is that your JSP would be pretty messy, with all of the nested <c:choose> blocks.
You might also try a hybrid solution: when the page loads, find out if your JavaScript has loaded. If so, replace your submission forms with plain HTML that has AJAX behind it to populate the next set of options. That way, your page doesn't have to refresh a bunch of times when the JavaScript does load, but will still be functional if the JavaScript doesn't load. Just a thought.