We Keep Coding

Assign input box value from another input box on select click in jquery

I have a form where there are 5 fields, 3 of them has a value like hours,days and lease which has default values, then one selectbox and another empty input box, my code is like below:
$(document).ready(function() {
$('#hr').change(function() {
$('#mytexts').val($('#hours').val());
});
});
<input type="text" id="hours" value="23" readonly/>
<input type="text" id="days" value="33" readonly/>
<input type="text" id="lease" value="33" readonly/>
<select name="hours" id="hr">
<option value="" onchange="myFunctionhours(this)">---Select---</option>
<option value="hours">Hours</option>
<option value="days">Days</option>
<option value="lease">Lease</option>
</select>
<input type="text" name="crate" id="mytexts" value="" readonly/>
When a value is selected From the selectBox I want to empty input box to get values from the 3 input boxes accordingly, now in what I did I am able to only get the value of hours box, can anyone please tell me how to do this, thanks in advance

you have to take the the value from the change event , by useing event.target.value then assign its follwing value to the result input as follow :
$('#hr').change(function(event) {
let selected = event.target.value;
if(selected) $('#mytexts').val($("#"+selected).val());
});
see below wokring snippet :
$(document).ready(function() {
$('#hr').change(function(event) {
let selected = event.target.value;
$("#choise").html(selected)
if(selected) $('#mytexts').val($("#"+selected).val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="hours" value="23" readonly/>
<input type="text" id="days" value="33" readonly/>
<input type="text" id="lease" value="33" readonly/>
<br /><br />
<select name="hours" id="hr">
<option value="" onchange="myFunctionhours(this)">---Select---</option>
<option value="hours">Hours</option>
<option value="days">Days</option>
<option value="lease">Lease</option>
</select>
<br /><br />
<input type="text" name="crate" id="mytexts" value="" readonly/> <span id="choise"></span>

You have to use the value of dropdown value as query selector in JQuery.
$(document).ready(function() {
$('#hr').change(function() {
$('#mytexts').val($("#"+$('#hr').val()).val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- begin snippet: js hide: false console: true babel: null -->

Enable submit button only when all fields are not empty - type > file & select & input

<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
<script type="text/javascript">
required = function(fields) {
var valid = true;
fields.each(function () { // iterate all
var $this = $(this);
if (($this.is(':checkbox') && !$this.is(":checked")) || // checkbox
(($this.is(':text') || $this.is('textarea')) && !$this.val()) || // text and textarea
($this.is(':radio') && !$('input[name='+ $this.attr("name") +']:checked').length)) { // radio
valid = false;
}
});
return valid;
}
validateRealTime = function () {
var fields = $("form :input:not(:hidden)"); // select required
fields.on('keyup change keypress blur', function () {
if (required(fields)) {
{submit.disabled = false} // action if all valid
} else {
{submit.disabled = true} // action if not valid
}
});
}
validateRealTime();
</script>
<form action="" method="post" id="submitform" />
Title:
<input type="text" name="title">
Select:
<select>
<option value="">aaa</option>
<option value="1">bbb</option>
<option value="2">ccc</option>
</select>
<br/>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
<br>
Description:
<textarea name="description"></textarea>
<br/>
Category:
<ul class="list:category categorychecklist form-no-clear" id="categorychecklist">
<li id="category-19"><label class="selectit"><input type="radio" id="in-category-19" name="category" value="19"> Animation</label></li>
<li id="category-20"><label class="selectit"><input type="radio" id="in-category-20" name="category" value="20"> Anime</label></li>
</ul>
<input type="submit" value="Submit Topic" class="button-primary" name="submit" id="submit" disabled="disabled" />
</form>
Hi i want to enable the submit button only when all field are filled specially the select input and the file input here's a working code for the other type except the select and the file type
The code below is doing this
When the text field is empty the submit should be disabled
(disabled="disabled").
When something is typed in the text field to remove the disabled
attribute.
If the text field becomes empty again(the text is deleted) the
submit button should be disabled again.
My aim is to enable submit button only once everything has been filled. How do I do this?
Any ideas? how can i disable the submit button when user is not choosing a file or an option in the form
<form action="" method="post" id="submitform" /> Title:
<input type="text" name="title"> Select:
<select>
<option value="">aaa</option>
<option value="1">bbb</option>
<option value="2">ccc</option>
</select>
<br/>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
<br> Description:
<textarea name="description"></textarea>
<br/> Category:
<ul class="list:category categorychecklist form-no-clear" id="categorychecklist">
<li id="category-19"><label class="selectit"><input type="radio" id="in-category-19" name="category" value="19"> Animation</label></li>
<li id="category-20"><label class="selectit"><input type="radio" id="in-category-20" name="category" value="20"> Anime</label></li>
</ul>
<input type="submit" value="Submit Topic" class="button-primary" name="submit" id="submit" disabled="disabled" />
</form>

You closed your form tag
You cannot name or ID anything in a form "submit" - it will stop any future submission by script so get used to not doing it
You COULD just add the required attribute to the fields, then the form would give error when submitted
Here is how to disable in not both text field and textarea have content
$(function() {
$("#submitform").on("input",function() {
const anythingEmpty = $(":input").val().trim() === "";
$("#subBut").prop("disabled",anythingEmpty);
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post" id="submitform"> Title:
<input type="text" name="title"> Select:
<select>
<option value="">aaa</option>
<option value="1">bbb</option>
<option value="2">ccc</option>
</select>
<br/>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
<br> Description:
<textarea name="description"></textarea>
<br/> Category:
<ul class="list:category categorychecklist form-no-clear" id="categorychecklist">
<li id="category-19"><label class="selectit"><input type="radio" id="in-category-19" name="category" value="19"> Animation</label></li>
<li id="category-20"><label class="selectit"><input type="radio" id="in-category-20" name="category" value="20"> Anime</label></li>
</ul>
<input type="submit" id="subBut" value="Submit Topic" class="button-primary" disabled="disabled" />
</form>
Plain JS
window.addEventListener("load",function() {
document.getElementById("submitform").addEventListener("input",function() {
const desEmpty = this.querySelector("[name=description]").value.trim() === "";
const txtEmpty = this.querySelector("[name=title]").value.trim() === "";
document.getElementById("subBut").disabled = desEmpty || txtEmpty
})
})

If u add id on every input, u can use next js vanilla code, and add onchange function on form.
<head>
<script>
function validate(){
var submit = document.getElementById('submit');
var title = document.getElementById('title').value === ""? false: true;
var file = document.getElementById("myfile").value === ""? false: true;
var val19 = document.getElementById("in-category-19").checked;
var val20 = document.getElementById("in-category-20").checked;
var checked = val19 || val20;
var textArea = document.getElementById("textarea").value===""?false: true;
var filled =(checked && title&& textArea && file);
filled? submit.disabled=false: submit.disabled=true;
}
</script>
</head>
<body><form onchange="validate();" action="" method="post" id="submitform" /> Title:
<input type="text" id="title" name="title"> Select:
<select>
<option value="">aaa</option>
<option value="1">bbb</option>
<option value="2">ccc</option>
</select>
<br/>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
<br> Description:
<textarea id ="textarea" name="description"></textarea>
<br/> Category:
<ul class="list:category categorychecklist form-no-clear" id="categorychecklist">
<li id="category-19"><label class="selectit"><input type="radio" id="in-category-19" name="category" value="19"> Animation</label></li>
<li id="category-20"><label class="selectit"><input type="radio" id="in-category-20" name="category" value="20"> Anime</label></li>
</ul>
<input type="submit" value="Submit Topic" class="button-primary" name="submit" id="submit" disabled=true />
</form>
</body>

Conditionally change form action in JSP based on combo box selection

I am have three servers in three different domains. For example,
google.com
oracle.com
sap.com
I have a combo box with the same values as above. How can I change the form action to change to respective site once it is selected in the combo box?
Here is the code i have tried.
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#serverName").on("change",function(){
alert($(this).val());
if($(this).val().toString===("google"))
$("#dataform").attr('action',"http://google.com");
if($(this).val().toString===("oracle"))
$("#dataform").attr("action","http://oracle.com");
if($(this).val().toString===("sap"))
$("#dataform").attr("action","http://sap.com");
});
});
</script>
My form is like :
<form action="anyaction" name="dataform" method="post" >
<img src="logo.png"><br/>
<label for="email" class="boldtext">Triggered By</label><br>
<input type="text" id="email" name="email" placeholder="Enter your mail id"
required><br/>
<label for="serverName" class="`boldtext`">Server Name</label>
<select id="serverName" name="serverName" >
<option value="selectServer">Select the Server</option>
<option value="google">Google</option>
<option value="oracle" >Oracle</option>
<option value="sap">SAP</option>
</select><br/>
<label for="Clients" name= "Clients"
class="boldtext">Clients</label><br>
<input type="text" id="count" name="count"
placeholder="Enter No Of clients" required>
<br/>
<label for="items" name="items" id="items"
class="boldtext">Items</label>
<textarea id="items" name="items" required rows="3"> </textarea><br/>
<button type="submit">Submit</button>
</form>

Looks like there is some value represented by the name for the form i used "dataform".
Once i change it to dataform123 it worked. also the comparison i have changed from tostring.equals to == / === both of them worked.
Thanks for being there to keep me trying !!

Generate input box based on dropdown selection

I want to be able to make a selection from the dropdown list then have it generate a input box dynamically with an appropriate label above it. Example:
if i select school from dropdown:
<label>Enter School name:</label>
<input name="name">
if i select individual from dropdown:
<label>Enter Individual name:</label>
<input name="firstName">
<input name="lastName">
$('#elementreg').change(function() {
$('#input-holder').empty();
if ($(this).val() == "individual") {
$('#input-holder').append('<input type="text" name="input" value="test" >');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-holder"></div>
<select class="medium" id="elementreg" name="youare">
<option value="" selected="selected"></option>
<option value="individual">For Yourself</option>
<option value="school">School</option>
<option value="group">Group</option>
<option value="studio">Studio</option>
</select>

Your code works, but why not show/hide? It is much faster than manipulating the DOM each time
$("#elementreg").on("change", function() {
var val = $(this).val();
$(".types").hide().find('input:text').val(''); // hide and empty
if (val) $("#" + val).show();
});
.types {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="medium" id="elementreg" name="youare">
<option value="" selected="selected"></option>
<option value="individual">For Yourself</option>
<option value="school">School</option>
<option value="group">Group</option>
<option value="studio">Studio</option>
</select>
<div class="types" id="individual">
<label>Enter Individual name:</label>
<input name="firstName">
<input name="lastName">
</div>
<div class="types" id="school">
<input .... />
</div>
Your version:
$("#elementreg").on("change", function() {
var val = $(this).val(), $div = $("#input-holder"),fields=" ";
switch (val) {
case "individual":
fields='<label>Your name: </label><input type="text" /><input type="text"/>';
break;
case "school":
fields='<label>School: </label><input type="text" />';
break;
}
$div.html(fields);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-holder"> </div>
<select class="medium" id="elementreg" name="youare">
<option value="" selected="selected"></option>
<option value="individual">For Yourself</option>
<option value="school">School</option>
<option value="group">Group</option>
<option value="studio">Studio</option>
</select>

How to limit count of checked checkboxes equal to select value using jquery?

I'm trying to limit the amount of checkboxes able to be checked according to what select option the user chooses i.e. option1 = 1 checkbox option 2 = 2 checkboxes and if they try to choose more then alert the user and .prop("checked", false).
but i just get weird stuff happening and i can't figure why please help!!
html:
<form>
<select onclick="systemSelected();" class="mySelectBox">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
<option value="5">option5</option>
</select>
</form>
<form onclick="limitCheckbox(userSelected);">
<input type="checkbox" name="box1">
<input type="checkbox" name="box2">
<input type="checkbox" name="box3">
<input type="checkbox" name="box4">
<input type="checkbox" name="box5">
</form>
javascript:
var userSelected = 0;
function systemSelected() {
$(".mySelectBox option").each(function(){
if ($(this.selected)) {
userSelected = parseInt($(".mySelectBox").val());
}
});
}
function limitCheckbox(userSystem) {
$("input[type=checkbox]").click(function(){
if($("input[type=checkbox]:checked".length > userSystem)) {
$(this).prop("checked", false);
alert("too many numbers");
} else if ($("input[type=checkbox]:checked".length === 0 )) {
alert("please select a game too play");
}
});
}

Don't use alerts (Why should a user feel stupid)
Use the disabled property (Make a user see & know)
var $ckb = $('[name*=box]'),
$sel = $('.mySelectBox');
function ckkk () {
var ckd = $ckb.filter(":checked").length,
max = parseInt($sel.val(), 10);
if(ckd > max) $ckb.prop({checked:false, disabled:false});
else $ckb.not(":checked").prop({disabled: ckd >= max});
}
$ckb.add($sel).on("change", ckkk);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="mySelectBox">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
<option value="5">option5</option>
</select>
<input type="checkbox" name="box1">
<input type="checkbox" name="box2">
<input type="checkbox" name="box3">
<input type="checkbox" name="box4">
<input type="checkbox" name="box5">

use $("input[type=checkbox]").on('change',function(){ selector which will fire event on every change of checkbox. And you can manage your cases with conditions in it.
Please check below snippet.
var userSelected = 0;
$("input[type=checkbox]").on('change',function(){
if($("input[type=checkbox]:checked").length > parseInt($(".mySelectBox").val())) {
$(this).prop("checked", false);
alert("too many numbers");
} else if ($("input[type=checkbox]:checked").length === 0 ) {
alert("please select a game too play");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select class="mySelectBox">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
<option value="5">option5</option>
</select>
</form>
<form>
<input type="checkbox" name="box1">
<input type="checkbox" name="box2">
<input type="checkbox" name="box3">
<input type="checkbox" name="box4">
<input type="checkbox" name="box5">
</form>

$('input:checkbox').change(function() {
var number = $('.mySelectBox option:selected').val();
if ($('input:checkbox:checked').length > number) {
alert('more than selected')
$(this).prop('checked', false);//dont check the click checkbox
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select class="mySelectBox">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
<option value="5">option5</option>
</select>
</form>
<form>
<input type="checkbox" name="box1">
<input type="checkbox" name="box2">
<input type="checkbox" name="box3">
<input type="checkbox" name="box4">
<input type="checkbox" name="box5">
</form>