iPad Chrome HTML click select option, but display another option - html

In PC Chrome & IE, it works. But in iPAD Chrome, when I select month or year, it display the option of day. And the code related as below.
<td class="label" nowrap="nowrap"><label for="InputLabel2">Fax Received Date To</label></td>
<td><label>
<INPUT TYPE="HIDDEN" NAME="InputLabel2" VALUE="D/2014/10/22:17:19:28">
<INPUT TYPE="HIDDEN" NAME="InputLabel2_dirtyFlag" VALUE="0">
<LABEL FOR="InputLabel2_day"></LABEL>
<SELECT ID="InputLabel2_day" TITLE="Day" NAME="InputLabel2_day" onChange="InputLabel2_update(this, this.form, null)">
<OPTION VALUE="-1" >
<OPTION VALUE="1" >1
<OPTION VALUE="22" SELECTED>22
<OPTION VALUE="31" >31
</SELECT>
---
<LABEL FOR="InputLabel2_month"></LABEL>
<SELECT ID="InputLabel2_month" TITLE="Month" NAME="InputLabel2_month" onChange="InputLabel2_update(this, this.form, null)">
<OPTION VALUE="-1" >
<OPTION VALUE="1" >January
<OPTION VALUE="10" SELECTED>October
<OPTION VALUE="12" >December
</SELECT>
---
<LABEL FOR="InputLabel2_year"></LABEL>
<SELECT ID="InputLabel2_year" TITLE="Year" NAME="InputLabel2_year" onChange="InputLabel2_update(this, this.form, null)">
<OPTION VALUE="-1" >
<OPTION VALUE="2013" >2013
<OPTION VALUE="2014" SELECTED>2014
<OPTION VALUE="2015" >2015
</SELECT>

find the issue, it is due to , it should not have the additional after , and once remove it, it works in iPad Chrome now. Thx all

Related

Collecting select values into an array (jQuery)

