I am clueless when it comes to JavaScript and Ajax. Could y'all point me to a simple tutorial site for both?
The algorithm for what I'm trying to accomplish is fairly simple. I have three drop-down menus to enter a date. The user selects a year, then a month, then, based on the two previous selections, chooses a date. So, if a user selects Feb, 2012, the date list will show twenty-nine days. If he wants to look at Feb. 2013, the date list would show 28 days. Or for another month, show 30 or 31 days. What sort of function would I need to accomplish this?
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form name="myform">
<fieldset><legend>Selection Date</legend><label for="year">Year: </label>
<select name="year" id="year" size="1">
<option value=" " selected="selected"></option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
</select>
<label for="month">Month: </label>
<select name="month" id="month" size="1">
<option value=" " selected="selected"></option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<label for="day">Day: </label>
<select name="day" id="day" size="1">
<option value=" " selected="selected"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</fieldset>
</form>
<script type="text/javascript">
function daysInMonth(month, year) {
var days = new Date(year, month, 0);
return days.getDate();
}
function setDayDrop(dyear, dmonth, dday) {
var year = dyear.options[dyear.selectedIndex].value;
var month = dmonth.options[dmonth.selectedIndex].value;
var day = dday.options[dday.selectedIndex].value;
if (day == ' ') {
var days = (year == ' ' || month == ' ') ? 31 : daysInMonth(month, year);
dday.options.length = 0;
dday.options[dday.options.length] = new Option(' ', ' ');
for (var i = 1; i <= days; i++)
dday.options[dday.options.length] = new Option(i, i);
}
}
function setDay() {
var year = document.getElementById('year');
var month = document.getElementById('month');
var day = document.getElementById('day');
setDayDrop(year, month, day);
}
document.getElementById('year').onchange = setDay;
document.getElementById('month').onchange = setDay;
</script>
</body>
Thanks for the speedy response. I found this on the www that puts a calendar into the form:
Any Time
Related
Currently building a web app that allows user to upload videos, now i have a form that post all user details and video using laravel, now i want to keep track of the file upload using a progress bar, in my finding....i discover vue.js can handle this.
This is my UploadController.php
function generateRandomString($length = 10) {
return strtoupper(substr(str_shuffle("123456789abcdefghijklmnpqrstuvwxyzABCDEFGHIJKLMNPQRSTUVWXYZ"), 0, $length));
}
public function store(Request $request){
$validatedData = $request->validate([
'name'=>'required | unique:uploads',
'email'=>'required | email | unique:uploads',
'phone'=>'required',
'country'=>'required',
'title'=>'required | unique:uploads',
'agency'=>'required',
'category'=>'required',
'video'=>'required | file | mimetypes:video/mp4,video/webm | max:40960'
],[
'name.required' => 'Name is required',
'ref.required' => 'Reference is required',
]);
// Unique ID
$ref = $this->generateRandomString();
$email = $request->email;
// Get Filename with extention
$filenameWithExtension = $request->file('video')->getClientOriginalName();
//Get just the filename
$filename = pathinfo($filenameWithExtension, PATHINFO_FILENAME);
//Get just the extention
$extension = $request->file('video')->getClientOriginalExtension();
//Get new filename
$filenameToStore = $ref.'.'.$extension;
// Upload Video
$path = $request->file('video')->storeAs('public/videos', $filenameToStore);
//Create new registration
$upload = new Upload;
$upload->name = $request->input('name');
$upload->email = $request->input('email');
$upload->phone = $request->input('phone');
$upload->country = $request->input('country');
$upload->title = $request->input('title');
$upload->agency = $request->input('agency');
$upload->ref = $ref;
$upload->category = $request->input('category');
$upload->video = $filenameToStore;
$upload->save();
Mail::send('emails.welcome',[
'ref' => $ref,
'name' => $request->name,
'title'=> $request->title,
'category'=> $request->category,
'agency'=> $request->agency,
'phone'=> $request->phone,
'country'=> $request->country,
], function ($mail) use($request){
$mail->from('no-reply#percussionfed.org', 'International Percussion Federation');
$mail->to($request->email)->subject('International Percussion Federation');
});
return redirect('/register')->with('success', 'Registration Successful, Check'." ".$email." ".'for details.' );
}
View.blade.php
<form method="POST" action="/store" enctype="multipart/form-data">
#csrf
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Name</label>
<sup class="required" title="Required">*</sup>
<input type="text" class="file" title="Name" value="{{old('name')}}" name="name" >
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Email</label>
<sup class="required" title="Required">*</sup>
<input type="text" class="file" title="Email" value="{{old('email')}}" name="email" >
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Phone</label>
<sup class="required" title="Required">*</sup>
<input type="number" class="file" title="Phone" value="{{old('phone')}}" name="phone" >
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Country</label>
<sup class="required" title="Required">*</sup>
<select class="file" title="Country" id="country" value="{{old('country')}}" name="country" >
<option value="">Select your country</option>
<option value="United States">United States</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antarctica">Antarctica</option>
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Aruba">Aruba</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaidjan">Azerbaidjan</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
<option value="Belize">Belize</option>
<option value="Benin">Benin</option>
<option value="Bermuda">Bermuda</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bosnia-Herzegovina">Bosnia-Herzegovina</option>
<option value="Botswana">Botswana</option>
<option value="Bouvet Island">Bouvet Island</option>
<option value="Brazil">Brazil</option>
<option value="British Indian Ocean Territory">British Indian Ocean Territory</option>
<option value="Brunei Darussalam">Brunei Darussalam</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Burundi">Burundi</option>
<option value="Cambodia">Cambodia</option>
<option value="Cameroon">Cameroon</option>
<option value="Canada">Canada</option>
<option value="Cape Verde">Cape Verde</option>
<option value="Cayman Islands">Cayman Islands</option>
<option value="Central African Republic">Central African Republic</option>
<option value="Chad">Chad</option>
<option value="Chile">Chile</option>
<option value="China">China</option>
<option value="Christmas Island">Christmas Island</option>
<option value="Cocos Islands">Cocos Islands</option>
<option value="Colombia">Colombia</option>
<option value="Comoros">Comoros</option>
<option value="Congo">Congo</option>
<option value="Congo, Democratic Republic">Congo, Democratic Republic</option>
<option value="Cook Islands">Cook Islands</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Cote D'Ivoire">Cote D'Ivoire</option>
<option value="Croatia">Croatia</option>
<option value="Cuba">Cuba</option>
<option value="Curacao">Curacao</option>
<option value="Cyprus">Cyprus</option>
<option value="Czech Republic">Czech Republic</option>
<option value="Denmark">Denmark</option>
<option value="Djibuti">Djibuti</option>
<option value="Dominica">Dominica</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="Ecuador">Ecuador</option>
<option value="Egypt">Egypt</option>
<option value="El Salvador">El Salvador</option>
<option value="Equatorial Guinea">Equatorial Guinea</option>
<option value="Eritrea">Eritrea</option>
<option value="Estonia">Estonia</option>
<option value="Ethiopia">Ethiopia</option>
<option value="Falkland Islands">Falkland Islands</option>
<option value="Faroe Islands">Faroe Islands</option>
<option value="Fiji">Fiji</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="French Guiana">French Guiana</option>
<option value="French Polynesia">French Polynesia</option>
<option value="French Southern Territories">French Southern Territories</option>
<option value="Gabon">Gabon</option>
<option value="Gambia">Gambia</option>
<option value="Georgia">Georgia</option>
<option value="Germany">Germany</option>
<option value="Ghana">Ghana</option>
<option value="Gibraltar">Gibraltar</option>
<option value="Greece">Greece</option>
<option value="Greenland">Greenland</option>
<option value="Grenada">Grenada</option>
<option value="Guadeloupe">Guadeloupe</option>
<option value="Guatemala">Guatemala</option>
<option value="Guinea">Guinea</option>
<option value="Guinea Bissau">Guinea Bissau</option>
<option value="Guyana">Guyana</option>
<option value="Haiti">Haiti</option>
<option value="Heard and MC Donald Islands">Heard and MC Donald Islands</option>
<option value="Honduras">Honduras</option>
<option value="Hong Kong">Hong Kong</option>
<option value="Hungary">Hungary</option>
<option value="Iceland">Iceland</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Iran">Iran</option>
<option value="Iraq">Iraq</option>
<option value="Ireland">Ireland</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Jamaica">Jamaica</option>
<option value="Japan">Japan</option>
<option value="Jordan">Jordan</option>
<option value="Kazakhstan">Kazakhstan</option>
<option value="Kenya">Kenya</option>
<option value="Kiribati">Kiribati</option>
<option value="Korea, Democratic People's Rep">Korea, Democratic People's Rep</option>
<option value="Korea, Republic of">Korea, Republic of</option>
<option value="Kosovo">Kosovo</option>
<option value="Kuwait">Kuwait</option>
<option value="Kyrgyzstan">Kyrgyzstan</option>
<option value="Laos">Laos</option>
<option value="Latvia">Latvia</option>
<option value="Lebanon">Lebanon</option>
<option value="Lesotho">Lesotho</option>
<option value="Liberia">Liberia</option>
<option value="Libya">Libya</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Macau">Macau</option>
<option value="Macedonia">Macedonia</option>
<option value="Madagascar">Madagascar</option>
<option value="Malawi">Malawi</option>
<option value="Malaysia">Malaysia</option>
<option value="Maldives">Maldives</option>
<option value="Mali">Mali</option>
<option value="Malta">Malta</option>
<option value="Marshall Islands">Marshall Islands</option>
<option value="Martinique">Martinique</option>
<option value="Mauritania">Mauritania</option>
<option value="Mauritius">Mauritius</option>
<option value="Mayotte">Mayotte</option>
<option value="Mexico">Mexico</option>
<option value="Micronesia">Micronesia</option>
<option value="Moldava">Moldava</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="Montenegro">Montenegro</option>
<option value="Montserrat">Montserrat</option>
<option value="Morocco">Morocco</option>
<option value="Mozambique">Mozambique</option>
<option value="Myanmar">Myanmar</option>
<option value="Namibia">Namibia</option>
<option value="Nauru">Nauru</option>
<option value="Nepal">Nepal</option>
<option value="Netherlands">Netherlands</option>
<option value="Netherlands Antilles">Netherlands Antilles</option>
<option value="New Caledonia">New Caledonia</option>
<option value="New Zealand">New Zealand</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Niger">Niger</option>
<option value="Nigeria">Nigeria</option>
<option value="Niue">Niue</option>
<option value="Norfolk Island">Norfolk Island</option>
<option value="Northern Mariana Islands">Northern Mariana Islands</option>
<option value="Norway">Norway</option>
<option value="Oman">Oman</option>
<option value="Pakistan">Pakistan</option>
<option value="Palau">Palau</option>
<option value="Palestine">Palestine</option>
<option value="Panama">Panama</option>
<option value="Papua New Guinea">Papua New Guinea</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Philippines">Philippines</option>
<option value="Pitcairn">Pitcairn</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="Qatar">Qatar</option>
<option value="Reunion">Reunion</option>
<option value="Romania">Romania</option>
<option value="Russian Federation">Russian Federation</option>
<option value="Rwanda">Rwanda</option>
<option value="S Georgia and S Sandwich Islands">S Georgia and S Sandwich Islands</option>
<option value="Samoa">Samoa</option>
<option value="San Marino">San Marino</option>
<option value="Sao Tome and Principe">Sao Tome and Principe</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Senegal">Senegal</option>
<option value="Serbia">Serbia</option>
<option value="Seychelles">Seychelles</option>
<option value="Sierra Leone">Sierra Leone</option>
<option value="Singapore">Singapore</option>
<option value="Slovakia">Slovakia</option>
<option value="Slovenia">Slovenia</option>
<option value="Solomon Islands">Solomon Islands</option>
<option value="Somalia">Somalia</option>
<option value="South Africa">South Africa</option>
<option value="Spain">Spain</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="St Helena">St Helena</option>
<option value="St Kitts and Nevis">St Kitts and Nevis</option>
<option value="St Lucia">St Lucia</option>
<option value="St Pierre and Miquelon">St Pierre and Miquelon</option>
<option value="St Vincent and Grenadines">St Vincent and Grenadines</option>
<option value="Sudan">Sudan</option>
<option value="Suriname">Suriname</option>
<option value="Svalbard and Jan Mayen">Svalbard and Jan Mayen</option>
<option value="Swaziland">Swaziland</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Syria">Syria</option>
<option value="Taiwan">Taiwan</option>
<option value="Tajikistan">Tajikistan</option>
<option value="Tanzania">Tanzania</option>
<option value="Thailand">Thailand</option>
<option value="Timor-Leste">Timor-Leste</option>
<option value="Togo">Togo</option>
<option value="Tokelau">Tokelau</option>
<option value="Tonga">Tonga</option>
<option value="Trinidad and Tobago">Trinidad and Tobago</option>
<option value="Tunisia">Tunisia</option>
<option value="Turkey">Turkey</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Turks and Caicos Islands">Turks and Caicos Islands</option>
<option value="Tuvalu">Tuvalu</option>
<option value="US Minor Islands">US Minor Islands</option>
<option value="Uganda">Uganda</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Uruguay">Uruguay</option>
<option value="Uzbekistan">Uzbekistan</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Vatican City">Vatican City</option>
<option value="Venezuela">Venezuela</option>
<option value="Vietnam">Vietnam</option>
<option value="Virgin Islands (British)">Virgin Islands (British)</option>
<option value="Wallis and Futuna">Wallis and Futuna</option>
<option value="Western Sahara">Western Sahara</option>
<option value="Yemen">Yemen</option>
<option value="Yugoslavia">Yugoslavia</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Title of video</label>
<sup class="required" title="Required">*</sup>
<input type="text" name="title" title="Title of video" value="{{old('title')}}" class="file" name="video">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Regional Agency</label>
<sup class="required" title="Required">*</sup>
<select class="file" title="Regional Agency" id="state" {{old('agency')}} name="agency">
<option value="">Select your regional agency</option>
<option>Africa</option>
<option>Asia</option>
<option>Australia</option>
<option>Europe/United Kingdom</option>
<option>North America</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Category</label>
<sup class="required" title="Required">*</sup>
<select class="file" title="Category" id="state" {{old('category')}} name="category">
<option value="">Select a category</option>
<option value="Traditional Rhythm (Small Band)">Traditional Rhythm (small band)</option>
<option value="Traditional Rhythm (Large Band)">Traditional Rhythm (large band)</option>
<option value="Voices and Percussion (Small Band)">Voices and Percussion (small band)</option>
<option value="Voices and Percussion (Large Band)">Voices and Percussion (large band)</option>
<option value="Melodic Percussion (Small Band)">Melodic Percussion (small band)</option>
<option value="Melodic Percussion (Large Band)">Melodic Percussion (large band)</option>
<option value="Drum Kit Solo">Drum Kit Solo</option>
<option value="Drum Line Face Off (Small Band)">Drum Line Face-off (small band)</option>
<option value="Drum Line Face Off (Large Band)">Drum Line Face-off (large band)</option>
<option value="Innovative and Creative Rhythm (Small Band)">Innovative and Creative Rhythm (small band)</option>
<option value="Innovative and Creative Rhythm (Large Band)">Innovative and Creative Rhythm (large band)</option>
</select>
</div>
</div>
<div class="container" style="margin-top:10px;">
<label style="margin-bottom:-10%;">VIDEO UPLOAD</label><hr>
<input type="file" title="Upload a Video" name="video" class="file">
</div>
<div class="col-md-12 col-sm-12">
<br>
<button type="submit" class="btn btn-info btn-block"><i class="fa fa-save"></i> SUBMIT APPLICATION</button>
</div>
</div>
</form>
But the problem is, i don't know how to go about this.
Any help will be deeply appreciated.
Thank you
Below is a Vue code snippet implementing Harshal's solution using axios to make the HTTP request
data () {
return {
uploadProgress: 0
};
},
computed: {
config () {
return {
headers: { 'Content-Type': 'multipart/form-data' },
onUploadProgress: progressEvent => {
this.uploadProgress = Math.floor((progressEvent.loaded * 100) / progressEvent.total);
}
};
},
},
methods: {
upload (e) {
const files = e.target.files || e.dataTransfer.files;
if (!files.length) {
return;
}
const data = new FormData();
data.append('fileNameGoesHere', files.item(0));
axios.post(this.uploadUri, data, this.config).then(response => {
// file uploaded successfully
});
},
}
You don't need to do anything special on the server side. You can do this using purely client-side code if you are willing to use Ajax to submit form. There are many small things you need to do but these will be your major steps:
Don't do traditional form submission.
Instead, create a FormData object. FormData is a new way to do form submission in JavaScript application.
When the user clicks the submit button, construct this FormData object.
For file input, you should use <input type="file" />.
Create an instance of XHR object. XHR is XMLHttpRequest.
The beauty of XHR is that you get a progress event indicating how much bytes have been sent. That is exactly what you need here.
Use onprogress event fired by XHR object to get periodic progress data.
Also remember to use multipart form type.
MDN has a very nice article depicting the overall flow. https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
Note: you may have heard of new fetch API in browsers. You can use that but unfortunately, it is Promise based and it won't return the actual progress event. So you cannot use that.
I want to retrieve max value for each combobox present in a web page, with xpath.
Here is a sample HTML containing several combobox with choices:
<label> <span class="invisible_spoken">Some choice</span>
<select class="select_class">
<option value="0">0</option>
<option value="1" >
1
</option>
<option value="2" >
2
</option>
</select>
</label>
<label> <span class="invisible_spoken">Some choice</span>
<select class="select_class">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</label>
<label> <span class="invisible_spoken">Some choice</span>
<select class="select_class">
<option value="0">0</option>
<option value="1">1</option>
</select>
</label
What I would want to retrieve is the maximum value of each combobox, sample output :
2, 3, 1
I've tried with an expression like :
//table[#id="rooms"]//select[contains(#class, "b_selectbox")]/option[not(//table[#id="rooms"]//select[contains(#class, "b_selectbox")]/option/#value > #value)]/#value
But it is returning just combobox max values of the maximum combo value, in the sample case just 3 that is the highest, in the case there will be two combobox with maximum values equals to 3, then it will return those 2 ...
Xpath Selector for Options with highest value.
//label/select[#class="select_class123"]/option[not(../option/#value > #value)]
o/p: Option elements with highest values.
(//label/select[#class="select_class"]/option[not(../option/#value > #value)])/#value
o/p: 2, 3, 1
Test XML XPath online:
<select class="select_class">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select class="select_class">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="select_class">
<option value="0">0</option>
<option value="1">1</option>
</select>
When I select a month and year from select box.
How to display all days of that month?
My code
` <select class="form-control" name="amonth" id="amonth">
<option value="0">Select Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December </option>
</select>
<select class="form-control" name="ayear" id="ayear">
<option value="0">Select Year</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
If I select july 2015
I want display all dates 1/07/2015 to 31/07/2015 in 1 column.
I get select name from this code
$amonth = Input::get('amonth');
$ayear = Input::get('ayear');
but I don't know how to display full day of month.
You can get count of days in month by function date with format character "t":
Controller:
$dayCount = date('t', strtotime('01-'. $amonth . '-' . $ayear));
// in case of july 2015 it will be 31
$days = [];
for($i = 1; $i <= $dayCount; $i++) {
$days[] = sprintf('%02d/%02d/%04d', $i, $amonth, $ayear);
}
//....
View::make('yourView', [...., 'days' => $days]);
View:
....
{{implode('<br />', $days)}}
....
For more information see:
strtotime
date
Hope this is help.
In Cannot click html element with watir, i was trying to click an element which gives me the row below:
I am not able to find the three dropdown lists which you see in the image above.
How do I do it ? Each time, the id of the dropdown elements changes.
For example, the middle one html code is:
<td>
<select id="filtersJob6_intrinsic_enumOperator" name="filtersJob6_intrinsic_enumOperator" onchange="if(top.document.getElementById('filtersJob6_intrinsic_enumOperator').value=='isNull'||top.document.getElementById('filtersJob6_intrinsic_enumOperator').value=='isNotNull'){top.document.getElementById('filtersJob6_intrinsic_operand1Container').style.display='none';}else{top.document.getElementById('filtersJob6_intrinsic_operand1Container').style.display='inline';}">
<option value="equals" selected="selected">equals</option>
<option value="notEqual">not equals</option>
<option value="isNull">is not set</option>
<option value="isNotNull">is set</option>
</select>
</td>
The id id="filtersJob6_intrinsic_enumOperator" can have any number 4,7,6,5 etc.
How do I make the watir find this element ?
EDIT -
Here is the code for the first dropdown:
<select id="filtersJob3_intrinsic_name" name="filtersJob3_intrinsic_name" onchange="var shown=0;top.document.getElementById('filtersJob3_intrinsic_operator').style.display='none';top.document.getElementById('filtersJob3_intrinsic_operand1').style.display='none';top.document.getElementById('filtersJob3_intrinsic_operand2').style.display='none';top.document.getElementById('filtersJob3_intrinsic_dateOperator').style.display='none';top.document.getElementById('filtersJob3_intrinsic_enumOperator').style.display='none';top.document.getElementById('filtersJob3_intrinsic_listOperator').style.display='none';top.document.getElementById('filtersJob3_intrinsic_uuidOperator').style.display='none';top.document.getElementById('filtersJob3_intrinsic_datehelp1').style.display='none';top.document.getElementById('filtersJob3_intrinsic_datehelp2').style.display='none';top.document.getElementById('filtersJob3_intrinsic_operand1abortStatus').style.display='none';top.document.getElementById('filtersJob3_intrinsic_operand1outcome').style.display='none';top.document.getElementById('filtersJob3_intrinsic_operand1priority').style.display='none';top.document.getElementById('filtersJob3_intrinsic_operand1status').style.display='none';top.document.getElementById('filtersJob3_intrinsic_operand1errorCode').style.display='none';if(top.document.getElementById('filtersJob3_intrinsic_name').value=='abortStatus'){shown=1;top.document.getElementById('filtersJob3_intrinsic_enumOperator').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand1abortStatus').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand2Container').style.display='none';}if(top.document.getElementById('filtersJob3_intrinsic_name').value=='outcome'){shown=1;top.document.getElementById('filtersJob3_intrinsic_enumOperator').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand1outcome').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand2Container').style.display='none';}if(top.document.getElementById('filtersJob3_intrinsic_name').value=='priority'){shown=1;top.document.getElementById('filtersJob3_intrinsic_enumOperator').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand1priority').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand2Container').style.display='none';}if(top.document.getElementById('filtersJob3_intrinsic_name').value=='status'){shown=1;top.document.getElementById('filtersJob3_intrinsic_enumOperator').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand1status').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand2Container').style.display='none';}if(top.document.getElementById('filtersJob3_intrinsic_name').value=='errorCode'){shown=1;top.document.getElementById('filtersJob3_intrinsic_enumOperator').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand1errorCode').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand2Container').style.display='none';}if(top.document.getElementById('filtersJob3_intrinsic_name').value=='jobId'){shown=1;top.document.getElementById('filtersJob3_intrinsic_uuidOperator').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand1').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand2Container').style.display='none';}if(top.document.getElementById('filtersJob3_intrinsic_name').value=='createTime'){shown=1;top.document.getElementById('filtersJob3_intrinsic_dateOperator').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand1').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_datehelp1').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand2').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_datehelp2').style.display='inline';}if(top.document.getElementById('filtersJob3_intrinsic_name').value=='finish'){shown=1;top.document.getElementById('filtersJob3_intrinsic_dateOperator').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand1').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_datehelp1').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand2').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_datehelp2').style.display='inline';}if(top.document.getElementById('filtersJob3_intrinsic_name').value=='modifyTime'){shown=1;top.document.getElementById('filtersJob3_intrinsic_dateOperator').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand1').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_datehelp1').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand2').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_datehelp2').style.display='inline';}if(top.document.getElementById('filtersJob3_intrinsic_name').value=='start'){shown=1;top.document.getElementById('filtersJob3_intrinsic_dateOperator').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand1').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_datehelp1').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand2').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_datehelp2').style.display='inline';}if(!shown){top.document.getElementById('filtersJob3_intrinsic_operator').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operator').onchange();top.document.getElementById('filtersJob3_intrinsic_operand1').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand2').style.display='inline';}">
<option value="abortStatus" selected="selected">Abort Status</option>
<option value="abortedBy">Aborted By</option>
<option value="createTime">Create Time</option>
<option value="directoryName">Directory Name</option>
<option value="elapsedTime">Elapsed Time</option>
<option value="errorCode">Error Code</option>
<option value="errorMessage">Error Message</option>
<option value="finish">Finish Date & Time</option>
<option value="credentialName">Impersonation Credential</option>
<option value="jobId">Job ID</option>
<option value="jobName">Job Name</option>
<option value="lastModifiedBy">Last Modified By</option>
<option value="launchedByUser">Launched By User</option>
<option value="licenseWaitTime">License Wait Time</option>
<option value="liveProcedure">Live Procedure</option>
<option value="liveSchedule">Live Schedule</option>
<option value="modifyTime">Modify Time</option>
<option value="outcome">Outcome</option>
<option value="owner">Owner</option>
<option value="priority">Priority</option>
<option value="procedureName">Procedure Name</option>
<option value="projectName">Project Name</option>
<option value="resourceWaitTime">Resource Wait Time</option>
<option value="runAsUser">Run As User</option>
<option value="scheduleName">Schedule Name</option>
<option value="start">Start Date & Time</option>
<option value="stateName">State Name</option>
<option value="status">Status</option>
<option value="totalWaitTime">Total Wait Time</option>
<option value="workspaceWaitTime">Workspace Wait Time</option>
</select>
You can use a regular expression in your locator:
browser.select_list(:id => /filtersJob\d+_intrinsic_enumOperator/).select value_to_select
In this example, the regular expression is denoted by opening and closing forward slashes, and the digit within the original string is replaced with \d+, which means "one or more digits".
EDIT:
Given this minimal HTML snippet:
<select id="filtersJob6_intrinsic_enumOperator">
<option value="isNull">is not set</option>
<option value="isNotNull">is set</option>
</select>
Use select to choose on option based on text:
b.select_list(:id => /filtersJob\d+_intrinsic_enumOperator/).select 'is set'
Use select_value to choose an option based on the value attribute:
b.select_list(:id => /filtersJob\d+_intrinsic_enumOperator/).select_value 'isNotNull'
I have this code
<div th:class="form-group">
<td><label class="control-label leftMargin10 rightMargin10" scope="col" th:text="#{insertHours.hhFrom}">Attivita'</label></td>
<td><select class="form-control" th:field="*{hhFrom}">
<option th:each="i : ${#numbers.sequence(0, 23)}" th:value="${i}" th:text="${i}" th:selected="${ i==9 } ">Options</option>
</select>
</td>
</div>
When I try to add a condition in th:selected it doesn't work.
I have also replaced with this code:
th:attr="${i==9}? selected=selected: '' "
but the result is the same.
The HTML
<select class="form-control" id="hhFrom" name="hhFrom">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
Thanks in advance to answers
You cannot use th:field along with th:selected.
If you replace th:field with name=someMeaningfullName the code will work just fine.
Check out this thread on the Thymeleaf forum for more information
Another hack that, is pretty simple and works, is to close the select tag: <select ... />
Please note /> at the end of first line:
<select th:field="*{percentage}" />
<option th:each="i : ${#numbers.sequence(0, 100)}" th:value="${i}" th:text="${i}" th:selected="${i==75}"></option>
</select>
Renders as:
<select id="percentage" name="percentage" />
<option value="0">0</option>
<option value="1">1</option>
...
<option value="74">74</option>
<option value="75" selected="selected">75</option>
<option value="76">76</option>
...
<option value="100">100</option>
</select>
Both web browser and Thymeleaf will handle this fine.
I used Thymeleaf v.3.0.9.RELEASE
Also I found out that if you put <div> tag around option fields, selected="selected" will also work. e.g
<select th:field="*{name}">
<div>
<option disabled="true" selected="selected" value="">Select</option>
<option value="1">first</option>
<option value="2">second</option>
</div>
</select>