Problem: Hello, I would like to be able to clear a field when a value is entered.
The following is the form:
Currently, when the user selects a city. If there is value in the zip code field, the zip code field value will be removed and vice versa. However, when I try to apply the same logic for the same Hospital Name field, instead of leaving the value blank, the value remains there.
The following is what I have done when the user enters a zip code, the city drop down will be blanked and vice versa:
$(document).ready(function(){
$('#zip').on("change",function(){
$('#city option[value=""]').prop('selected',true).trigger('input');
/*console.log('input');*/
});
$('#city').on("change",function(){
$('#zip').val('').trigger('input');
/*console.log('change');*/
});
});
and works fine.
However, I tried to use the same logic to be applied when a user enters a name of a hospital followed by the city. It does remove the city dropdown but not the hospital name field. When I enter a Hospital Name and enter a city, the zip code field will not be blank but remains:
$(document).ready(function(){
$('#zip').on("change",function(){
$('#city option[value=""]').prop('selected',true).trigger('input');
/*console.log('input');*/
});
$('#city').on("change",function(){
$('#zip').val('').trigger('input');
/*console.log('change');*/
});
});
$(document).ready(function(){
$('#zip').on("change",function(){
$('#hospital option[value=""]').prop('selected',true).trigger('input');
/*console.log('input');*/
});
$('#hospital').on("change",function(){
$('#zip').val('').trigger('input');
/*console.log('change');*/
});
});
Here is the form I am using:
<cfset name_list1 = "Hosp">
<cfset name_list2 = "MMG,MG,RG">
<cfquery name="HospCityFind" datasource="Source">
SELECT Distinct officecity FROM UrgHosp
where utilizedspecialty in (<cfqueryparam value="#name_list1#" list="true" cfsqltype="cf_sql_varchar">)
and Company in (<cfqueryparam value="#name_list2#" list="true" cfsqltype="cf_sql_varchar">)
order by officecity
</cfquery>
<div class="panel panel-default">
<div class="panel-body">
<form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate="" role="form">
<div class="form-group"><input class="form-control" id="hospital" ng-model="searchParam.HospitalName" placeholder="Hospital Name" type="text" /></div>
<div class="form-group">
<select class="form-control" id="city" ng-model="searchParam.City">
<option disabled="disabled" selected="selected" value="">City</option>
<option value=""></option>
<cfoutput query="HospCityFind">
<option value=#officecity#>#officecity#</option>
</cfoutput>
</select></div>
<hr />
<div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div>
<div class="row">
<div class="col-xs-7 no-right-padding">
<div class="form-group">
<div class="input-group"><select class="form-control" name="distance" ng-model="searchParam.Distance" ng-options="mile.value for mile in miles"></select>
<div class="input-group-addon">miles</div>
</div>
</div>
</div>
<div class="col-xs-5 no-left-padding widthZip">
<div class="form-group"><input allow-pattern="[\d\W]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" /></div>
</div>
</div>
<div class="form-group"><input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div>
</form>
</div>
</div>
The hospital field is a text field, but you are trying to clear it the way you cleared the drop down field. Updated:
$(document).ready(function(){
var $zip = $('#zip');
var $city = $('#city');
var $hospital = $('#hospital');
$zip.on("change",function(){
$('#city option[value=""]').prop('selected',true).trigger('input');
$hospital.val('').trigger('input');
});
$city.on("change",function(){
$zip.val('').trigger('input');
});
$hospital.on("change",function(){
$zip.val('').trigger('input');
});
});
I haven't checked this actually runs, but you get the idea.
Other changes I made:
Only one $(document).ready() is ideal.
jQuery is expensive, so I saved jQuery objects to variables and called the variables when possible.
Consolidated both zip changes into the same function.
I was able to resolve my own problem. Just tried to get fancy with the code instead of just going the simple approach. I did the following to resolve my problem:
$(document).ready(function(){
$('#zip').on("change",function(){
$('#city option[value=""]').prop('selected',true).trigger('input');
/*console.log('input');*/
});
$('#city').on("change",function(){
$('#zip').val('').trigger('input');
/*console.log('change');*/
});
$('#hospital').on("change",function(){
$('#zip').val('').trigger('input');
/*console.log('change');*/
});
$('#zip').on("change",function(){
$('#hospital').val('').trigger('input');
/*console.log('change');*/
});
});
Related
I want that if I choose 75'000 or 100'000 either the result in "one" (see pic 2) is 100 or 1000000. Can you help me do it? I would appreciate your help!
here is my code so far:
<div class="container content-center" id="margin">
<form name="formcalc">
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">select</label>
<select class="col-sm-10 form-control">
<option>Default select</option>
<option>75'000</option>
<option>100'000</option>
</select>
<!-- <div class="col-sm-10">
<input type="tel" class="form-control" name="txtnum1">
</div> -->
</div>
<fieldset disabled>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">One</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="n1" name="txtres" value="CHF " readonly>
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Two</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="n2" name="txtres2" value="CHF " readonly>
</div>
</div>
</fieldset>
<input type="button" id="btn6" class="btn btn-danger" value="Berechnen" onClick="sumValues();showDiv();">
<button type="button" style="display:none;" class="btn btn-outline-danger" id="toggle" data-toggle="modal" data-target="#exampleModal">
ohne Gewähr
</button>
</form>
<hr class="featurette-divider">
</div>
<select id="selectOne" class="col-sm-10 form-control" onchange="setOne()">
<option>Default select</option>
<option>75'000</option>
<option>100'000</option>
</select>
. . . . .
. . . . .
. . . . .
<script>
function setOne()
{
const selectOne = document.getElementById("selectOne");
if (selectOne.options[selectOne.selectedIndex].text == "75'000")
document.getElementById("n1").value = "100";
else if (selectOne.options[selectOne.selectedIndex].text == "100'000")
document.getElementById("n1").value = "1000000";
}
</script>
The exact requirements are a little unclear, and it sounds like your a relative beginner in front end development. Given that, I will treat this a little bit more as a learning experience than an exact answer to your exact question, so here are some assumptions:
Based on the markup, it looks like this is Bootstrap, so I'm going to assume jQuery is available (if jQuery is not included, it's easy enough to Google search to find out how to do that).
Let's also assume you're just including a <script></script> tag before the closing </body> tag - inside these tags is where your JavaScript code will go.
And finally, as I mentioned your exact requirements were a little unclear, but I know that generally you want a value in a textbox to be set when a value from a select dropdown is chosen. So let's assume that your exact requirement is: you have a dropdown and a textbox. In the dropdown (<select>), you can choose from 2 values: 75,000 and 100,000. If you choose 75,000, the value of the textbox becomes 100, and if you choose 100,000, the value of the textbox becomes 1000000.
Ok so here's the code. It involves what's called an event listener - the browser is listening for a user event like clicking something or (in your case) a select dropdown value being changed. You're going to write code to listen for and respond to that event. In jQuery the syntax is pretty clear and succinct in this way, using the .on() method.
Given this HTML:
<select id="mySelect">
<option>Default select</option>
<option value="75,000">75,000</option>
<option value="100,000">100,000</option>
</select>
<input type="text" id="myTextbox">
Your JavaScript would look like this:
$('#mySelect').on('change', function() {
let textboxValue;
switch(this.value) {
case '75,000':
textboxValue = '100';
break;
case '100,000':
textboxValue = '1000000';
break;
default:
textboxValue = '';
}
$('#myTextbox').val(textboxValue);
});
Here's a JS Fiddle of the working code: https://jsfiddle.net/j06sw8af/1/
This should be enough to get you on track for solving your exact problem.
I am beginner in java and not familiar with javascript or php, so I just can explore and copypast simplies exemplars of javascript/php code for my needs. So that what I did find in stackowerflow and try to implement for my need:
Script:
<script type="text/javascript">
function onchange() {
var e = document.getElementById("persId");
var persSelected = e.options[e.selectedIndex].text;
document.getElementById("myInput").value=persSelected;
}
</script>
And body:
<body>
<div th:replace="fragments/main.html :: top_menu"/>
<div class="w3-container" align="center">
<form action="/add" method="post" class="w3-container w3-card-4 w3-light-grey w3-text-blue w3-margin w3-center" style="width: 50%" >
<h2 class="w3-center">Add the challenger</h2>
<select name="pers" id="persId" onchange="onchange();">
<option th:each="person: ${personList}">
<title id="titleId" th:text="${person.getName()}"/>
</option>
</select>
<div class="w3-row w3-section">
<div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-user"></i></div>
<div class="w3-rest">
<input class="w3-input w3-border" id="myInput" name="lastName" type="text" onkeyup="myFunction()" placeholder="Search for last names.." title="Type in a last name">
</div>
</div>
I get the list of person into drop list, but not have the selected item into input text field.
How to correctly implement this code?
There are to problems with your code
options don't have title elements
since there are no title elements you have to get the selected value from the select element
Let me explain.
This code makes no sense:
<option th:each="person: ${personList}">
<title id="titleId" th:text="${person.getName()}"/>
</option>
Options don't have titles. Instead you should just use text inside of options.
Like this:
<option th:each="person: ${personList}">
${person.getName()} // this should just turn into text
</option>
so you will end up with:
<option th:each="person: ${personList}">
John Doe
</option>
okay first thing done now to fix your other problem. :)
This line could have worked.
var persSelected = e.options[e.selectedIndex].text;
but since there are no element inside the option, then we need to get the value somewhere else.
The easiest way to do so would be to get the value of the select element.
like this:
var persSelected = document.getElementById("persId").value;
here is an example of a working script file:
Script:
<script type="text/javascript">
function onchange() {
var persSelected = document.getElementById("persId").value;
document.getElementById("myInput").value = persSelected;
}
</script>
Seems like this line:
document.getElementById("persId").value=persSelected;
Should be:
document.getElementById("myInput").value=persSelected;
I dont know - how and why are using parameter type in script block.. But, when I erase this code: type="text/javascript" all works well
I am using two page in my project one page calculate.php and another page name defaults results.php
calculate page i have called input page . i have checkbox looks like
<div class="col-md-2 padding-Zero">
<input name="upfrontMIPPc" id="upfrontMIPPc1" type="text" class="txt" size="3" maxlength="3" onChange="javascript:upfrontMIPPcChanged(true)" />
<input type="text" name="upfrontmipamt" id="upfrontmipamt" class="txt" size="7"
onChange="javascript:upfrontMIPAmountChanged(true)" maxlength="7"/>
</div>
<div class="col-md-1 padding-lft">
<img id="upfront1" src="Content/Images/percent.png" onclick="changeupfront1(event,this.src)" style="cursor:pointer;margin-left:2px"/>
</div>
<div class="col-md-1 padding-lft" style="right:13px;top:3px">
<input id="chkUFtoLoan-1" type="checkbox" />
</div>
My question if the user checked the Include In Calc button from the input page. They should all be defaulted to checked (as we are defaulting to adding the UPFRONT MIP balance to the loan). But if they uncheck the checkboxes, then the value gets placed in the Buyer Costs To Close Section.
they value post depends user check box selection this value post another page defaults results page
About your Loan:
<div class="result-header">
<p>About Your Loan</p>
</div>
<div class="row content black">
<label id="Label20" class="pull-left">Financed Upfront MIP</label>
<label id="ss_financedmip" class="pull-right">$<?php echo round($arrSecondBox["ssupfrontmipamt"],2);?></label>
</div>
Buyer close to section
<div class="result-header">
<p>Buyer Cost To Close</p>
</div>
<div class="row content green">
<label id="Label152" for="purchasePrice" class="pull-left ">Upfront MIP Financed</label>
<label id="ss_financedmip" class="pull-right">$<?php echo round($arrSecondBox["ssupfrontmipamt"],2);?></label>
</div>
if the user checked the Include In Calc button from the input page. They should all be defaulted to checked (as we are defaulting to adding the UPFRONT MIP balance to the loan). But if they uncheck the checkboxes, then the value gets placed in the Buyer Costs To Close Section?
MY script for checkbox or uncheck box:
$('input[Name="S"]').mouseenter(function() {
if ($(this).is(':checked')) {
$(this).prop('checked',false);
// alert("is checked");
} else {
$(this).prop('checked',true);
// alert("not checked");
}
});
</script>
Fiddle Here
please give any idea about it? thanks in advance .
I have a dropdown (Which says, URL or SSH).
Whenever the user enters something for example: 192.168.2.1
If URL is selected, I wanted to append http:// and when SSH is selected, ssh:// should be "appended" to the IP address.
My code:
<div class="form-group">
<label for="name-in" class="col-md-3 label-heading">
<select name="urloption" style="width: 100px;">
<option value="URL">URL</option>
<option value="URL">SSH</option>
</select>
</label>
<div class="col-md-6">
<input type="text" class="form-control" id="name-in" name="urldata" value="" placeholder="Enter your Lab info">
</div>
</div>
My Attempt:
I have created a class and based on click, can I do this?
$("input").keyup(function() {
$(".dynamic").html(this.value);
});
How can I do this with HTML?
What you need to do is capture an event on both input elements, and then change the text based on each selection and event.
$("input").keyup(function() {
$(".dynamic").html($('select').val().toLowerCase() +'://' + this.value);
});
$('select').on('change', function(){
$(".dynamic").html(this.value.toLowerCase() +'://'+ $('input').val());
});
Here's the jsFiddle
I have a select combo box , I have to catch the value of selected item of combo box and set it for a hidden field so that I can catch it in next page. But I am not able to do it. Can any one help me in this.
My form tag is as follow ,
<form class="well" name="ddm" id="ddm" style="margin-left: 30px;" action="<%=request.getContextPath()%>/controller/SMSManagementController">
<input type="hidden" name="flowName" value="PERSIST_SCHOOLYEAR_INFO" >
<input type="hidden" name="schoolYearId" id="schoolYearId" value="">
next my select tag is ,
<div class="form-group control-group">
<select class="form-control selectpicker" name="schoolYear" id="schoolYear">
<option>--Select Grade--</option>
<c:forEach var="grade" items="${gradeInfo}">
<option value="${grade.getDropDownId()}">${grade.getDropDownName()}</option>
</c:forEach>
</select>
</div>
I used javascript to do this as,
<script language="JavaScript">
var schoolYear = document.form.schoolYea.value;
document.ddm.schoolYearId.value = schoolYear;
document.write (schoolYear);
</script>
What is the mistake I am doing?
Guys I solved it like this. ,
<script type='text/javascript'>
$(function() {
$('#schoolYear').change(function() {
// get value from combobox
var x = $(this).val();
// set it to hidden fields
$('#schoolYearId').val(x);
});
});
</script>
it worked.