I have created a program to hide empty text boxes. I used a checkbox for that. When checking the checkbox then empty text boxes are hidden. Text boxes that have values are keeping.
But now I have a problem. while checkbox are been checked I can not erase the value in the text box to edit. It means when I erase values in the text box to enter new values then that text box is hidden because of it length is 0. Please help me to solve this.
Several ways to do that:
Only update the boolean that filter empty text boxes after they're edited. (i.e. onblur event). You could have a boolean that list the text boxes to hide, but only update it after an onblur event occurs. So it won't be updated while you write in a text box.
Consider a text box empty only if it's empty && it doesn't have current focus (i.e. use the #focus event or get the textbox html element with a $ref to get the html element and use document.activeElement === myTextBox)
This is not a final solution because we don't have enough clues about what does you code look like. But I guess it's a start to resolution :)
As #jaynyxed mentioned, you could use focusin and focusout to help you achieve your goal, I write an example here in code pen and I'll let the code here, so if you cannot open the link I hope you understand how it works.
<template>
<div id="app">
<input
v-if="showA"
type="text"
v-model="inputA"
#focusin="visibleA = true"
#focusout="visibleA = false">
<input
v-if="showB"
type="text"
v-model="inputB"
#focusin="visibleB = true"
#focusout="visibleB = false">
<input type="checkbox" id="checkbox" v-model="hide">
<h5>{{ inputA }} </h5>
</div>
</template>
<script>
export default {
data() {
return {
hide: false,
inputA: '',
inputB: '',
visibleA: false,
visibleB: false,
};
},
computed: {
showA() {
return (this.inputA.length > 0 || !this.hide) || this.visibleA;
},
showB() {
return (this.inputB.length > 0 || !this.hide) || this.visibleB;
}
}
}
</script>
Off course you could do that in many other ways, and maybe this one is not the best possible, but it shows my point.
PS: If you have dozens of input box, I recommends you to create a component to handle that logic, and then you just receive an hide props in your component and emits input for example.
Related
This section uses a checkbox to select your extras, once selected you move onto the next step and it will display your choice in a header called checkout[itemname]. When a check box is selected it changes a variable from false to true however my code doesn't seem to be doing that.
I will show an example section of the user selecting "Neck Tie" from the list of extras.
var hasNeckTie = false;
if (hasNeckTie = true) {
document.getElementById("checkoutnecktie").innerHTML = "Neck Tie";
}
<div class="three columns bear">
<h3>Matching Tartan Scarf (£2.50)</h3>
<label>
<input type="checkbox" autocomplete="off" name="scarf" id="scarf" value="2.5" />
<img src="Images/Scarft.png">
</label>
<p>Personalise your bear with a matching tartan scarf. It gets cold up here in Scotland, and this is the best way to keep your bear warm.</p>
</div>
<div id="checkoutnecktie"></div>
Any ideas why this code isn't running properly?
Your problem starts where you are using = instead of == in your if statement.
You are also trying to set the HTML value of an element which does not exist.
document.getElementById("checkoutnecktie").innerHTML = "Neck Tie";
You need to change "checkoutnecktie" to an element ID which exists.
You would need to hook an event to the checkbox.
You can do this with jQuery like so
$('#scarf').change(function(){
if($(this).is(":checked")) {
$('#checkoutnecktie').text('Neck tie');
}
}
Also like the other answer states, set the text to an element that exists.
Problem Question - I have a form. The form has a state of editable and non-editable, which makes the input box to edit. Now this particular input box has to show different value depending upon what state it is in. i.e if it is not in editable state it has to show '27 November 2016' and if editable state it has to show '27/11/2016'.
The problem is when i try to edit this input box, therefore remove the pre defined value '27/11/2016' it does not work. I think it is not possible to bind function with value.
What I tried -
function showDate() {
if(!this.props.isEdit){
return longDate();
}
return shortDate();
}
<input
id='test'
value={this.showDate()}
onChange={this.props.onInputChange}
readOnly={!this.props.isEdit}
/>
Can someone please suggest on this?
Update: I have a Component which has function onInputChange and all i want to show different content inside input box when the form is in edit mode.
you should use state instead of props for input change, something like below
function onInputChange() {
if(!this.props.isEdit){
this.setState({
date: longDate()
});
return;
}
this.setState({
date: shorDate()
});
}
<input
id='test'
value={this.state.date}
onChange={onInputChange}
readOnly={!this.props.isEdit}
/>
I have a simple textbox input that looks like this:
<input type="text" placeholder="Search for states">
and I want to do an autocomplete on it, similar to typeahead. The autocomplete part works, but I want to display in the textbox first suggestion:
For instance, having written "Al" and I get the following suggestions:
Textbox: Al
Alabama
Algeria
I want to have in the textbox, as faded text: Alabama (the abama to be faded).
How can I do this with jQuery or pure JS?
Having basically in the same textbox, 2 text styles for 2 substrings?
If there are other methods (e.g. overlaying another transparent text control on it) and you can show me an example that would be great. I cannot change the input element (that is a given).
code pen:
http://codepen.io/mozzi/pen/XKKJWq
this is very slimier to what you need. I've selected text instead of fading it as you can't do half faded text in a text box. let me know what you think.
HTML:
<div class="ui-widget">
<label for="automplete-1">Type state name: </label>
<input id="automplete-1" placeholder="U.S. state name">
</div>
javascript:
$("#automplete-1").autocomplete({
delay: 0,
source: UsStateNames,
response: function(event, ui) {
var start = $("#automplete-1").val().length;
$("#automplete-1").val(ui.content[0].value);
var end = ui.content[0].value.length;
$("#automplete-1")[0].setSelectionRange(start, end);
}
});
I have a repeater:
<tr data-ng-repeat="worktime in workTimesFiltered ">
Inside the repeater I have an input checkbox:
<input ng-change="updateIncludeOnInvoice(worktime.includeOnInvoice, worktime.timeType)" name='obj1_data' type="checkbox" ng-model="worktime.includeOnInvoice" ng-true-value="true" ng-false-value="false">
When it's checked I call updateIncludeOnInvoice. The problem is that I don't want it to be clickable if another worktime.timeType == "0%".
I can capture this in updateIncludeOnInvoice and have tried setting worktime.includeOnInvoice = false, but the checkbox remains on screen.
I have found a way to get access to the dom element that was clicked to manually set it back to unchecked, but it seems hacky....
What's the correct way of dealing with this?
Validate checkbox somehow before calling ng-change, if so how?
If I understand this you just want to disable the checkbox when some condition is met.
<input ng-disabled="isConditionMet()">
$scope.isConditionMet = function() {
// check your condition and return true/false
};
In my view model I have a field. This field can be selected from a drop down list or entered in a textbox. I have two radio buttons which allows to select between drop and textbox.
<div class="frm_row" id="contractorRow">
#Html.RadioButton("IsContractorNew", "false", true)
#Html.Label(#Resources.SomeLabels.Existing)
#Html.RadioButton("IsContractorNew", "true", false)
#Html.Label(#Resources.SomeLabels.New)
<div class="frm_row_input" id="contractorDropDownList">
#Html.DropDownListFor(model => model.CONTRACTOR, Model.Contractors)
#Html.ValidationMessageFor(model => model.CONTRACTOR)
</div>
<div class="frm_row_input" id="contractorTextBox" style="display: none;">
#Html.TextBoxFor(model => model.CONTRACTOR)
#Html.ValidationMessageFor(model => model.CONTRACTOR)
</div>
</div>
I prepared a javascript code for hiding, showing and clearing controls while selecting radio buttons. The problem is - field is bound only to the first control (drop down list).
EDIT:
I solved this problem by creating one hidden field and scripting whole logic to bind active control with it and therefore with the model. Anyway if anyone knows simpler solution, please post it.
I know this is an old question, but for those dealing with this issue, here's a solution:
Explanation
When a form is submitted, input elements are bound to the model by their name attribute. Let's say you use HTML helpers to generate your form, and you generate two input fields which bind to the same property on the model. When rendered to the DOM, they both have the same name attribute.
<input name="Passport.BirthPlace" id="birthPlaceDropDown" ... >
<input name="Passport.BirthPlace" id="birthPlaceInfoTextbox" ... >
When the form is submitted, it will bind the first (in the DOM) input it finds to Passport.BirthPlace
A Solution
The quick and easy way to fix this is to use JQuery to change the name of the field you don't want bound on submit. For me, I use a checkbox to toggle which field shows. When the checkbox changes, I hide one control, change its name attribute, and show the other one (and change it's name attribute to Passport.BirthPlace) It looks like this, basically:
First, I run this on document ready
$('#birthPlaceInfoTextbox').attr('name', 'nosubmit'); // Change name to avoid binding on inactive element
Then, I create a listener for my checkbox which toggles which control should be bound:
$('#notBornUSCheckbox').change(function() {
if (this.checked) {
// Not born us was checked, hide state dropdown and show freeform text box
$('#stateDropDownSection').addClass('d-none'); // Hide drop down
$('#birthPlaceDropDown').attr('name', 'nosubmit'); // Change name to something other than Passport.BirthPlace
$('#birthPlaceInfoTextbox').attr('name', 'Passport.BirthPlace'); // Set this one to be bound to the model
$('#stateTextboxSection').removeClass('d-none'); // Show the textbox field
} else { // Opposite of above lines
$('#stateDropDownSection').removeClass('d-none');
$('#stateTextboxSection').addClass('d-none');
$('#birthPlaceInfoTextbox').attr('name', 'nosubmit');
$('#birthPlaceDropDown').attr('name', 'Passport.BirthPlace');
}
});
Instead of using Razor #Html.TextBoxFor... for your textbox, you could try using raw HTML e.g. <input />. Also, have your JavaScript code remove the other field from the DOM entirely when a radio button is clicked, before submitting the form.