How to auto click button on input field onchange in javascript

How to auto click button on input field onchange in javascript - javascript

The button should be clicked automatically when amount is >0 and dropdown is selected
<html>
<head>
<script>
document.getElementById("changeLanguage").onchange = function() {
if (inputtxt.value.length == 0) {
$('#bt').trigger('click');
}
};
</script>
</head>
<body>
<label for="fname">Amount</label><input type="number" id="amt" name="amt">
<select onchange="changeLanguage(this.value)">
<option value="Choose" selected="selected">Choose</option>
<option value="IT">Italian</option>
<option value="FR">France</option>
</select>
<button type="button" id="bt">Click Me!</button>
</body>
</html>
I have tried using above code, but didn't work.

If amount means value then you should compare inputtxt.value > 0 in if condition.
document.getElementById("changeLanguage").onchange = function() {
if (inputtxt.value > 0) {
$('#bt').trigger('click');
}
};

You have a few places to adjust.
First you should see the error message
Uncaught TypeError: Cannot set properties of null (setting 'onchange')
This is because you didn't set your select element id attribute.
So replace
<select onchange="changeLanguage(this.value)">
with
<select id="changeLanguage" onchange="changeLanguage(this.value)">
In addition, if you already have jquery, it is recommended not to use inline event, and there is actually no changeLanguage method.
So replace
<select id="changeLanguage" onchange="changeLanguage(this.value)">
with
<select id="changeLanguage">
When you make adjustments, you will find that the change event is listening, but you should see an error message
Uncaught ReferenceError: inputtxt is not defined
This is because you didn't declare the inputtxt variable.
So please add this line
const inputtxt = document.getElementById('amt').value;
The complete code is shown below
document.getElementById('changeLanguage').onchange = function() {
const inputtxt = document.getElementById('amt').value;
if (inputtxt.length == 0) {
$('#bt').trigger('click');
}
};
But I observed that you have used jquery, you can refer to the following code.
$('#changeLanguage').on('change', () => {
if ($('#amt').val().length == 0) {
$('#bt').trigger('click');
}
});
e.g.
$('#changeLanguage').on('change', () => {
if ($('#amt').val().length == 0) {
$('#bt').trigger('click');
}
});
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<label for="fname">Amount</label>
<input type="number" id="amt" name="amt">
<select id="changeLanguage">
<option value="Choose" selected="selected">Choose</option>
<option value="IT">Italian</option>
<option value="FR">France</option>
</select>
<button type="button" id="bt">Click Me!</button>
</body>
</html>

i think you can just trigger the function instead of the click action
document.getElementById("changeLanguage").addEventListener(
'change',
function(e) {
if (e.currentTarget.value.length === 0) {
submit()
}
)
)
<body>
<label for="fname">Amount</label>
<input type="number" id="amt" name="amt">
<select id="changeLanguage">
<option value="Choose" selected="selected">Choose</option>
<option value="IT">Italian</option>
<option value="FR">France</option>
</select>
<button type="button" id="bt" onclick="submit()">Click Me!</button>
</body>

Related

how to set dropdown to select after onclick event in javascript

I have a dropdown with few options in it and a onclick event on a button , after making the selection from the dropdown and clicking on the button how do i set the dropdown to its default that is select by JavaScript.
<select id="userType">
<option value="Select" disabled selected
id="myDefault">Select</option>
<option value="1">Games</option>
<option value="2">Movies</option>
</select>
<button type="button" name="button"onclick="addOption()">Send</button>
function addOption(){
if (userType.value === "Select") {
alert("Please select correct option");
}
else{
console.log(userType.options[userType.selectedIndex].value);
}
document.getElementById('userType').value = "Select";
}

Pretty straight forward. Just select the input by id and set its value to whatever the default should be.
function addOption(){
// Do stuff...and then:
document.getElementById('userType').value = "Select";
}
<select id="userType">
<option value="Select" disabled selected
id="myDefault">Select</option>
<option value="1">Games</option>
<option value="2">Movies</option>
</select>
<button type="button" name="button"onclick="addOption()">Send</button>

<html>
<body>
<form id="myForm">
<select id="a">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<br>
<input type="button" onclick="myFunction()" value="Reset">
</form>
</body>
</html>
<script>
function myFunction() {
document.getElementById('a').selectedIndex = 0;
}
</script>
try this

