I'm creating a form that has some select and some input types, as shown below.
<div id="datiRichiesta">
<div *ngFor="let d of formDatiRichiesta" class="form-row">
<input *ngIf="d.type=='text'"
type="text"
class="form-control"
placeholder="{{d.placeholder}}"
[(ngModel)]="model[d.name]"
name="{{d.name}}"
(focus)="$event.target.placeholder = ''"
(blur)="$event.target.placeholder = d.placeholder"
value="richiesta.prova"/>
<select *ngIf="d.type=='select'"
class="form-control"
name="{{d.name}}"
[(ngModel)]="model[d.name]"
required>
<option selected disabled value="">{{d.placeholder}}</option>
<option *ngFor="let b of elencoBanche" value="{{b.id}}">{{b.nome}}</option>
</select>
</div>
</div>
I've got two main issues:
I need to set a value on the input type, but it is not working. I know that I should use something like ngValue, or at least so I've read online, but most examples are referred to angularjs and I got a bit confused. If I simply put [ngValue]="richiesta.prova" the browser complains that Can't bind to 'ngValue' since it isn't a known property of 'input'.
I need to show a placeholder for the select, but it's not working since the first <option> is part of the dropdown list as all the others. On this I don't have a clue, because it should really work as it is.
Any help will be appreciated, maybe with some explanation, I sense I'm missing something about angular binding.
Thanks.
1) NgModel sets the value. If model[d.name] is not empty - it will be set.
https://angular.io/guide/forms
2) How to show placeholder (empty option) in select control in Angular 2?
These 2 lines are redundant:
(focus)="$event.target.placeholder = ''"
(blur)="$event.target.placeholder = d.placeholder"
If your placeholder is not working then it simply means that you have assigned them some value to that input. In your case, I am 100% sure that {{ d.placeholder }} holds some value( might be value equal to ' '). Assign this value to NULL. Then see the result.
placeholder="{{d.placeholder}}"
I have a select element defined as follows:
<form #empForm="ngForm" novalidate>
<div>
<label>Role</label>
<select name="role" [(ngModel)]="user" (ngModelChange)="get1($event)" (change)="get($event)">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</form>
And in the .ts,
Since the select html is bounded to the property user, setting it to different values programmatically as follows does not trigger the ngModelChange or change event which i believe is triggered solely based on user intervention
set(input: any) {
this.user = "3";
}
I wish to trigger those events when the model changes programatically. Is that possible?
Thank you,
Ashley
Try adding value Attributes like <option value="1">
When the page loads and you set the default value, take it from there and do the logic. No need to read it via your element after you set it.
Im trying to get acquainted with javascript and how to use it with html. What i want to do is very simple, when a value has changed in a dropdownmenu id like to fill an input field with a string.
This is the HTML:
<div>
<input type="text" id="field_id" placeholder="Using..." style="width: 400px">
<select style="width: 180px" onchange="Test()">
<option value="" disabled selected>Select</option>
{% for stuff in stuffs%}
<option value="{{stuff}}">{{stuff}}</option>
{% endfor %}
</select>
</div>
And the javascript in the same document:
<script>
function Test()
{
document.getElementById(field_id).text = "asdsads";
}
</script>
Why wont the input field be filled with the string "asdsads"?
You should give the parameter to getElementById as String:
document.getElementById("field_id").value = "asdsads";
Watch for the quotation marks around field_id.
In your code the field_id is an (undefined) variable. You should see an error / warning in the Javascript console of your browser.
And second: to set the value of an input field you need to set the value attribute, not the text attribute.
Here is a working fiddle with your example: https://jsfiddle.net/oapzL020/
You need to take into account that the input element should be initialized and tested for value using value attribute:
document.getElementById("field_id").value = "some value"
I have been using Zend Framework 1 to create a dependent/chained Zend_Form.
When a Zend_Form_element_Select another Zend_Form_Element_Select is added to the form with correct fields dependant on the first select's value.
So I add the new Select with a:
$("#city-label").before(data);
which will insert the new select before the city label.
The problem arises when the first select's value is changed again. Then a new Select is added to the form. I would Ideally like the old satellite element that is the label and the select to be removed.
<dt id="satellite-label">
<label for="satellite" class="optional">Satelite</label>
</dt>
<dd class="ui-select">
<select name="satellite" id="satellite">
<option value="--Select One--" label="--Select One--">--Select One--</option>
<option value="5" label="Alex">Alex</option>
<option value="6" label="Patro">patro</option>
<option value="7" label="Zozo ">Zozo</option>
</select></dd>
<dt id="city-label"><label for="city" class="optional">City</label></dt>
And then replaced with the new element.
Try this from within your AJAX success:
$("#satellite-label").remove();
$("#satellite").parent().remove();
You should keep track of the new element so you can remove it when the value changes again:
var currentLabel;
...
if (currentLabel) {
currentLabel.remove();
}
currentLabel = $(data);
$("#city-label").before(currentLabel);
try this ...
$("#satellite_elem-label").remove();
$("#satellite_elem").parent().remove();;
$("#city-label").before(newElement);
You can use a hidden input (Zend_Form_Element_Hidden) then simply replace the hidden element.
$("#target-element").html(data);
Don't forget to use same id (target-element) on html content of data.
This way you can also add backend validators to this hidden element to use isValid method.
You must remove previous inserted select before insert another on first select's value is changed again.
So it may be help in your case.
$("#city-label").prev('.ui-select').remove();
$("#city-label").prev('#satellite-label').remove();
$("#city-label").before(data);
or simply add this
$("#city-label").prev().remove();
$("#city-label").prev().remove();
$("#city-label").before(data);
It will remove select then label and insert new select before insert new one.
I have a select form field that I want to mark as "readonly", as in the user cannot modify the value, but the value is still submitted with the form. Using the disabled attribute prevents the user from changing the value, but does not submit the value with the form.
The readonly attribute is only available for input and textarea fields, but that's basically what I want. Is there any way to get that working?
Two possibilities I'm considering include:
Instead of disabling the select, disable all of the options and use CSS to gray out the select so it looks like its disabled.
Add a click event handler to the submit button so that it enables all of the disabled dropdown menus before submitting the form.
Disable the fields and then enable them before the form is submitted:
jQuery code:
jQuery(function ($) {
$('form').bind('submit', function () {
$(this).find(':input').prop('disabled', false);
});
});
<select disabled="disabled">
....
</select>
<input type="hidden" name="select_name" value="selected value" />
Where select_name is the name that you would normally give the <select>.
Another option.
<select name="myselect" disabled="disabled">
<option value="myselectedvalue" selected="selected">My Value</option>
....
</select>
<input type="hidden" name="myselect" value="myselectedvalue" />
Now with this one, I have noticed that depending on what webserver you are using, you may have to put the hidden input either before, or after the <select>.
If my memory serves me correctly, with IIS, you put it before, with Apache you put it after. As always, testing is key.
I`ve been looking for a solution for this, and since i didnt find a solution in this thread i did my own.
// With jQuery
$('#selectbox').focus(function(e) {
$(this).blur();
});
Simple, you just blur the field when you focus on it, something like disabling it, but you actually send its data.
I faced a slightly different scenario, in which I only wanted to not allow the user to change the selected value based on an earlier selectbox. What I ended up doing was just disabling all the other non-selected options in the selectbox using
$('#toSelect').find(':not(:selected)').prop('disabled',true);
it dows not work with the :input selector for select fields, use this:
jQuery(function() {
jQuery('form').bind('submit', function() {
jQuery(this).find(':disabled').removeAttr('disabled');
});
});
Same solution suggested by Tres without using jQuery
<form onsubmit="document.getElementById('mysel').disabled = false;" action="..." method="GET">
<select id="mysel" disabled="disabled">....</select>
<input name="submit" id="submit" type="submit" value="SEND FORM">
</form>
This might help someone understand more, but obviously is less flexible than the jQuery one.
The easiest way i found was to create a tiny javascript function tied to your form :
function enablePath() {
document.getElementById('select_name').disabled= "";
}
and you call it in your form here :
<form action="act.php" method="POST" name="form_name" onSubmit="enablePath();">
Or you can call it in the function you use to check your form :)
I use next code for disable options in selections
<select class="sel big" id="form_code" name="code" readonly="readonly">
<option value="user_played_game" selected="true">1 Game</option>
<option value="coins" disabled="">2 Object</option>
<option value="event" disabled="">3 Object</option>
<option value="level" disabled="">4 Object</option>
<option value="game" disabled="">5 Object</option>
</select>
// Disable selection for options
$('select option:not(:selected)').each(function(){
$(this).attr('disabled', 'disabled');
});
Just add a line before submit.
$("#XYZ").removeAttr("disabled");
Or use some JavaScript to change the name of the select and set it to disabled. This way the select is still submitted, but using a name you aren't checking.
I whipped up a quick (Jquery only) plugin, that saves the value in a data field while an input is disabled.
This just means as long as the field is being disabled programmaticly through jquery using .prop() or .attr()... then accessing the value by .val(), .serialize() or .serializeArra() will always return the value even if disabled :)
Shameless plug: https://github.com/Jezternz/jq-disabled-inputs
Based on the solution of the Jordan, I created a function that automatically creates a hidden input with the same name and same value of the select you want to become invalid. The first parameter can be an id or a jquery element; the second is a Boolean optional parameter where "true" disables and "false" enables the input. If omitted, the second parameter switches the select between "enabled" and "disabled".
function changeSelectUserManipulation(obj, disable){
var $obj = ( typeof obj === 'string' )? $('#'+obj) : obj;
disable = disable? !!disable : !$obj.is(':disabled');
if(disable){
$obj.prop('disabled', true)
.after("<input type='hidden' id='select_user_manipulation_hidden_"+$obj.attr('id')+"' name='"+$obj.attr('name')+"' value='"+$obj.val()+"'>");
}else{
$obj.prop('disabled', false)
.next("#select_user_manipulation_hidden_"+$obj.attr('id')).remove();
}
}
changeSelectUserManipulation("select_id");
I found a workable solution: remove all the elements except the selected one. You can then change the style to something that looks disabled as well.
Using jQuery:
jQuery(function($) {
$('form').submit(function(){
$('select option:not(:selected)', this).remove();
});
});
<select id="example">
<option value="">please select</option>
<option value="0" >one</option>
<option value="1">two</option>
</select>
if (condition){
//you can't select
$("#example").find("option").css("display","none");
}else{
//you can select
$("#example").find("option").css("display","block");
}
Another option is to use the readonly attribute.
<select readonly="readonly">
....
</select>
With readonly the value is still submitted, the input field is grayed out and the user cannot edit it.
Edit:
Quoted from http://www.w3.org/TR/html401/interact/forms.html#adef-readonly:
Read-only elements receive focus but cannot be modified by the user.
Read-only elements are included in tabbing navigation.
Read-only elements may be successful.
When it says the element may be succesful, it means it may be submitted, as stated here: http://www.w3.org/TR/html401/interact/forms.html#successful-controls