We Keep Coding

How to change input type hidden value when select option changed

I am trying to change input type hidden value when select option submit.
if the select box option choose, the list line count changed. but the problem is if I click the page number 2 then select option value, the page number still stay at number 2. I wnat to change page number to 1 when i selected option.
the page number value is input type hidden value (nowPage)
this tis the select box and input
<form action="/list.do" name="searchForm" id="searchForm" method="get">
<input type="hidden" id="nowPage" name="nowPage" value="<%=request.getParameter("nowPage")%>">
<select name="boardlineCount" id="boardlineCount" title="count" onchange="this.form.submit();">
<option value="10">count</option>
<option value="5" <c:if test="${param.boardlineCount eq '5'}">selected </c:if>>5</option>
<option value="30" <c:if test="${param.boardlineCount eq '30'}">selected </c:if>>30</option>
<option value="50" <c:if test="${param.boardlineCount eq '50'}"> selected </c:if>>50</option>
<option value="100" <c:if test="${param.boardlineCount eq '100'}"> selected </c:if>>100</option>
</select>
</form>
this is the script that is tried. am I miss somthing?
<script>
$(function(){
$('#boardlineCount').on('change',function(){
$("#nowPage").val("1");
console.log("?????");
});
});
</script>

The problem is that you're automatically submitting the form when your <select> value changes due to onchange="this.form.submit();".
Attribute event handlers like onchange execute before added event listeners.
document.querySelector("select").addEventListener("change", (e) => {
console.log("change event listener fired:", e.target.value);
});
<select onchange="console.log('onchange attribute fired:', this.value)">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
Remove the onchange attribute and instead, perform the form submit in the change event listener that also sets your #nowPage element.
document.getElementById("boardlineCount").addEventListener("change", (e) => {
document.getElementById("nowPage").value = 1;
e.target.form.submit();
});
FYI, there's no need for jQuery but if you insist...
$("#boardlineCount").on("change", (e) => {
$("#nowPage").val(1);
e.target.form.submit();
});

html convert radio button list into dropdown

I have converted my radio button list in the second fieldset to a dropdown menu. However, I want to pass either the value from the first fieldset which itself is a radio button, or from the selected value of the dropdown menu from the second fieldset. by default my radio button in the first fieldset is checked but when I select from dropdown menu, it doesn't uncheck the radio from first fieldset.
My goal is to pass only one value from these, either radio button value or one of the selected values from dropdown.
You will see my previous radio buttons in the second fieldset, they are commented. but it worked! So how to change the code to work the way it should: i.e. either of the selected value pass: either from radio button or dropdown? if radio button then disable dropdown and vice versa.
<table>
<td>
<fieldset id="field1" >
<legend>Radio</legend>
<label ><Input type = 'Radio' Name ='mychoice' class='mychoice' value= 'myradio' checked>Upload</label>
<div id='uploadFile'>
<input type="file" name="file" id="file" />
</div>
</fieldset>
</td>
<td>
<fieldset id="field2" >
<!--
<div><label ><Input type = 'Radio' Name ='mychoice' class='mychoice' value= 'myoption1' onClick=''>1</label></div>
<div><label ><Input type = 'Radio' Name ='mychoice' class='mychoice' value= 'myoption2' onClick=''>2</label></div>
<div><label ><Input type = 'Radio' Name ='mychoice' class='mychoice' value= 'myoption3' onClick=''>3</label></div>
<div><label ><Input type = 'Radio' Name ='mychoice' class='mychoice' value= 'myoption4' onClick=''>4</label></div>
-->
<select class="mychoice" class='mychoice'>
<option Name ='mychoice' class='mychoice' value="myoption1">1</option>
<option Name ='mychoice' class='mychoice' value="myoption2">2</option>
<option Name ='mychoice' class='mychoice' value="myoption3">3</option>
<option Name ='mychoice' class='mychoice' value="myoption4">4</option>
</select>
</fieldset>
</td>
</table>

