We Keep Coding

can I set the select option using anything other than value in javascript

I have a pick list like the following:
<select multiselect="false" name="some.name" size="1" id="queuePicklist"
onchange="setQueue();" required="true">
<option id="selectOption" hidden="true" disabled="true" selected="true" value=""
style="display: none">Select an option</option>
<option value="1" label="Support">Support</option>
<option value="2" label=" Team Sales">Team Sales</option>
<option value="1" label="Individual Sales">Individual Sales</option>
<option value="1" label="Billing">Billing</option>
<option value="1" label="Other">Other</option>
</select>
I want to know if it's possible that in setQueue() function select one of the options without using the value? So instead of document.getElementById("queuePicklist").value = 'Support';
Can I add a data attribute to the options and select the option that way so I can keep the values as they are. Note: as seen in the example four of the options have the same value.
I know I can put these values (1,2,1,1,1) into the data attribute and use unique values in the 'value' field and that was my first approach but since I'm working with some legacy code, that change made other parts of other codes to break.

I'm not exactly sure what or how you want to get an option, but you can access the text like this.
function setQueue() {
var selectEle = document.getElementById("queuePicklist");
// .options returns an HTMLOptionsCollection object.
// use the selectedIndex property to get the selected option, then
// you can access the text or value.
console.log(selectEle.options[selectEle.selectedIndex].text);
}
<select multiselect="false" name="some.name" size="1" id="queuePicklist" onchange="setQueue();" required="true">
<option id="selectOption" hidden="true" disabled="true" selected="true" value="" style="display: none">Select an option</option>
<option value="1" label="Support">Support</option>
<option value="2" label=" Team Sales">Team Sales</option>
<option value="1" label="Individual Sales">Individual Sales</option>
<option value="1" label="Billing">Billing</option>
<option value="1" label="Other">Other</option>
</select>

How do you pass a value to a hidden form field when a certain option is selected?

I am new to javascript and cannot find an easy-to-understand answer.
I would like a certain value to get passed to a hidden field when a user selects a certain option from the select dropdown.
I know that there are if/else statements but I'm not sure if that would be used in this situation.
For example: I have a select dropdown of a list of states.
<select name="HomeState" required>
<option value="1">Alabama</option>
<option value="1">Alaska</option>
<option value="1">Arizona</option>
<option value="1">Arkansas</option>
<option value="5">California</option>
<option value="1">Colorado</option>
<option value="1">Connecticut</option>
<option value="1">Delaware</option>
</select>
As you can see, any option other than California will be rated at a value of 1.
I would like it to where if the user selects the option of California, then the value of $300 will get passed to a hidden form field.
<input name="AmountNeeded" type="hidden" value="300" />
If they select anything other than California, the hidden field would get passed $100
<input name="AmountNeeded" type="hidden" value="100" />
How would I implement this logic? Would it be using if/else statement? I am new and don't exactly know how to set that up.

To keep this simple you could assign ids to the <select> and hidden <input> and listen to the change event via onchange() on the <select> with a function call.
And based on the selected item, change the value of hidden input.
NOTE: To test the snippet out I have removed the type="hidden". Do place it back.
function homeSelected(){
const home = document.getElementById("homeSelector").value;
if(home == 5){
document.getElementById("amountNeeded").value = 300;
}else{
document.getElementById("amountNeeded").value = 100;
}
}
<select id="homeSelector" name="HomeState" onchange="homeSelected()" required>
<option value="1">Alabama</option>
<option value="1">Alaska</option>
<option value="1">Arizona</option>
<option value="1">Arkansas</option>
<option value="5">California</option>
<option value="1">Colorado</option>
<option value="1">Connecticut</option>
<option value="1">Delaware</option>
</select>
<input id="amountNeeded" name="AmountNeeded" value="100" />