Here is your working code:
$("button").click(function() {
$('select').prop('selectedIndex', 0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="userType">
<option value="Select" disabled selected
id="myDefault">Select</option>
<option value="1">Games</option>
<option value="2">Movies</option>
</select>
<button type="button" name="button">Send</button>

You can attach change event to <select> element, declare a variable, at event handler set variable to true to verify that change event has occurred. At click of <button> set select .selectedIndex property to 0 if Boolean value is true, set Boolean to false.
<script>
var changed, select;
function addOption() {
if (changed) {
select.selectedIndex = 0;
changed = false;
}
}
onload = function() {
select = document.getElementById("userType");
select.onchange = function() {
changed = true;
}
}
</script>
<select id="userType">
<option value="Select" disabled selected
id="myDefault">Select</option>
<option value="1">Games</option>
<option value="2">Movies</option>
</select>
<button type="button" name="button" onclick="addOption()">Send</button>

Run Javascript if Select values =

I make a script to calculate number.
But i want this script to be work only when user select dropdown to text2 (value=5)
But this script is not working (nothing happened when run the script) :(
Can anyone help or suggest me getting started with this script Please.
<select id="stt" onchange="copy()">
<option value="">Select</option>
<option value="8">text1</option>
<option value="5">text2</option>
<option value="4">text3</option>
</select><br>
Calculate<br>
<input type="text" id="input">
<input type="text" disabled="disabled" id="result">
<script>
function copy() {
if (document.getElementById("stt").value == "5") {
$(document).ready(function(){
$("#input").keyup(function(){
var val1 = +$("#input").val();
$("#result").val(val1*79);
});
});
}
}
</script>

**EDIT**: Changed $("#input").on("change" with $("#input").on("keypress".
New working JSFiddle: http://jsfiddle.net/L69dp/1/
HTML Code:
<select id="stt">
<option value="">
Select
</option>
<option value="8">
text1
</option>
<option value="5">
text2
</option>
<option value="4">
text3
</option>
</select><br>
Calculate<br>
<form>
<input id="input" type="text"> <input disabled="true" id="result" type=
"text">
</form>
JS Code:
$(function() {
function calculate() {
var sttval = $("#stt").val();
if (sttval == "5") {
var val1 = $("#input").val();
$("#result").val(val1 * 79);
} else {
$("#result").val("");
}
}
$("#stt").on("change", function() {
calculate();
});
$("#input").on("keypress", function() {
calculate();
});}());

You need to add a reference to the jquery library:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
Put this before your existing script block.
Also, you do not need $(document).ready(function(){} inside the copy() function.

<head>
<script>
var value;
function copy() {
value=document.getElementById("stt").value; //get the value of select everytime it change the value
}
function dd()
{
if(value=="5")//if the value is 5 do the code below
{
var val1= document.getElementById('input');
document.getElementById('result').value=val1.value*79;
}
}
</script>
</head>
<body >
<select id="stt" onchange="copy()">
<option value="">Select</option>
<option value="8">text1</option>
<option value="5">text2</option>
<option value="4">text3</option>
</select><br>
<input type="text" id="input" oninput="dd()" >
<input type="text" disabled="disabled" id="result">
</body>
</html>

assign a javascript variable value depends on html drop down list section

I have a drop html list. If I select an option from dropdown, I have to assign dropdown value to the javascript variable and display it on html
Here is my code
HTML:
<form method="post">
<select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input type="hidden" name="hiddenInput" id="hiddenInput" value="" />
<button onclick="changeHiddenInput (objDropDown)">Try it</button>
</form>
<div id="result"> </div>
Javascript:
function changeHiddenInput (objDropDown)
{
var objHidden = document.getElementById("hiddenInput");
objHidden.value = objDropDown.value;
var a = objHidden.value;
result.innerHTML = a || "";
}
But whenever I am submitting the values,it giving error. anything wrong here ?
DEMO

On your demo, you've selected the default onLoad option in jsfiddle.
This causes the site to wrap your entire code within a callback function, meaning that your showit function is not a global function as required by DOM0 inline event handlers.
Change this option to no wrap(head) and it will work.
The code you have will work good on a page, assuming you have the <script> tags for the javascript.
Fiddle here
About your <button onclick="changeHiddenInput (objDropDown)">Try it</button>, objDropDown is not defined... and also add type="button" otherwise the default is a submit button.
I made some changes for the demo, so my code is:
html
<form method="post">
<select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input type="hidden" name="hiddenInput" id="hiddenInput" value="" />
<button onclick="changeHiddenInput (objDropDown)">Try it</button>
</form>
<div id="result"> </div>
javascript
var select;
window.onload = function () {
select = document.getElementById('dropdown');
console.log(select);
}
function changeHiddenInput(objDropDown) {
console.log(objDropDown);
var objHidden = document.getElementById("hiddenInput");
objHidden.value = objDropDown.value;
var a = objHidden.value;
result.innerHTML = a || "";
}

How to show form input fields based on select value?

I know this is simple, and I need to search in Google. I tried my best and I could not find a better solution. I have a form field, which takes some input and a select field, which has some values. It also has "Other" value.
What I want is:
If the user selects the 'Other' option, a text field to specify that 'Other' should be displayed. When a user selects another option (than 'Other') I want to hide it again. How can I perform that using JQuery?
This is my JSP code
<label for="db">Choose type</label>
<select name="dbType" id=dbType">
<option>Choose Database Type</option>
<option value="oracle">Oracle</option>
<option value="mssql">MS SQL</option>
<option value="mysql">MySQL</option>
<option value="other">Other</option>
</select>
<div id="otherType" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Databse Type"/>
</div>
Now I want to show the DIV tag**(id="otherType")** only when the user selects Other.
I want to try JQuery. This is the code I tried
<script type="text/javascript"
src="jquery-ui-1.10.0/tests/jquery-1.9.0.js"></script>
<script src="jquery-ui-1.10.0/ui/jquery-ui.js"></script>
<script>
$('#dbType').change(function(){
selection = $('this').value();
switch(selection)
{
case 'other':
$('#otherType').show();
break;
case 'default':
$('#otherType').hide();
break;
}
});
</script>
But I am not able to get this. What should I do? Thanks

You have a few issues with your code:
you are missing an open quote on the id of the select element, so: <select name="dbType" id=dbType">
should be <select name="dbType" id="dbType">
$('this') should be $(this): there is no need for the quotes inside the paranthesis.
use .val() instead of .value() when you want to retrieve the value of an option
when u initialize "selection" do it with a var in front of it, unless you already have done it at the beggining of the function
try this:
$('#dbType').on('change',function(){
if( $(this).val()==="other"){
$("#otherType").show()
}
else{
$("#otherType").hide()
}
});
http://jsfiddle.net/ks6cv/
UPDATE for use with switch:
$('#dbType').on('change',function(){
var selection = $(this).val();
switch(selection){
case "other":
$("#otherType").show()
break;
default:
$("#otherType").hide()
}
});
UPDATE with links for jQuery and jQuery-UI:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>‌

Demo on JSFiddle
$(document).ready(function () {
toggleFields(); // call this first so we start out with the correct visibility depending on the selected form values
// this will call our toggleFields function every time the selection value of our other field changes
$("#dbType").change(function () {
toggleFields();
});
});
// this toggles the visibility of other server
function toggleFields() {
if ($("#dbType").val() === "other")
$("#otherServer").show();
else
$("#otherServer").hide();
}
HTML:
<p>Choose type</p>
<p>Server:
<select id="dbType" name="dbType">
<option>Choose Database Type</option>
<option value="oracle">Oracle</option>
<option value="mssql">MS SQL</option>
<option value="mysql">MySQL</option>
<option value="other">Other</option>
</select>
</p>
<div id="otherServer">
<p>Server:
<input type="text" name="server_name" />
</p>
<p>Port:
<input type="text" name="port_no" />
</p>
</div>
<p align="center">
<input type="submit" value="Submit!" />
</p>

You have to use val() instead of value() and you have missed starting quote id=dbType" should be id="dbType"
Live Demo
Change
selection = $('this').value();
To
selection = $(this).val();
or
selection = this.value;

I got its answer. Here is my code
<label for="db">Choose type</label>
<select name="dbType" id=dbType">
<option>Choose Database Type</option>
<option value="oracle">Oracle</option>
<option value="mssql">MS SQL</option>
<option value="mysql">MySQL</option>
<option value="other">Other</option>
</select>
<div id="other" class="selectDBType" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Databse Type"/>
</div>
And my script is
$(function() {
$('#dbType').change(function() {
$('.selectDBType').slideUp("slow");
$('#' + $(this).val()).slideDown("slow");
});
});

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function myfun(){
$(document).ready(function(){
$("#select").click(
function(){
var data=$("#select").val();
$("#disp").val(data);
});
});
}
</script>
</head>
<body>
<p>id <input type="text" name="user" id="disp"></p>
<select id="select" onclick="myfun()">
<option name="1"value="1">first</option>
<option name="2"value="2">second</option>
</select>
</body>
</html>

$('#dbType').change(function(){
var selection = $(this).val();
if(selection == 'other')
{
$('#otherType').show();
}
else
{
$('#otherType').hide();
}
});

JavaScript Populating an input Field Using an Html combo Box

i am trying to find a way to allow a user to click items in a combo box and have its value populate an input field and also alert "work stop" or "work start" message when appropriate option is selected. But my code is not working. Please Help!
Here is my code:
<html>
<head>
</head>
<body>
<form>
<select name="sel1" onChange="populateField(this.form)" >
<option value="">---Select---</option>
<option value="stop" >Stop</option>
<option value="start">Start</option>
</select>
<input type="text" id="eStop" name="eStop" />
</form>
<script type="text/javascript">
function populateField(frm){
test = frm.stop.value;
alert('work' test);
frm.eStop.value = test;
}
</script>
</body>
</html>
Thanks in Advance

http://jsfiddle.net/snHQY/
<form>
<select name="sel1" id="select" onchange="populateField();" >
<option value="">---Select---</option>
<option name="stop" value="stop" >Stop</option>
<option name="start" value="start">Start</option>
</select>
<input type="text" id="eStop" name="eStop" />
</form>
<script>
function populateField() {
test = document.getElementById('select').value;
alert(test);
document.getElementById('eStop').value = test;
}
</script>

You can do it using the selectedIndex if you want as well,
<form>
<select name="sel1" id="select" onchange="populateField(this);" >
<option value="">---Select---</option>
<option name="stop" value="stop" >Stop</option>
<option name="start" value="start">Start</option>
</select>
<input type="text" id="eStop" name="eStop" />
</form>
<script>
function populateField(sel) {
sel.form.eStop.value = 'work ' + (sel.selectedIndex == 1 ? 'Stop' : 'Start');
}
</script>
http://jsfiddle.net/cnpuM/

Your code has two errors. You can not reference an element by its value like this test = frm.stop.value; instead use test = frm.sel1.value; . Another error is in this line alert('work' test);. Here you are joining a string "work" with a variable "test". In java script where ever you join two or more variables or strings and variables you alway have to join them with + sign like this:alert('work ' + test);. Remaining code is ok:
<html>
<head>
</head>
<body>
<form>
<select name="sel1" onChange="populateField(this.form)" >
<option value="">---Select---</option>
<option value="stop" >Stop</option>
<option value="start">Start</option>
</select>
<input type="text" id="eStop" name="eStop" />
</form>
<script type="text/javascript">
function populateField(frm){
var test = frm.sel1.value;
alert('work '+ test);
frm.eStop.value = test;
}
</script>
</body>
</html>
You can also use selectedIndex property of "sel1" to do the same.

in your select you can add to onchange's and onkeypress to the populateField's function this as the objects reference.
<select name="sel1" onchange="populateField(this)" onkeypress="populateField(this)">
Now you can reference the select from o. to pass the selected value to the alert dialog and the input field.
function populateField(o){
alert("work " + o.value);
// use regular W3C DOM syntax for element referencing the input and populate it with the select objects selected options value
document.getElementById("eStop").value = o.value;
}

Develop Reference

JavaScript is the programming language of the Web.

How to auto click button on input field onchange in javascript - javascript

If amount means value then you should compare inputtxt.value > 0 in if condition. document.getElementById("changeLanguage").onchange = function() { if (inputtxt.value > 0) { $('#bt').trigger('click'); } };

Related

how to set dropdown to select after onclick event in javascript

Run Javascript if Select values =

assign a javascript variable value depends on html drop down list section

How to show form input fields based on select value?

JavaScript Populating an input Field Using an Html combo Box

Categories

Resources