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.
Related
I'm sorry if there's already a question like this, but I've found nothing about this, nor do I know exactly what to look for.
The problem:
When I copy #download_link via the copy button it only copies 53297234.png instead of 5ec8515390d267.53297234.png
My code:
<script>
function copy2clip(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
</script>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button" onclick="copy2clip('#download_link')">Copy</button>
</div>
<input type="text" class="form-control" id="download_link" placeholder="Link" value="https://example.org/u/". $row['name'] ."" disabled>
</div>
$row['name'] = 5ec8515390d267.53297234.png
Thanks in advance :)
I'm not sure why you're getting a partial string--the code shouldn't work as is. Assuming your PHP variable concatenation is working (it's a good idea to establish that, then remove it from the question so it's reproducible and isolated), the .text() function can't be used to access an input element's value. Use $(element).val() instead.
From the docs:
The .text() method cannot be used on form inputs or scripts. To set or get the text value of input or textarea elements, use the .val() method.
As an aside, I wouldn't use $ to prefix your vars in JS. It's not a typical style and makes it confusing to see what's jQuery and what's JS.
If this doesn't solve the problem, then the issue is likely in your PHP script. Make sure it's concatenating correctly.
function copy2clip(element) {
var temp = $("<input>");
$("body").append(temp);
temp.val($(element).val()).select();
document.execCommand("copy");
temp.remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button
class="btn btn-outline-secondary"
type="button"
onclick="copy2clip('#download_link')"
>Copy</button>
</div>
<input
type="text"
class="form-control"
id="download_link"
placeholder="Link"
value="https://example.org/u/5ec8515390d267.53297234.png"
disabled
>
</div>
If you are interested in writing some fancy clean code, you should check this library
clipboard.js .
Example:
// you need to instantiate it by passing selector
new ClipboardJS('.btn');
<!-- Include the script via CDN (you can download it) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
<div class="input-group mb-3">
<div class="input-group-prepend">
<!-- Trigger -->
<button class="btn btn-outline-secondary" type="button" data-clipboard-target="#download_link">Copy</button>
</div>
<input type="text" class="form-control" id="download_link" placeholder="Link" value="https://example.org/u/" .
$row['name'] ."" readonly>
</div>
I am new to angular js . I have a drop-down , which contains more that 150 values . I want to have a search for the dropdown attached with it . So , I have tried every thing,but i am not able to do . So, my code is -
HTML -
<div class="select-container col-sm-12 label-container"
ng-disabled="!objectPropertyForm.selectedObjectProperty">
<span class="col-sm-4 text-right label-container">
<label>Value : </label>
</span>
<span class="col-sm-8">
<select
id="objectPropertyValueSelect"
name="objectPropertyValue"
class="btn btn-start col-sm-12"
ng-model="objectPropertyForm.selectedObjectPropertyValue"
ng-options="range as range.name for range in objectPropertyForm.selectedObjectProperty.rangeList |
filter:objectPropertyRangeFilter
track by range.name">
<option value="" disabled selected>Select your option</option>
</select>
</span>
</div>
controller -
$scope.objectPropertyRangeFilter = function (value) {
return !($scope.objectPropertyForm.selectedObjectProperty
.values.includes(value.name));
};
if while typing it gives me the values , I want to have only that names in which the typed text is present . Any help will be appreciated.
You can try
https://material.angularjs.org/latest/demo/autocomplete
similar solutions
or go for https://github.com/darylrowland/angucomplete
for which you have to provide $scope.localdata=your autofilldata
This question already has answers here:
jQuery Validate plugin, one out of two fields is required
(2 answers)
Closed 7 years ago.
I am pretty new in JQuery and I have the following problem related to a form validation.
So I think to not write the validator by myself but to use the JQuery Validation Plugin, this one: http://jqueryvalidation.org/
From what I have understand it provide me the built in required() method that make a specific field required (if the user don't insert a value for this field an error message is shown).
Ok...my problem is that in my form I have something like this:
<form method="post" action="consultazioneRicercaForm" id="consultazioneRicercaForm">
<div class="row">
<div class="col-md-4">
<label style="display: block;">Regioni:</label>
<select name="regioneSelezionata" id="selReg">
<option value="-">--SELEZIONARE UNA REGIONE--</option>
<option value="AB">ABRUZZO</option><option value="BA">BASILICATA</option><option value="CA">CAMPANIA</option><option value="CL">CALABRIA</option><option value="EE">REGIONE ESTERA</option><option value="EM">EMILIA ROMAGNA</option><option value="FR">FRIULI-VENEZIA GIULIA</option><option value="LA">LAZIO</option><option value="LI">LIGURIA</option><option value="LO">LOMBARDIA</option><option value="MA">MARCHE</option><option value="MO">MOLISE</option><option value="PI">PIEMONTE</option><option value="PU">PUGLIA</option><option value="SA">SARDEGNA</option><option value="SI">SICILIA</option><option value="TO">TOSCANA</option><option value="TR">TRENTINO-ALTO ADIGE</option><option value="UM">UMBRIA</option><option value="VA">VALLE D' AOSTA</option><option value="VE">VENETO</option>
</select>
</div>
<div class="col-md-4">
<label style="display: block;">Province:</label>
<select name="provinciaSelezionata" id="selProv"><option value="">--SELEZIONARE UNA PROVINCIA--</option></select>
</div>
<div class="col-md-4">
</div>
</div>
<div style="margin-top: 30px;" class="row">
<div class="col-md-4">
<label style="display: block;">Codice Meccanografico:</label>
<input type="text" value="" name="codMec" id="selCodMec">
</div>
<div class="col-md-4">
<label style="display: block;">Tipologia Progetto:</label>
<select name="tipologiaProgettoSelezionato" id="selTipologiaProgetto">
<option value="-">--TIPOLOGIA--</option>
<option value="WIFI">WIFI</option><option value="LIM">LIM</option><option value="Altro">Altro</option><option value="Classi 2.0">Classi 2.0</option><option value="Scuola 2.0">Scuola 2.0</option><option value="CSD">CSD</option>
</select>
</div>
<div class="col-md-4">
<label style="display: block;">Stato Progetto:</label>
<select name="statoProgettoSelezionato" id="selStatoProgetto">
<option value="-">--STATO PROGETTO--</option>
<option value="Da compilare">Da compilare</option><option value="In lavorazione">In lavorazione</option><option value="Da validare">Da validare</option><option value="Validato">Validato</option><option value="Rendicontato pregresso">Rendicontato pregresso</option>
</select>
</div>
</div>
<div style="margin-top: 30px;" class="row">
<div class="col-md-12">
<input type="submit" value="Cerca">
</div>
</div>
</form>
As you can see it contains some field of which those that have id="selReg" and id="selCodMec".
So my validation is focused only on the previous 2 fields and in particular the form can be considered valid if the field having id="selReg" OR the field having id="selCodMec" have a value setted. So if at least one of these 2 fields is valorized by the user my form is considered valid.
I think that in this case I can't use the required() method because it seems to me that the required() method is refered on a specific field and don't implement the previous logic.
How can I solve this problem? Can I use this JQuery Validation Plugin for my purpose?
Tnx
I use in one of my project the jQuery Validation as well.
Try to add a own validation rule:
$.validator.addMehtod('oneOrOther',function(value) {
if(!$("#selReg").val() && !$("#selCodMec").val())
return false;
else
return true;
});
Assign the validation to the field:
$("#consultazioneRicercaForm").validate({
...
rules: {
regioneSelezionata: {
oneOrOther: true
}
...
}
});
I hope, I understood your question correctly.
My problem is that I have 2 blocks in modal and when I click on .emailInbound checkbox it toggle .in-serv-container open, but when I click on .accordion-heading to open comment part it makes .in-serv-container collapse.
What can be a reason?
HTML:
<label class="checkbox">
<input class="emailInbound" type="checkbox" onclick="toggleInServ(this)">Использовать Email для регистрации обращений
</label>
<div id='in-serv-container'>
<div><strong>Настройка входящей почты</strong></div>
<div>
<input class="emailOutserver" type="text" placeholder="Сервер входящей почты">
<input class="emailOutserverPort" type="text" placeholder="Порт">
</div>
<div>
<select class="emailOutProtocol half" style="width: 49%!important;">
<option value='usual'>Обычный</option>
<option value='ssl'>SSL</option>
</select>
<input class="emailInFolder half" type="text" placeholder="Папка входящей почты">
</div>
<div class="modal-body-container">
<input type="text" placeholder="Опции">
</div>
<button class="btn btn-link">Проверить подключение</button>
<hr>
</div>
<div class="accordion" id="comment-wrapper">
<div class="accordion-heading" data-toggle='collapse' data-target='#emailComment' onclick='toggleChevron(this)'>
<strong>Комментарий</strong> <i class='icon-chevron-right'></i>
</div>
<div id="emailComment" class="collapse" data-parent="#comment-wrapper">
<textarea class="emailComment"></textarea>
</div>
</div>
JS:
function toggleInServ(box){
var checked = $(box).prop('checked');
if(checked){
$('#in-serv-container').css('height', '170px');
}else{
$('#in-serv-container').css('height', '0px');
}
}
function toggleChevron(o){
var icon = $(o).children('[class*=icon]');
if(icon.hasClass('icon-chevron-right')){
icon.removeClass('icon-chevron-right');
icon.addClass('icon-chevron-down');
}else{
icon.removeClass('icon-chevron-down');
icon.addClass('icon-chevron-right');
}
}
If I'm in the right track at this, you want each dropdown to stay on opened if the checkbox is ticked? What ever is the case here, please provide us with your CSS-styling as well. Would be best if you'd give us JSFiddle of your case.
Changing just the
height
attribute of your CSS seems like a bad idea. Instead of that, you could try using
display: block;
and
display: none;
So it would really be a hidden field before it gets selected. Not the answer to the question itself, but just something to note.
It was because of 'bubbling'. I added e.stopPropoganation() and it help.
I've got an Angular module here within a larger rails project. I'm new to Angular and wish to avoid jQuery if I can (but do use it throughout the rails project and can use it if necessary). What I'm trying to do is hide a checkbox if the End Time is "", and show a checkbox if there's a value in the End Time. Unfortunately I have been unable to hide it if End Time is "". See:
You can see my HTML code below:
<div class="control-group span8">
<h4 class="pull-left"><strong>Active Hours (UTC):</strong></h4>
</div>
<div class="control-group span1">
<label class="control-label label-unstyled font-size-14" for="inputStartTime">Start Time</label>
<div class="controls">
<select ng-model="geoRegion.start_time" id="inputStartTime" class="input-small" ng-options="thisHour.value as thisHour.name for thisHour in hours" value="{{geoRegion.start_time}}"></select>
</div>
</div>
<div class="control-group span1">
<label class="control-label label-unstyled font-size-14" for="inputEndTime">End Time</label>
<div class="controls">
<select ng-model="geoRegion.end_time" id="inputEndTime" class="input-small" ng-options="thisHour.value as thisHour.name for thisHour in hours" value="{{geoRegion.end_time}}"></select>
</div>
</div>
<div class="control-group span8">
<div ng-show="clearGeoSegment(geoRegion.end_time)"><label class="inline checkbox label-unstyled font-size-14"><input type="checkbox" id="clearGeoSegment" ng-model="geoRegion.clear_segment">Clear Geo Segment at end of active time period.</label></div>
</div>
<div class="control-group span8">
<p id="broadcast-notice" class="pull-left font-size-14"><strong>Note:</strong> If active hours is blank, the Geo Segment is always active.</p>
</div>
My controller code (yes, I used jQuery. But please suggest otherwise!):
$scope.clearGeoSegment = (endTime) ->
if endTime is ''
$('#clearGeoSegment').hide()
else
$('#clearGeoSegment').show()
Any help would be greatly appreciated!
So you don't need to do the hide/show with jquery. You need to just bind to an expression that will be truthy when the checkbox should be visible. In this case it should be as simple as:
<div ng-show="geoRegion.end_time">
And you can delete your clearGeoSegment function entirely.