First of all don't use a single radio button when you want to check for a yes/no value. Use a checkbox instead. you don't actually need either of these inputs as you could simply handle the event from your uploadFile input.
Second, the id attribute of your <fieldset>s must be unique (see this link). That means you cannot reuse UserChoice as id for all the <fieldset>s and the <select> element. By the way you should really look up the HTML syntax as there are few mistakes your browser silently fixes.
Let's sanctonize your HTML
<fieldset id="DefaultUserChoice">
<legend>Radio</legend>
<label for="mychoice">Upload</label>
<input type="checkbox" id="CheckboxUserChoice" name ="mychoice" class="mychoice" value="mycheckbox" checked="checked">
<div id="uploadFile">
<input type="file" name="file" id="file">
</div>
</fieldset>
<fieldset id="AnotherUserChoice">
<select class="mychoice" id="SelectUserChoice">
<option value="myoption1">1</option>
<option value="myoption2">2</option>
<option value="myoption3">3</option>
<option value="myoption4">4</option>
</select>
</fieldset>
I'd assume that you use javascript though it is missing from your question (sorry cannot write comments yet). In case you don't use it, you should start using it. What you want to achieve cannot be done with HTML alone.
You can now start to use the new id's to check which user input you want to use.
The javascript code would look something like this:
// Handle the checkbox unchecking
document.getElementById("SelectUserChoice").onchange = function(event) {
// Disable the checkbox when the select element changes
}
function validateUserInput() {
if(document.getElementById("CheckboxUserChoice").checked == true) {
// Use the checkbox value
} else {
// Use the select value
}
}
Edit:
A very simple example. The checkbox is no very useful and nothing happens when you uncheck it by yourself.
mySelectedValue.innerText = "mycheckbox";
SelectUserChoice.onchange = function(event) {
// Disable the checkbox when the select element changes
CheckboxUserChoice.checked = false;
mySelectedValue.innerText = event.target.value;
}
CheckboxUserChoice.onchange = function(event) {
mySelectedValue.innerText = event.target.value;
}
<body>
<fieldset id="DefaultUserChoice">
<legend>Radio</legend>
<label for="mychoice">Upload</label>
<input type="checkbox" id="CheckboxUserChoice" name="mychoice" class="mychoice" value="mycheckbox" checked="checked">
<div id="uploadFile">
<input type="file" name="file" id="file">
</div>
</fieldset>
<fieldset id="AnotherUserChoice">
<select class="mychoice" id="SelectUserChoice">
<option value="dontUseMe">-Select a value-</option>
<option value="myoption1">1</option>
<option value="myoption2">2</option>
<option value="myoption3">3</option>
<option value="myoption4">4</option>
</select>
</fieldset>
<p>Value to be used: <span id="mySelectedValue">none</span>
</p>
</body>

Autocomplete dropdown without jQuery with links

I'm trying to use an auto complete dropdown menu using the HTML5 datalist attribute, without JQuery. But I want each suggestion, when selected, goes to an specific link (or when pressed enter, goes to the first suggestion).
What I have right now is:
<form action="www.site.com/search?q=" method="get">
<input name="q" type="text" id="txtAutoComplete" list="languageList"/>
<datalist id="languageList">
<option value="OPTION1" />
<option value="OPTION2" />
</datalist>
</form>
In this case, it performs a search in the site. I want each option to open a specific link, OR to use value at the end of the link http://www.hitsebeats.ninja/search/label/VALUE_HERE, which goes to the correct label in Blogger. In this last case, I thought about adding the event onclick:
<datalist id="languageList" onclick='location=this.options[this.selectedIndex].value;>
<option value='http://www.hitsebeats.ninja/search/label/OPTION1'>
OPTION1
</option>
</datalist>
But no success.

Adding another answer after OP feedback in the comments. This should redirect only if the typed option exists in the datalist.
<script>
function redirect(value) {
var options = document.getElementById("languageList").options;
for(var i = 0; i < options.length; i++) {
if (options[i].value == value)
window.location='http://www.example.com/' + value;
};
}
</script>
<form action="http://www.example.com/search?q=" method="get">
<input name="q" type="text" id="txtAutoComplete" list="languageList" onchange="redirect(this.value)" />
<datalist id="languageList">
<option value='OPTION1'>OPTION1</option>
<option value='OPTION2'>OPTION2</option>
</datalist>
</form>
First Attempt
Using oninput on the input element you can change the location depending on what option you choose.
<form action="http://www.example.com/search?q=" method="get">
<input name="q" type="text" id="txtAutoComplete" list="languageList" onchange="window.location='http://www.example.com/' + this.value" />
<datalist id="languageList">
<option value='OPTION1'>OPTION1</option>
<option value='OPTION2'>OPTION2</option>
</datalist>
</form>
Tell me if it is what you expected or not.