You can do this as follows:
<select name="HomeState" required onChange=myFunction(this)>
<option value="1">Alabama</option>
<option value="1">Alaska</option>
<option value="1">Arizona</option>
<option value="1">Arkansas</option>
<option value="5">California</option>
<option value="1">Colorado</option>
<option value="1">Connecticut</option>
<option value="1">Delaware</option>
</select>
Javascript code is:
<script>
function myFunction(x) {
val = x.options[x.selectedIndex].text;
if(val == 'California')
document.getElementsByName("AmountNeeded")[0].value = 300
else
document.getElementsByName("AmountNeeded")[0].value = 100
}
</script>
If else statement is good for you if you are sure that All other states have value 1 except California. If all states may have different values like some states may have 1 or some may have 2 or some may have 3, then there may be other alternatives to solve this like you can pass give one more attribute data-src-amount to options and give amount to data-src-amount. You can create options like <option value="1" data-src-amount="100">Alabama</option> and in script, you can fetch data-src-amount on select change event instead of if-else statement.

Popup onselect event

I am currently working with the Laravel Framework and I am working on a webpage that will allow a user to enter a start and end date in order to search through lists of tasks (by that filter). So far, a user can decide from a dropdown list if the date is BEFORE, is ON or is AFTER a certain date that gets selected from an html5 calendar (input type =date). What I'm trying to do is now add an additional option for them to select the start date/end date to be IN BETWEEN two dates. So I preferably want them to select the ' In between ' option, which should trigger a calendar (or two actually) when selected that will allow them to pick those two dates and allow me to store those two values.
I'm new to Javascript/HTML so any help would be very much appreciated!
Here is what I have so far in my HTML file:
<h6 style="float:left">Filter By Date:</h6>
<div style="float:left;clear:left;">
<label for="start">Start Date </label>
<select name="start_op" v-model="filter.start_option" #change="getVueTasks(pagination.current_page)"> <!--As soon as they select a department, call getVueTasks to filter what tasks are displayed-->
<option value="lt">Is Before</option>
<option value="eq" selected>Is On</option>
<option value="gt">Is After</option>
<option value="bt">Is Between</option>
</select>
<br/>
<input type="date" id="start" v-model="filter.start" #change="getVueTasks(pagination.current_page)">
</div>
<div style="float:left">
<label for="end">End Date </label>
<select name="end_op" v-model="filter.end_option" #change="getVueTasks(pagination.current_page)"> <!--As soon as they select a department, call getVueTasks to filter what tasks are displayed-->
<option value="lt">Is Before</option>
<option value="eq" selected>Is On</option>
<option value="gt">Is After</option>
<option value="bt">Is Between</option>
</select>
<br/>
<input type="date" id="end" v-model="filter.end" #change="getVueTasks(pagination.current_page)">
</div>
Note: I do have a separate vue/js file that handles mainly back-end stuff.

You can do something like this -
<select name="start_op" id="start_op">
<option value="lt">Is Before</option>
<option value="eq" selected>Is On</option>
<option value="gt">Is After</option>
<option value="bt">Is Between</option>
</select>
<br/>
<input type="date" id="start">
In jquery -
$(function() {
$("#start_op").on("change",function() {
var st_date= this.value;
if (st_date=="") return; // please select - possibly you want something else here
$('#start').click();
});
});
Hope this will helpful for you.

Creating a filter in javascript to filter results through url

