The following code should give me a 1 in ParentSelect if I change the option in the menu, but I am getting a 0. Can anyone tell me what is the error?
<input type="hidden" name="ParentSelect" value="0" />
<select class="style" onchange="document.forms[0].elements['ParentSelect']=1" >
<option value="NULL">NULL</option>
...
</select>
Here, I have two tables in the database. They contain some fields like ServerName, etc..
Suggestions?
You are directly assigning the value 1 to the property document.forms[0].elements['ParentSelect'], whereas you presumably mean to change the value of the element, which would be achieved like this:
document.forms[0].elements['ParentSelect'].value = 1
I agree with some of the other comments concerning the lack of valid HTML strucutre, and I would add that if you are going to reference the field via document.forms[0], you may as well give the field an id property so you can simply use 'document.getElementById` so your code works regardless of the other forms on the page. Anyway, using your method, here is the complete code:
<form>
<input type="hidden" name="ParentSelect" value="0" />
<select class="style" onchange="document.forms[0].elements['ParentSelect'].value=1" >
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</form>
Using an id instead:
<form>
<input id="parentSelect" type="hidden" name="ParentSelect" value="0" />
<select class="style" onchange="var e = document.getElementById('parentSelect'); if (e) e.value=1;" >
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</form>
document.forms[0].elements['ParentSelect'] returns whole input, if you want to set it's value use
document.forms[0].elements['ParentSelect'].value = 1
Related
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>
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.
I'm stumped as to why when I change the dropdown value, the input field isn't populated with 'testing':
function changeSubject() {
document.getElementByID('cf7-subject').value = 'testing';
}
<form>
<select onchange="changeSubject()">
<option value="">Select an Option</option>
<option value="General Inquiry">General Inquiry</option>
</select>
<input id="cf7-subject" value="">
</form>
There are 2 issues in the jsfiddle above
Replace getElementByID --> getElementById.
Refere MDN docs for more info
In the fiddle, JS is loading after the view is resolved. Hence, the error is thrown in the console that says
Uncaught ReferenceError: changeSubject is not defined
There are 2 options to resolve this error:
Option 1 - Inline JavaScript
<script type="text/javascript">
function changeSubject() {
document.getElementById('cf7-subject').value = 'testing';
}
</script>
<form>
<select id="cf7-selector" onchange="changeSubject()">
<option value="">
Select an Option
</option>
<option value="General Inquiry">
General Inquiry
</option>
</select>
<input id="cf7-subject">
</input>
</form>
Option 2 - Change the value of LOAD TYPE in your jsfiddle as shown below
Hope this helps!
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
So, I have the following code:
<input ng-model="refreshedByExample" type="text">
<select ng-model="example" ng-change="refreshedByExample = example">
<option value="1" ng-value="valueForRefreshedByExample1">1</option>
<option value="2" ng-value="valueForRefreshedByExample2">2</option>
<option value="3" ng-value="valueForRefreshedByExample3">3</option>
</select>
The value of the value's attribute is different than the value in ng-value. But, somehow, it is overrides and the value attribute gets the same value than ng-value. I get something like this:
<input ng-model="refreshedByExample" type="text">
<select ng-model="example" ng-change="refreshedByExample = example">
<option value="valueForRefreshedByExample1" ng-value="valueForRefreshedByExample1">1</option>
<option value="valueForRefreshedByExample2" ng-value="valueForRefreshedByExample2">2</option>
<option value="valueForRefreshedByExample3" ng-value="valueForRefreshedByExample3">3</option>
</select>
Is there a way to prevent this? I need to have on the value attribute a different value than in ng-value.
Any ideas? Thanks everyone.