We Keep Coding

show div on form option selected by user using id or class

First question here so please go easy on me ! Trying to get this form select working but after hours still struggling. Code works fine when just one option has an id, but will not work with multiple id's. Have a feeling the right approach would be to assign each select option with a class but still can't figure it out.
Any assistance would be gratefully appreciated !
<form>
<p align="center">Size :
<input type="hidden" value="1" name="qty1" />
<select name="productpr1" id="getFname" onchange="showdiv(this);">
<option selected value="ERROR - Please select finish">please select</option>
<option id="show" value="product 1:5:0:105805">product 1</option>
<option id="" value="product 2:10:0:105205">product 2</option>
<option id="show" value="product 3:15:0:105605">product 3</option>
</select>
</p>
<div id="admDivCheck" style="display:none;text-align:center;">Choose delivery date</div>
<p><input type="submit" class="button" value="ADD TO BASKET" /></p>
</form>
<script>
function showdiv(nameSelect)
{
console.log(nameSelect);
if(nameSelect){
admOptionValue = document.getElementById("show").value;
if(admOptionValue == nameSelect.value){
document.getElementById("admDivCheck").style.display = "block";
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
</script>
Edit
Thanks for the assistance on here - the final version which works as I need :
<input type="hidden" value="1" name="qty1" />
<select name="productpr1" id="getFname" onchange="showdiv();">
<option selected value="ERROR - Please select finish">please select</option>
<option class="show" value="product 1:5:0:105805">product 1</option>
<option class="" value="product 2:10:0:105205">product 2</option>
<option class="show" value="product 3:15:0:105605">product 3</option>
</select>
<div id="admDivCheck" style="display:none">Choose delivery date</div>
<p><input type="submit" class="button" value="ADD TO BASKET" /></p>
<script>
function showdiv() {
var getFname= document.getElementById("getFname");
var askForDelivery = getFname.options[getFname.selectedIndex].classList;
if(askForDelivery.contains('show')){
document.getElementById('admDivCheck').style.display = 'block';
}
else{document.getElementById('admDivCheck').style.display = 'none';
}}
</script>

the id property is for the object document model and should be unique, just use 1,2,3 for it

In your script admOptionValue == nameSelect.value This value checking will always same, because selected option only the value of select tag.....
function showdiv(nameSelect)
{
console.log('choosed option',nameSelect.value);
if(nameSelect.value !="") document.getElementById("admDivCheck").style.display = "block";
else document.getElementById("admDivCheck").style.display = "none";
}
<form>
<p align="center">Size :
<input type="hidden" value="1" name="qty1" />
<select name="productpr1" id="getFname" onchange="showdiv(this);">
<option selected value="">please select</option>
<option value="product 1:5:0:105805">product 1</option>
<option value="product 2:10:0:105205">product 2</option>
<option value="product 3:15:0:105605">product 3</option>
</select>
</p>
<div id="admDivCheck" style="display:none;text-align:center;">Choose delivery date</div>
<p><input type="submit" class="button" value="ADD TO BASKET" /></p>
</form>

The reason that it is not working when having multiple id's is this line here:
admOptionValue = document.getElementById("show").value;
That is always going to return the first element with id show.
You should be able to get the selected value like this:
function showdiv() {
var getFname= document.getElementById("getFname");
var selectedValue = getFname.options[getFname.selectedIndex].value;
alert(selectedValue);
}
<select name="productpr1" id="getFname" onchange="showdiv();">
<option selected value="ERROR - Please select finish">please select</option>
<option value="product 1:5:0:105805">product 1</option>
<option value="product 2:10:0:105205">product 2</option>
<option value="product 3:15:0:105605">product 3</option>
</select>
So All I did was get the selectedIndex of the select box, rather than getting the individual option by id. All the options should have a unique id, and trying to get all of them would be a huge waste of time
EDIT
As mentioned earlier, you wanted to add a class to a specific item to determine if it should show or hide another div.
All you would do is check for classList instead of value to determine if it is true.
All you would have to do is get the classList of the selected item. If it contains the desired class, show your hidden div.
function showdiv() {
var getFname= document.getElementById("getFname");
var askForDelivery = getFname.options[getFname.selectedIndex].classList;
if(askForDelivery.contains('show')){
document.getElementById('admDivCheck').style.display = 'block';
}
}
I made a fiddle to demonstrate:
https://jsfiddle.net/k68nuams/

How to show input and remove it based on select box?

I have two input I need to show one of them based on the select box:
html code:
<select id="type-price">
<option value="">Choose one...</option>
<option value="numeric">Numeric </option>
<option value="percentage">Percentage</option>
</select>
<div id="input_type1">
<input type="text" name="Numeric">
</div>
<div id="input_type2">
<input type="text" name="Percentage">
</div>
jQuery code:
$('#type-price').on('change',function(){
if($(this).val()=== "numeric"){
$("#input_type1").show();
$("#input_type2").hide();
}else if ($(this).val()=== "percentage"){
$("#input_type1").hide();
$("#input_type2").show();
}
});
Now it's totally fine like that but my issue I have php request when I show input_type1 then hide input_type2 the request pick up second one which is null so I need to delete the hide one at all form Dom tree!

You can empty the div which contain the input and you will have only one input in your DOM. On each change of select, it will fill the concerne div by the input html.
Also you'd used wrong selector, the # selector is for id and you have used an class in your HTML code.
The JQuery class selector is ..
function removeAll() {
$("#input_type1").html('');
$("#input_type2").html('');
}
removeAll();
$('#type-price').on('change',function(){
removeAll();
if ($(this).val() === "numeric"){
$("#input_type1").append('<input type="text" value="numeric">');
} else if ($(this).val() === "percentage"){
$("#input_type2").append('<input type="text" value="percentage">');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="type-price">
<option value="" disabled selected>Choose one...</option>
<option value="numeric">Numeric </option>
<option value="percentage">Percentage</option>
</select>
<div id="input_type1">
<input type="text" value="numeric">
</div>
<div id="input_type2">
<input type="text" value="percentage">
</div>

Here is an example with one field.
$(function() {
$("#type-price").change(function(e) {
$(".input-type").fadeIn("slow").find("input").attr("name", $(this).val().toLowerCase());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="type-price">
<option value="">Choose one...</option>
<option value="numeric">Numeric </option>
<option value="percentage">Percentage</option>
</select>
<div class="input-type" style="display: none;">
<input type="text">
</div>

Besides some syntax problem in your jQuery class selector, Thinking about performance, It's simply better to prevent the (non-visible) input from being sent.
Shorter coding and less dom manipulation.
$('#type-price').on('change',function(){
$('.input_type1').toggle($(this).val()=="numeric");
$('.input_type2').toggle($(this).val()=="percentage");
});
//To prevent the non-visible from being posted
//Eithr we check the form using submit handler or the button and prevent the
//from being sent do our stuff then send it...
$('#myForm').submit(function() {
$('input:hidden').attr('name', '');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<select id="type-price">
<option value="">Choose one...</option>
<option value="numeric">Numeric </option>
<option value="percentage">Percentage</option>
</select>
<div class="input_type1">
<input name="inp1" type="text" placeholder="1">
</div>
<div class="input_type2">
<input name="inp2" type="text" placeholder="2">
</div>
<input type="submit" value="Send">
</form>

How can i disable my input and the content inside using a selected option

I have looked around and haven't found a solution to my problem, I am trying to learn javascript and jquery. what I want to learn is how can I do so when I select the option "none" the <input> and the data inside it, should be disabled.
this is my attempts:
First attempt link:http://jsfiddle.net/kmtLy705/7/
First attempt code: (Works with buttons)
<input disabled id="page_navigation1" type="number">
<button class="add">Add</button>
<button class="remove">Remove</button>
<select>
<option value="0" class="add" selected>None</option>
<option value="1" class="remove">select</option>
<option value="2" class="remove">select</option>
<option value="3" class="remove">select</option>
<option value="4" class="remove">select</option>
<option value="5" class="remove">select</option>
</select>
jquery
$('.add').click(function() {
$('#page_navigation1').attr('disabled', true)
});
$('.remove').click(function() {
$('#page_navigation1').removeAttr('disabled');
});
Now, this code works with buttons but I have tried countless ways to make it work with an option and haven't found a solution yet.
Second attempt link: http://jsfiddle.net/5u9pfot0/1/ this doesn't work at all but the idea was there (when val1 is selected then the input should be disabled)
Second attempt code:
<select id="selectid" name="selectname">
<option value="val1" id="valid1"> Val1 </option>
<option value="val2" id="valid2"> Val2 </option>
<option value="val3" id="valid3"> Val3 </option>
</select>
<input disabled id="page_navigation1" type="number">
jquery:
if (document.getElementById('selectid').value == "val1") {
$('#page_navigation1').attr('disabled', true)
}

I have modified your second approach just a little.
Try doing below:
function callthis()
{
if (document.getElementById('selectid').value == "val1") {
$('#page_navigation1').attr('disabled', true);
}
else
$('#page_navigation1').attr('disabled', false);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectid" name="selectname" onchange="callthis();">
<option default disabled>Choose one</option>
<option value="val1" id="valid1"> Val1 </option>
<option value="val2" id="valid2"> Val2 </option>
<option value="val3" id="valid3"> Val3 </option>
</select>
<input disabled id="page_navigation1" type="number">

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 can I insert a variable into the resulting url parameter string after submitting my GET form?

I have a form that queries a library database on another site. It works perfectly if I only include input fields for the "format" and "keyword" because the resulting parameters passed to the url come out in the correct order and the destination site recognizes it.
However, I also need my form to have an input field to select to search by "Author", "Title", "Subject" etc. This is what causes the problem. The destination site only recognizes this parameter if it is in the middle of the url (inside the keyword parameter).
My current resulting url:
http://alpha2.suffolk.lib.ny.us/search~S50/X?SEARCH=harry&searchscope=50&SORT=D&m=b
What I need the url to look like:
http://alpha2.suffolk.lib.ny.us/search~S50/X?SEARCH=t:(harry)&searchscope=50&SORT=D&m=b
If you compare the two you will notice a couple differences. First, ignore the parentheses around harry. That doesn't make a difference. The real issue is how do I get the "t:" to be inserted into my url? The "t:" comes from selecting "Title" as the thing to search by.
Here is my current form HTML (If you remove the "searchtype" select box at the bottom the form will execute without errors, but I need it to execute with it.)
<form class="form-inline" role="search" method="get" name="searchform" id="searchform" action="http://alpha2.suffolk.lib.ny.us/search~S50/X">
<div class="form-group" style="float: left; margin-top: 6px;">
<label class="form-title">Search Collection</label>
</div>
<div class="form-group">
<input type="text" value="" name="SEARCH" id="SEARCH" placeholder="Enter Search Terms..." />
<input type="hidden" value="50" name="searchscope" />
<input type="hidden" value="D" name="SORT" />
</div>
<div class="form-group" style="float: left; margin-top: 3px;">
<label for="searchformat">For:</label>
<select name="m" id="m">
<option value="">ANY</option>
<option value="a">BOOK</option>
<option value="e">EBOOK DOWNLOAD</option>
<option value="l">LARGE PRINT BOOK</option>
<option value="b">BLU-RAY</option>
<option value="g">DVD</option>
<option value="i">AUDIO BOOK CD</option>
<option value="h">AUDIO BOOK MP3CD</option>
<option value="x">EAUDIOBOOK DOWNLOAD</option>
<option value="q">PLAYAWAY</option>
<option value="j">MUSIC CD</option>
<option value="p">MAGAZINE/NEWSPAPER</option>
<option value="n">EMAGAZINE DOWNLOADS</option>
<option value="v">PLAYAWAY VIEW</option>
<option value="s">VIDEO GAME</option>
<option value="r">CD-ROM</option>
<option value="d">VHS</option>
<option value="t">GAMES/PUZZLES</option>
<option value="f">DIGITAL IMAGE</option>
<option value="z">EVIDEO DOWNLOADS</option>
<option value="y">EMUSIC DOWNLOADS</option>
<option value="c">SHEET MUSIC</option>
<option value="m">MAP</option>
<option value="w">ONLINE RESOURCE</option>
<option value="o">OTHER MATERIALS</option>
</select>
</div>
<div class="form-group" style="float: left; margin-top: 3px;">
<label for="searchtype">By:</label>
<select name="" id="searchtype">
<option value="a:"> Author</option>
<option value="t:"> Title</option>
<option value="d:"> Subject</option>
<option value="N:"> Note</option>
<option value="" selected="selected"> Keyword</option>
</select>
</div>
<button class="btn btn-primary" id="searchsubmit" type="Submit">GO</button>
</form>
EDIT:
The attempted Javascript (as requested in the comments):
<script>
function searchSubmit() {
m = document.getElementById("m").value;
t = document.getElementById("searchtype").value;
a = document.getElementById("searcharg").value;
var newurl = "alpha2.suffolk.lib.ny.us/search/X~S22?SEARCH="; + t + a + "&searchscope=50&SORT=D&m=" + m;
var searchform = document.getElementById("searchform");
searchform.action = newurl; searchform.submit();
}
</script>

What I would do is get the searchtype-value and add it to the input-search before submitting. Here is a JS-fiddle example:
$(document).ready(function(){
$("#searchform").on("submit", function(e){
var keyWord = $("#SEARCH").val();
var searchtype = $("#searchtype").val();
$("#SEARCH").val(searchtype + keyWord);
});
});

If you want to use the JavaScript approach, you will have to use AJAX and prevent the default behavior of the button.
document.getElementById("searchsubmit").addEventListener("click", function(event){
event.preventDefault();
var xhttp = new XMLHttpRequest();
//here you set up your variables. One example is
var mysearch = "SEARCH=" + document.getElementById("searchtype").value + document.getElementById("SEARCH").value;
xhttp.open("GET", "yourURL?" + yourVariables, true);
xhttp.send();
});