I've been attempting to collect the selected data value of each of the dropdowns in a form and pass them into an array so that I can eventually add them together. However with my current code, the array only receives the value of the first dropdown, and not any of the others. I haven't got to the addition part yet, so I'm just joining the array with a comma, but here's my code so far:
HTML
<form id="questions">
<select name="q1" id="q1" tabindex="1">
<option data-calculate="0" value="No">No</option>
<option data-calculate="0.5" value="Partially">Partially</option>
<option data-calculate="1" value="Yes">Yes</option>
</select>
<select name="q2" id="q2" tabindex="2">
<option data-calculate="0" value="No">No</option>
<option data-calculate="0.5" value="Partially">Partially</option>
<option data-calculate="1" value="Yes">Yes</option>
</select>
<select name="q3" id="q3" tabindex="3">
<option data-calculate="0" value="No">No</option>
<option data-calculate="0.5" value="Partially">Partially</option>
<option data-calculate="1" value="Yes">Yes</option>
</select>
<input type="hidden" id="calculator" value=""/>
</form>
JQUERY
var calculation = [];
jQuery("#questions").change(function() {
calculation.push(jQuery(this).find(":selected").data('calculate'));
jQuery("#calculator").val(calculation.join(', '));
});
Thanks in advance for the help!
Consider the following.
$(function() {
$("#questions > select").change(function(event) {
var calc = [];
$("#questions > select").each(function(i, el) {
calc.push($(el).val());
});
$("#calculator").val(calc.join(", "));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="questions">
<select name="q1" id="q1" tabindex="1">
<option data-calculate="0" value="No">No</option>
<option data-calculate="0.5" value="Partially">Partially</option>
<option data-calculate="1" value="Yes">Yes</option>
</select>
<select name="q2" id="q2" tabindex="2">
<option data-calculate="0" value="No">No</option>
<option data-calculate="0.5" value="Partially">Partially</option>
<option data-calculate="1" value="Yes">Yes</option>
</select>
<select name="q3" id="q3" tabindex="3">
<option data-calculate="0" value="No">No</option>
<option data-calculate="0.5" value="Partially">Partially</option>
<option data-calculate="1" value="Yes">Yes</option>
</select>
<input type="hidden" id="calculator" value="" />
</form>
Each change to a select element triggers the callback. Making a more global variable will cause it to get updated over and over again if the User makes many changes or changes their selection. This will capture all 3 values and join them. If the user changes a selection, the hidden field is updated with just the values currently selected.

Select a value from a select box and auto select a value from another select box using jquery

I have two select boxes. The first select box has the id #first and the second select box has the id #second.
Each select box has two options with values 1,2. I want when i select the first option from the first select box to auto select the second option from the second select box AND when i select the second option from the first box to auto select the first option of the second select box:
Here is my code:
$(document).ready(function() {
$('#first').change(function() {
var val = $('#first').prop('selectedIndex');
$("#second").prop('selectedIndex', val);
if (val == "1") {
$("#second").prop('selectedIndex', val == "2");
} else if (val == "2") {
$("#second").prop('selectedIndex', val == "1");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select name="first" style="cursor:pointer;" id="first" placeholder="Please select">
<option value="" disabled="" selected="" hidden="">First select</option>
<option value="1" style="color:#000;">I want an apple</option>
<option value="2" style="color:#000;">I want an orange</option>
</select>
<select name="second" style="cursor:pointer;" id="second" placeholder="Please select">
<option value="" disabled="" selected="" hidden="">Second select</option>
<option value="1" style="color:#000;">You got an orange</option>
<option value="2" style="color:#000;">You got an apple</option>
</select>
You can set a select by its value using .val(), in your case as you only have 2 values you can set the new value via the option value= instead of its selectedIndex using:
$("#second").val(val == 1 ? 2 : 1);
Updated snippet:
$(document).ready(function() {
$('#first').change(function() {
var val = $('#first').val() * 1;
$("#second").val(val == 1 ? 2 : 1);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select name="first" style="cursor:pointer;" id="first" placeholder="Please select">
<option value="" disabled="" selected="" hidden="">First select</option>
<option value="1" style="color:#000;">I want an apple</option>
<option value="2" style="color:#000;">I want an orange</option>
</select>
<select name="second" style="cursor:pointer;" id="second" placeholder="Please select">
<option value="" disabled="" selected="" hidden="">Second select</option>
<option value="1" style="color:#000;">You got an orange</option>
<option value="2" style="color:#000;">You got an apple</option>
</select>
For completeness, to keep using selectedIndex (which is subtly different from value=), it's very similar as the option values are the same as the index, if they're not then you would need to change the values in the above, but not if using selectedIndex - conversely, if you change the order of the options then using value will still work while using selectedIndex would stop working.
$(document).ready(function() {
$('#first').change(function() {
var val = $('#first').prop('selectedIndex');
$("#second").prop('selectedIndex', val === 1 ? 2 : 1);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select name="first" style="cursor:pointer;" id="first" placeholder="Please select">
<option value="" disabled="" selected="" hidden="">First select</option>
<option value="1" style="color:#000;">I want an apple</option>
<option value="2" style="color:#000;">I want an orange</option>
</select>
<select name="second" style="cursor:pointer;" id="second" placeholder="Please select">
<option value="" disabled="" selected="" hidden="">Second select</option>
<option value="1" style="color:#000;">You got an orange</option>
<option value="2" style="color:#000;">You got an apple</option>
</select>
It will be much easier to make the options on the same index. So apple will be first in the two selects, and orange will be the second in both, so on...
$(document).ready(function() {
$('#first').change(function() {
$("#second").prop('selectedIndex', $('#first').prop('selectedIndex'));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select name="first" style="cursor:pointer;" id="first" placeholder="Please select">
<option value="" disabled="" selected="" hidden="">First select</option>
<option value="1" style="color:#000;">I want an apple</option>
<option value="2" style="color:#000;">I want an orange</option>
</select>
<select name="second" style="cursor:pointer;" id="second" placeholder="Please select">
<option value="" disabled="" selected="" hidden="">Second select</option>
<option value="1" style="color:#000;">You got an apple</option>
<option value="2" style="color:#000;">You got an orange</option>
</select>

Chrome caches select menu

I have a select menu.
Example:
<select autocomplete="off"> <option value="" selected="selected">Select Quantity</option>
<option value="6" autocomplete="off">6</option>
<option value="12" autocomplete="off">12</option>
<option value="18" autocomplete="off">18</option>
<option value="24" autocomplete="off">24</option>
</select>
If the user selects a value and then navigates to a different page and back...the browser caches the selected value (even though I have switched off caching in the cache related headers).
How can I prevent Chrome from caching these select values?
Add autocomplete="off" to the form (not the select element):
<form autocomplete="off">
<select> <option value="" selected="selected">Select Quantity</option>
<option value="6" autocomplete="off">6</option>
<option value="12" autocomplete="off">12</option>
<option value="18" autocomplete="off">18</option>
<option value="24" autocomplete="off">24</option>
</select>
</form>

For following drop down list , 'required' attribute is not working

If user selects " - - select - -" from options , it should be treated as blank field. It should trigger 'required' attribute so that the browser would show alert message while submitting the form as: "Please fill out this field" .
I tried hard but no solution found.
HTML:
<form>
<select id="post" name="post" required="required" title="post you are applying for" class="formfield3" />
<option value="0"> - - select - -</option>
<option value="1">Mobile App Developer</option>
<option value="2">DataBase Administrator</option>
<option value="3">Search Engine Optimizer</option>
<option value="4">Product Manager</option>
<option value="5">HR Manager</option>
</select>
<input type=submit>
</form>
I am using newest version chrome and 'required' is working for other tags such as textfields etc.
To make browser treat it as a blank field, make it blank - change 0 to an empty string:
<select id="post" name="post" required="required" title="post you are applying for" class="formfield3" />
<option value=""> - - select - -</option>
<option value="1">Mobile App Developer</option>
<option value="2">DataBase Administrator</option>
<option value="3">Search Engine Optimizer</option>
<option value="4">Product Manager</option>
<option value="5">HR Manager</option>
</select>
Following code did not work for me:
<select id="example1" name="example1" required="required" />
<option value="0"> - - select - -</option>
<option value="1">A</option>
<option value="2">B</option>
</select>
Following code worked for me:
<select id="example1" name="example1" required="required" />
<option value=""> - - select - -</option>
<option value="1">A</option>
<option value="2">B</option>
</select>
The difference being value="" vs value="0"

How to create a search URL for website using <select>

I am writing some code which will search a website and return the number of search results. A bit like this Number of Google Results from Excel but the site I am using is sciencedirect.com
Science direct is a bit odd in that the URL of the results page does not contain the search term, so finding the URL to send your search term is more complex. I have been reading the source code of the advanced search page and this is the relevant part of the code:
<form name="Form1" method="get" action="/science">
<input type="hidden" name="_ob" value="MiamiSearchURL">
<input type="hidden" name="_method" value="submitForm">
<input type="hidden" name="_acct" value="C000053194">
<input type="hidden" name="_temp" value="all_search.tmpl">
<input type="hidden" name="md5" value="9e299e9289462d7805ab0a5dcc9cff5c">
<input type="hidden" name="test_alid" value="">
<div class="contentMain" style="margin:1px 0 0 1px;"><div class="contentShadow"><div class="contentBorders">
<div class="searchFormBg">
<div style="text-align:right;">
Search tips
</div>
<div>
<a name="Skip Search"></a><label class="searchFormLabel" for="SearchText">Search </label>
<input type="text" class="inputBox" name="SearchText" id="SearchText" value="" size="60" maxlength="256"> in
<select name="keywordOpt" id="keywordOpt" size="1">
<option value="ALL" selected >All Fields</option>
<option value="TITLE-ABSTR-KEY" >Abstract, Title, Keywords</option>
<option value="AUTHORS" >Authors</option>
<option value="SPECIFIC-AUTHOR" >Specific Author</option>
<option value="SRCTITLEPLUS" >Source Title</option>
<option value="TITLE" >Title</option>
<option value="KEYWORDS" >Keywords</option>
<option value="ABSTRACT" >Abstract</option>
<option value="REFERENCES" >References</option>
<option value="ISSN" >ISSN</option>
<option value="ISBN" >ISBN</option>
<option value="AFFILIATION" >Affiliation</option>
<option value="FULL-TEXT" >Full Text</option>
</select>
</div>
<div class="searchFormField">
<select name="addTerm" id="addTerm" size="1">
<option value="0" selected > AND
<option value="1" > OR
<option value="2" > AND NOT
</select>
</div>
<div>
<input type="text" class="inputBox" name="addSearchText" id="addSearchText" value="" size="60" maxlength="256"> in
<select name="addkeywordOpt" id="addkeywordOpt" size="1">
<option value="ALL" selected >All Fields</option>
<option value="TITLE-ABSTR-KEY" >Abstract, Title, Keywords</option>
<option value="AUTHORS" >Authors</option>
<option value="SPECIFIC-AUTHOR" >Specific Author</option>
<option value="SRCTITLEPLUS" >Source Title</option>
<option value="TITLE" >Title</option>
<option value="KEYWORDS" >Keywords</option>
<option value="ABSTRACT" >Abstract</option>
<option value="REFERENCES" >References</option>
<option value="ISSN" >ISSN</option>
<option value="ISBN" >ISBN</option>
<option value="AFFILIATION" >Affiliation</option>
<option value="FULL-TEXT" >Full Text</option>
</select>
</div>
<div style="margin:5px 0;">
<label class="searchFormLabel" for="source">Include</label>
<div style="float:left;"><input style="cursor: pointer;" type="checkbox" id="journals" name="source" value="srcJrl" CHECKED></div><div style="float:left;padding-top:2px;margin-right:5px;" class="astPad"><label for="journals">Journals</label></div>
<div style="float:left;"><input style="cursor: pointer;" type="checkbox" id="books" name="source" value="srcBk" CHECKED></div><div style="float:left;padding-top:2px;margin-right:5px;" class="astPad"><label for="books">All Books</label></div>
</div>
<div style="clear:both;"></div>
<div>
<label class="searchFormLabel" for="Subscribed">Source</label>
<select name="Subscribed" id="Subscribed" size="1" onChange="checkFavoriteJournals(this, 'sources','Y', '');" style="width:200px;">
<option value="0" SELECTED>All sources</option>
<option value="1" >Subscribed sources</option>
<option value="2" >My Favorite sources</option>
</select>
</div>
<div style="clear:both;"></div>
<div>
<label class="searchFormLabel" for="Subject">Subject <span class="SDtxtNoteSmall">(select one or more)</span></label></div>
<div>
<div style="margin-right:10px;display:inline;float:left;"><SELECT Name="srcSel" Multiple Size = "4"><OPTION VALUE="1" SELECTED > - All Sciences -<OPTION VALUE="5"> Agricultural and Biological Sciences<OPTION VALUE="6"> Arts and Humanities<OPTION VALUE="18"> Biochemistry, Genetics and Molecular Biology<OPTION VALUE="7"> Business, Management and Accounting<OPTION VALUE="8"> Chemical Engineering<OPTION VALUE="9"> Chemistry<OPTION VALUE="11"> Computer Science<OPTION VALUE="12"> Decision Sciences<OPTION VALUE="13"> Earth and Planetary Sciences<OPTION VALUE="14"> Economics, Econometrics and Finance<OPTION VALUE="15"> Energy<OPTION VALUE="16"> Engineering<OPTION VALUE="17"> Environmental Science<OPTION VALUE="220"> Immunology and Microbiology<OPTION VALUE="19"> Materials Science<OPTION VALUE="20"> Mathematics<OPTION VALUE="21"> Medicine and Dentistry<OPTION VALUE="22"> Neuroscience<OPTION VALUE="466"> Nursing and Health Professions<OPTION VALUE="23"> Pharmacology, Toxicology and Pharmaceutical Science<OPTION VALUE="24"> Physics and Astronomy<OPTION VALUE="25"> Psychology<OPTION VALUE="26"> Social Sciences<OPTION VALUE="487"> Veterinary Science and Veterinary Medicine</SELECT></div>
<div class="txtSmall" style="display:inline;">Hold down the Ctrl key (or Apple Key) <br>to select multiple entries.</div>
</div>
<div style="clear:both;"></div>
From this I have constructed this URL
http://www.sciencedirect.com/science?_ob=MiamiSearchURL&_method=submitForm&_acct=C000053194&_temp=all_search.tmpl&md5=9e299e9289462d7805ab0a5dcc9cff5c&test_alid=&keywordOpt=TITLE-ABSTR-KEY&source=srcJrl=1&source=srcBk=1&Subscribed=0&onchange=Y&srcSel=1&DateOpt=2&SearchText=test
Which works on a &[inputname]=[value]& basis
Which should search for "Test" based on my criteria, unfortunately it returns an error "A source must be selected" the source is set with the Subscribed=0 part of the URL and seems to be working because changing the value changes the source.
The difference between the source and other fields is that source is that it uses not
so my question is how do I change the URL so that it returns results.
It looks like science direct uses a variable that has a unique value for each search (md5=9e299e9289462d7805ab0a5dcc9cff5c in your example). This value changes even if you do the same search.
I haven't done any detailed investigations, but if they do some checks on their side (such as checking cookies, ip address etc.) it can be difficult, if not impossible to do.