So just you know, datalist doesn't have selected events, it's not a user control. But you can listen to the input change event and them use it to change the url.

can't update siblings in HTML document

I have the following HTML
<td>
<select tabindex="1" id="global_location_id" name="global_location_id">
<option value="0">-- NONE --</option>
<option value="15" style="font-weight: bold">canada</option>
<option value="16" style="font-weight: bold">usa</option>
</select>
<input tabindex="1" id="location_id" name="location_id" value="15" type="hidden">
</td>
When the item in the drop down list changes, I want to save the value in a hidden field... that's a sibling to the drop down.
I have the following jquery code:
$("body").live("change", "#global_location_id", function(e){
console.log(e);
var list = e.target;
var selected_location_value = $(list).val();
console.log(selected_location_value);
//save this value in the sibling <input> box called name=location_id
$(this).siblings("#location_id").attr('value',selected_location_value);
});
I must have a syntax error somewhere because this code is not working. Specifically, it's the line that attempts to save to the hidden input field called location_id that is not updating.
I'm sure it's something simple I'm missing.
Thanks.

I found my mistake.
I had to replace
$(this).siblings("#location_id").attr('value',selected_location_value)
with
$(list).siblings("#location_id").attr('value',selected_location_value)

Disable select box and enable textbox using one checkbox with JavaScript

I'm am fairly new to JavaScript; I have been googling all day for this but i only found how to enable and disable one textbox using one checkbox.
Here is my code
JavaScript
function enable_text(status){
status=!status;
document.sr2.other_text.disabled = status;
}
HTML
<form name=sr2 method=post>
<input type="checkbox" name=others onclick="enable_text(this.checked)">
Others
<input type=text name=other_text>
</form>
Note: the code I posted is only for a textbox that when uncheck in checkbox it will be enabled.
My question is how do you disable select tag and enable a textbox after unchecking a checkbox?

Add an id to your text box then just put the below onclick of your checkbox instead of the function call.
<form name=sr2 method=post>
<input type="checkbox" name=others onclick= "document.getElementById('id_of_txtbox').disabled=this.checked;">Others
<input type=text name=other_text>

Here's the HTML
<input type="text" id="txt" disabled="disabled"/>
<select name="sel" id="sel">
<option value="test1">Test 1</option>
</select>
<input type="checkbox" name="vehicle" value="Car" checked="checked" onclick="enableText(this.checked)">Uncheck to Disable Select and Enable Text
And the JavaScript is
function enableText(checked){
if(!checked){
document.getElementById('sel').disabled = true;
document.getElementById('txt').disabled = false;
}
else{
document.getElementById('sel').disabled = false;
document.getElementById('txt').disabled = true;
}
}
Select is disabled and text is enabled on uncheking the checkbox and vice versa. Hopefully that helps.

Based on your question, are you trying to present a dropdown but then allow them to enter other values not in the dropdown?
If so, here is another way to approach it:
HTML:
<select name="RenewalTerm" id="RenewalTerm">
<option value="12">12 Month</option>
<option value="24">24 Month</option>
<option value="36">36 Month</option>
<option value="Other">Other</option>
</select>
<span id="RenewalTermOtherFields">
<label labelfor="RenewalTermManual" >Enter Renewal Term: </label>
<input type="text" name="RenewalTermManual" id="RenewalTermManual" />
</span>
JavaScript/jQuery:
$(document).ready(function() {
$('#RenewalTermOtherFields').hide();
$('#RenewalTermManual').val($('#RenewalTerm').val());
$('#RenewalTerm').change(function() {
var selectedItem = $("select option:selected").val();
if (selectedItem !== 'Other') {
$('#RenewalTermOtherFields').hide();
$('#RenewalTermManual').val($('#RenewalTerm').val());
}
else
{
$('#RenewalTermManual').val('');
$('#RenewalTermOtherFields').show();
}
});
});
See It In Action!: http://eat-sleep-code.com/#/javascript/dropdown-with-other-field
This will allow you to select "other" from the list, and when you do it will automatically display a textbox for free-form entry.