So i have done "select option" when user select i need show some data in inputs and it works,but only when i chose any value from select it shows my inputs,but i need always show my inputs,because i need this inputs for another actions
It is my select.
<select size="2" style="height: 200px;width: 200px" class="selection
data-bind="options:solutions, optionsText:'name',value:selectedSolutions"></select>
It is inputs which i must show always,they show only when i chose parameter from select which above
<form class="col-md-5" data-bind="with: selectedSolutions" style="margin-left:128px;">
<div class="form-group">
<label for="inputsm">Solution Name:</label>
<input class="form-control input-sm" data-bind="value:name" id="inputsm" type="text">
</div>
<div class="form-group">
<label for="inputdefault">Brief description:</label>
<input class="form-control " style="height: 100px" data-bind="value:briefDescription" id="inputdefault" type="text">
</div>
<div class="form-group">
<label for="url">Read more:</label>
<input class="form-control input-lg" data-bind="value:readMore" style="height:150px" data-bind="value:" id="url" type="text">
</div>
<div class="form-group">
<label for="inputlg">Solution manufacture URl:</label>
<input class="form-control input-sm" id="inputlg" data-bind="value:manufactureUrl" type="text">
</div>
</form>
thanks for help and sorry for english.
Because you are using with binding, anything inside your form tag will not being shown unless selectedSolutions is not null.
I guess inside your ViewModel, you are initializing the selectedSolutions property like this viewModel.selectedSolutions = ko.observable();
So, you have to set a default value for selectedSolutions to make sure anything inside your form tag is always shown. Something likes below:
viewModel.selectedSolutions = ko.observable({
name: "", // you could put any default value you want here, not just blank
briefDescription: "",
readMore: "",
manufactureUrl: ""
});
Related
I have letter.ts file as
export class Letter {
clkletter:number;
inOut:string;
inOutNo:string;
inOutDate:string;
letterIssuedSubBy:string;
letterFile:string;
representativeName:string;
}
But in html i have used its only two properties: letter.inOutNo and letter.inOutDate in the form.Other properties are needed to be hardcoded as they are null or default value.
<div class="col-md-6">
<div class="col-md-12">
<label for="letterDate">Letter Date</label>
<input type="date" class="form-control" id="letterDate" required [(ngModel)]="letter.inOutNo" name="letterDate">
</div>
<div class="col-md-12">
<div class="form-group">
<label for="chalaniNo">Chalani Number</label>
<input type="text" class="form-control" id="chalaniNo" required [(ngModel)]="letter.inOutDate" name="chalaniNo">
</div>
</div>
</div>
So i tried in html to pass the like in normal html we used to do but it is not working. I tried like this to send the data to component so it gets bind:
<input [(ngModel)]="letter.inOut" value="AnnexOne" type="hidden" />
I need to send the values from html to component so it gets binded.How can i achieve this?
Here is my fiddle: My Fiddle (updated)
In my form (ID: #form), inputs fields are shown or hidden based on the selected option of a select input.
Each Input and its labels a wrapped in a div, which is hidden or shown based on the selected option. The attribute data-children of the select contains the information (in JSON Format) which inputs are to be shown when a certain option is selected.
I use the data-parsley-excluded attribute to remove the fields not visible from the parsley validation (Parsley Documentation).
Before I execute the parsley method $('#form').destroy();, at the end $('#form').parsley();
My HTML:
<div class="container">
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<form id="form" method="post" accept-charset="UTF-8" class="form-horizontal" data-parsley-validate="">
<div class="form-group">
<label class="control-label" for="question_01" style="">Question 1</label>
<select class="form-control" name="question_01" id="question_01" required data-children="{"option_01":["input_01","input_02","input_03","input_04","input_05","input_06"],"option_02":["input_01","input_06","input_07","input_08","input_09","input_10"],"option_03":["input_02","input_04","input_05","input_07","input_09","input_10","input_11"]}">
<option value="" selected>Bitte auswählen</option>
<option value="option_01">Option 01</option>
<option value="option_02">Option 02</option>
<option value="option_03">Option 03</option>
</select>
</div>
<div id="div_input_01" class="form-group input-div hidden">
<label for="input_01" style="">Input 01</label>
<input type="text" class="form-control" name="input_01" id="input_01" required>
</div>
<div id="div_input_02" class="form-group input-div hidden">
<label for="input_02" style="">Input 02</label>
<input type="text" class="form-control" name="input_02" id="input_02" required>
</div>
<div id="div_input_03" class="form-group input-div hidden">
<label for="input_03" style="">Input 03</label>
<input type="text" class="form-control" name="input_03" id="input_03" required>
</div>
<div id="div_input_04" class="form-group input-div hidden">
<label for="input_04" style="">Input 04</label>
<input type="text" class="form-control" name="input_04" id="input_04" required>
</div>
<div id="div_input_05" class="form-group input-div hidden">
<label for="input_05" style="">Input 05</label>
<input type="text" class="form-control" name="input_05" id="input_05" required>
</div>
<div id="div_input_06" class="form-group input-div hidden">
<label for="input_06" style="">Input 06</label>
<input type="text" class="form-control" name="input_06" id="input_06" required>
</div>
<div id="div_input_07" class="form-group input-div hidden">
<label for="input_07" style="">Input 07</label>
<input type="text" class="form-control" name="input_07" id="input_07" required>
</div>
<div id="div_input_08" class="form-group input-div hidden">
<label for="input_08" style="">Input 08</label>
<input type="text" class="form-control" name="input_08" id="input_08" required>
</div>
<div id="div_input_09" class="form-group input-div hidden">
<label for="input_09" style="">Input 09</label>
<input type="text" class="form-control" name="input_09" id="input_09" required>
</div>
<div id="div_input_10" class="form-group input-div hidden">
<label for="input_10" style="">Input 10</label>
<input type="text" class="form-control" name="input_10" id="input_10" required>
</div>
<div id="div_input_11" class="form-group input-div hidden">
<label for="input_11" style="">Input 11</label>
<input type="text" class="form-control" name="input_11" id="input_11" required>
</div>
<button type="button" class="btn btn-info btn-block btn-submit-settings">Submit</button>
</form>
</div>
</div>
</div>
My Javascript:
$(document).ready(function() {
$('.btn-submit-settings').on('click', function(e) {
window.Parsley.on('field:error', function()
{
console.log('Validation failed for: ', this.$element);
});
$('#form').submit();
});
$('#form select').change(function() {
var $this = $(this);
if ($this.data('children')) {
$('#form').parsley().destroy();
// Hide all child elements
$.each($this.data('children'), function(value_id, input_id_array) {
$.each(input_id_array, function(key, input_id) {
if ($('#div_' + input_id).length ) {
$('#' + input_id).val(null);
if (!$('#div_' + input_id).hasClass('hidden')) {
$('#div_' + input_id).addClass('hidden');
}
}
});
});
// show the child elements of the selected option
if ($this.data('children')[$this.val()]) {
$.each($this.data('children')[$this.val()], function(key, input_id) {
if ($('#div_' + input_id).length )
{
if ($('#div_' + input_id).hasClass('hidden'))
{
$('#div_' + input_id).removeClass('hidden');
}
}
});
}
// For all inputs inside hidden div set attribute "data-parsley-excluded" = true
$('#form div.input-div.hidden').find(':input').each(function() {
var attr_data_parsley_excluded = $(this).attr('data-parsley-excluded');
if (typeof attr_data_parsley_excluded === typeof undefined || attr_data_parsley_excluded === false) {
$(this).attr('data-parsley-excluded', 'true');
}
});
// For all inputs inside not hidden div remove attribute "data-parsley-excluded"
$('#form div.input-div:not(.hidden)').find(':input').each(function() {
console.log(this.id);
$(this).removeAttr('data-parsley-excluded');
});
$('#form').find(':input').each(function() {
// Log shows that attribute is set right, seems to be ignored by parsley
console.log('ID: ' + this.id + ' TYPE: ' + $(this).prop('nodeName') + ': excluded=' + $(this).attr('data-parsley-excluded'));
});
$('#form').parsley();
$('#form').parsley().refresh();
}
});
});
I can't get it to work, even though the attributes seem to be set the right way.
The fields once hidden, stay out of the validation.
I guess you should add the attribute data-parsley-required="false" to exclude hidden fields from validation.
I mean, try to change
<input type="text" class="form-control" name="input_01" id="input_01" required>
to this
<input type="text" class="form-control" name="input_01" id="input_01" data-parsley-required="false">
and just change the attribute value if you want to validate it or not
This is more of a personal opinion than a factual answer, but I think you are attempting to solve the problem incorrectly. If I were doing this, I would create 2 parsley groups "shouldValidate" and "shouldNotValidate", and add your fields accordingly based on whether they are displayed or not. Then when you call validate, pass the group name "shouldValidate", and only that set of elements will be validated.
You probably need to call refresh on your parsley form after you modify excluded.
I am working on building a site with Angular 2 and am having some problems with template reference variables. I am creating a pretty straightforward form to add a new listing to an online store:
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="productSKU">Product SKU</label>
<input #productSKU type="text" class="form-control" id="productSKU" placeholder="Enter Product SKU">
</div>
<div class="form-group">
<label for="productTitle">Product Title</label>
<input type="text" class="form-control" id="productTitle" placeholder="Enter Product Title" #productTitle>
</div>
<div class="form-group">
<label for="productSubtitle">Product Subtitle</label>
<input type="text" class="form-control" id="productSubtitle" placeholder="Enter Product Subtitle" #productSubtitle>
</div>
<div class="form-group">
<label for="productPrice">Product Price (USD)</label>
<input type="text" class="form-control" id="productPrice" placeholder="Enter Product Price" #productPrice>
</div>
<div class="form-group">
<label for="productType">Select Product Type</label>
<select multiple class="form-control" id="productType" #productType>
<option *ngFor="let type of listingTypes" [value]="type">{{type}}</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="productDescription">Product Description</label>
<textarea class="form-control" id="productDescription" rows="8" #productDescription></textarea>
</div>
<div class="form-group">
<label for="productCondition">Product Condition</label>
<input type="text" class="form-control" id="productCondition" placeholder="Enter Product Condition" #productCondition>
</div>
<div class="form-group">
<label for="storageLocation">Storage Location</label>
<input class="form-control" id="storageLocation" placeholder="Enter Storage Location" #storageLocation>
</div>
<div class="form-group">
<label for="image1Path">Image 1</label>
<input type="text" class="form-control" name="image1Path" id="image1Path" placeholder="Enter Image 1 File Name" #image1Path>
</div>
<button class="btn" id="newPostSubmitButton" (click)="onNewListingSubmit(productTitle.value,
productSubtitle.value,
productType.value,
productPrice.value,
productDescription.value,
productCondition.value,
productSKU.value,
storageLocation.value,
image1Path.value)">Submit</button>
</div>
For some reason when I try to trigger the onNewListingSubmit method in the component on the submit button click, it is giving me the following error:
As you can see, it can't find the property "value" of undefined. It seems to not be recognizing the various template reference variables throughout the form (e.g. #productSKU, #productPrice, etc.)
Any ideas why this might be happening? Can't seem to find any other examples of the same problem. Thanks
Looks like productCondition is not defined on template.
Since you use textarea element. There's no direct property value in textarea. At least its value defined for the collection of elements in textarea.
Here am using Dynamic-Form-Element-Creation-And-Deletion-Plugin-Addel to insert more values and its working but the problem am facing here is when i select a value from the select box used by addel the corresponding data is appearing in the corresponding box and if i choose another select box by clicking add button the corresponding value comes in the first field not in the corresponding field.
here is my view
<div class="form-group ">
<label class="col-lg-3 control-label">Select Tools<span
class="required">*</span></label>
<div class="col-lg-6">
<div class="addel">
<div class="form-group target">
<div class="input-group">
<div class="col-lg-6"> <select class="form-control tools" style="width: 100%" name="tool_id[]" id="tools" onchange="tool(this)" required>
<option value="">Select</option>
</select></div>
<div class="col-lg-3">
<input type="text" class="form-control" required name="quantity[]" id="quantity" placeholder="Quantity">
</div>
<div class="col-lg-3" id="avail">
<input type="text" class="form-control" name="available" id="available" placeholder="Available" value="0 available">
</div>
<span class="input-group-btn">
<button type="button" class="btn btn-danger addel-delete"><i class="fa fa-remove"></i>
</button>
</span>
</div>
</div>
<button type="button" class="btn btn-success addel-add"><i class="fa fa-plus"></i></button>
</div>
</div>
</div>
here is my script
<script>
function tool(sel)
{
var tools=sel.value;
alert(tools);
var url='<?php echo base_url(); ?>admin/tool/ajax_available';
$.post(url, {tools:tools}, function(data)
{
alert("Value: " + $("#avail").html(data));
});
}
</script>
here is my controller
public function ajax_available()
{
$data['available']=$this->Tool_model->view_available_by_type($_POST['tools']);
//var_dump($data['available']);
$this->load->view('admin/tool/ajax_available',$data);
}
here is my ajax_available view
<input type="text" class="form-control" name="available" id="available" placeholder="" value="<?php echo $available->available;?> available">
my picture looks like this
Valid XHTML http://spdc.in/demo/spectra/assets/images/s-tool.PNG.
You are not giving your elements unique identifiers. Every time you add a new row with a dropdown and textbox, it generates the same IDs again for these new elements. This is invalid HTML, all elements must have a unique id.
So when you do
$("#avail").html(data)
it finds the first instance of an element with that ID - because there should only be one. As far as javascript is concerned, the others don't exist, because they are not valid.
Since you will have multiple "Available" textboxes in the page, you can't rely on ID to populate the right one. Give your "avail" div a class instead of an id, and then tell the script to find the related one by using its position in the markup:
<div class="col-lg-3 avail">
<input type="text" class="form-control available" name="available" placeholder="Available" value="0 available">
</div>
And then in your code, instead of $("#avail").html(data), do:
$(this).parent().parent().find(".avail").html(data);
This goes up the DOM by two divs, to find the common ancestor of both the select (this in the context of the function), and the div you want to change, and then searches within it for an element with the avail class, and populates it with the data.
You should also remove "id" attributes from any other elements which can be duplicated, such as "quantity", for example.
P.S. I'm not sure why you use a textbox for this "Available" property - it seems like a status value coming from the database which the user should not change. Therefore it should be a label or span, really. Textboxes are for input, not output. Plus your user could type and change the value, which might confuse them. But I will leave you to sort that.
I have the following code and it works fine to check if the input field "inputURL" has a valid URL, if it has the anchor link a.btn shows fine but I also only want it to show if both have been filled in. How can I add to the ng-show in the anchor to do this?
<form name="myForm" class="row inputs">
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a Title/Description</label>
<input type="text" id="urlName" class="form-control" placeholder="" ng-model="mvName" >
</div>
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a URL</label>
<input type="url" name="inputURL" id="urlLink" class="form-control" placeholder="" ng-model="mvUrl" >
</div>
<div class="col-xs-2">
Post
</div>
</form>
You can check if both have been filled with the model like this:
ng-show="myForm.inputURL.$valid && mvName && nvUrl"
or with the view value of the input
ng-show="myForm.inputURL.$valid && myForm.inputURL.$viewValue && myForm.urlName.$viewValue"
You can use the required HTML5 special attribute to check if the input is not empy.
<form name="myForm" class="row inputs">
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a Title/Description</label>
<input type="text" name="mvName id="urlName" class="form-control" placeholder="" ng-model="mvName" required>
</div>
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a URL</label>
<input type="url" name="inputURL" id="urlLink" class="form-control" placeholder="" ng-model="mvUrl" required>
</div>
<div class="col-xs-2">
Post
</div>
</form>
However, to clean the view a little bit, I would suggest using a controller. Expose a function which returns true or false if the form is valid. And simply use ng-show="isValid()".