I feel like I am really close to figuring this out. Iv tried so many different ways.
I want to create two selects one for writing_type and the other for sort_by in the agreement model, to filter the results. I think I need a different code in JS file for index.html and possibly edit in my controller.
I found a piece of a solution to my problem, but i couldnt figure out the rest of what i need to make this work.
What i think i need to do: change the model variable to accept params[:writing_type] and :sort_by?
Index.html
<form accept-charset="UTF-8" action="/scribe_requests" method="get">
<input type='submit' value="go">
<select id="querySelct" name="writing_type">
<option value=":all" label="Writing Type">Writing Type</option>
<option value="College Applications" label="College Applications">College Applications</option>
<option value="College Essays" label="College Essays">College Essays</option>
<option value="Business Papers" label="Business Papers">Business Papers</option>
<option value="Resumes" label="Resumes">Resumes</option>
<option value="High-School Essays" label="High-School Essays">High-School Essays</option>
<option value="Scholarship Essays" label="Scholarship Essays">Scholarship Essays</option>
<option value="Language Translation" label="Language Translation">Language Translation</option>
</select>
<select id="landingSelect" name= "sort_by">
<option value="created_at desc" label="Sort By">Sort By</option>
<option value="created_at desc" label="Due Date(closer)">Due Date(closer)</option>
<option value="created_at asc" label="Due Date(further)">Due Date(further)</option>
</select>
</form>
controller:
def index
#agreements = Agreement.where("accepted = ?", false).where("due_date >= ?", DateTime.now).where("writing_type = ?", params[:writing_type]).order(params[:sort_by]).paginate(:page => params[:page], :per_page => 20)
end
Here is partial being called in index.html.erb
</div class="agreements-list">
<%= render 'agreements/lists', agreements: #agreements %>
</div>
The model agreements has columns that i want to sort it by and writing_types that i want to filter with.
So the plan is to use the url and based off the url the list will change it uses &writing_type=1 for example to include at the end of the URL.
How can i add the script URL to the main URL at the top and have it refresh on its own? i can add ajax later!! Unless you have the ajax answer with it? thank you so much this is very important to me! thank you!

I feels like you are doing something straightforward in quite a hard way. You should be able to achive what you want without all the JS by doing it in a form as follows:
<form accept-charset="UTF-8" action="/agreements" method="get">
<input type='submit' value="go">
<select id="querySelct" name="writing_type">
<option value="0" label="Writing Type">Writing Type</option>
<option value="1" label="College Applications">College Applications</option>
<option value="2" label="College Essays">College Essays</option>
<option value="3" label="Business Papers">Business Papers</option>
<option value="4" label="Resumes">Resumes</option>
<option value="5" label="High-School Essays">High-School Essays</option>
<option value="6" label="Scholarship Essays">Scholarship Essays</option>
<option value="6" label="Language Translation">Language Translation</option>
</select>
<select id="landingSelect" name= "sort_by">
<option value="0" label="Sort By">Sort By</option>
<option value="1" label="Due Date(closer)">Due Date(closer)</option>
<option value="2" label="Due Date(further)">Due Date(further)</option>
</select>
</form>
By putting it in a form, with names against the selects, it should submit to the form path (I have guessed it is a get request to /agreements which will route to your index action in the controller), with the parameters populated based on what option is selected
In your index action you should then be able to get the parameters by params[:writing_type] and params[:sort_by]
Update:
To handle all writing types, do it in your index controller differently e.g.
if params[:writing_type] == "all" #or whatever option represents all
#agreements = Agreement.all
else
#agreements = Agreement.where(writing_type: params[:writing_type])
end

how to push the one value to last in list of value combo box

I am having one combo box in that I need value in order by alphabetic.but problem is In that list OTHER one value need to come at last.
we can achieve this using value number arrange according to our need but it contain lot of value and using the key I did lot of process in java script so i take lot of changes to change one thing .
<select>
<option value="Select" selected="selected">Select</option>
<option value="147">Articles Of Association</option>
<option value="135">Birth Certificate</option>
<option value="132">Drivers License</option>
<option value="145">Memorandum Of Articles</option>
<option value="141">Others</option>
<option value="148">Partnership Agreement</option>
<option value="131">Passport</option>
</select>
so using script we can push the OTHER VALUE TO LAST in the list.

$("#list option").filter(function(){
return $(this).text()==='Others'
}).appendTo("#list")
http://jsfiddle.net/SxtnF/

When you have created your list, like
<select id="mycombobox">
<option value=" selected="selected">Select</option>
<option value="147">Articles Of Association</option>
<option value="135">Birth Certificate</option>
<option value="132">Drivers License</option>
<option value="145">Memorandum Of Articles</option>
<option value="141">Others</option>
<option value="148">Partnership Agreement</option>
<option value="131">Passport</option>
</select>
At last, try to add Other like
$("#mycombobox").append('<option value="other">' + Other +'</option>');
This will solve your problem. Hope this will help you out.