We Keep Coding

How to create a Dynamic input fields on button click using anuglar js?

I have a dropdown menu like this
[ShortAnswer- TextBox,Checkbox,Radio button and Drop down]
User can choose the input type and there can add the options by clicking the add option button like this
by clicking the cross icon the options need to be removed.
I reffered dynamic text area
http://viralpatel.net/blogs/dynamic-add-textbox-input-button-radio-element-html-javascript/
But I need more reference about this, Please Suggest me an idea to achieve this using angular js.

Build your list of inputs from an array of objects that each define an input. On button click add a new object to the array that defines the input you want to add.
html:
<div ng-repeat="input in inputsList">
<span ng-click="remove($index)>x</span><input ng-if="input.type==='text'" type="text" />
<span ng-click="remove($index)>x</span><input ng-if="input.type==='checkbox'" type="checkbox" />
...
</div>
<button ng-click="addNewCheckBox()">Add</button>
controller:
$scope.addNewCheckBox = function() {
$scope.inputsList.push({ type: 'checkbox' });
};
$scope.remove = function(index) {
$scope.inputsList.splice(index, 1);
};
It would probably be best if you had a custom input directive that took a config object and it would decide which input to build. But for the sake of simplicity and clarity I just used basic raw html inputs.
Let me know if that makes sense or you need an Angular2/4 answer.

javascript onblur starts too soon

I have a div containing an input followed by an ul :
ul area is filled using Ajax : onkeyup and onfocus are used for searching values in a database depending on what has been seized in input area, so user can choose among that values by clic on the right one. Value is then moved into input area. onBlur is used to empty ul area when user leaves input area. If necessary, I can give javascript code.
One li looks like that :
value
The problem is that it seems onBlur starts before moving value into input area. So ul's content disappears before moving and so move doesn't work.
The only way I've found to solve that problem is to use setTimeout on function used by onBlur. It works well but I would like to know if there's another way.
Thanks.

HTML code :
<div class="inputListDiv">
<input type="text" name="name" id="name" onkeyup="request(readData, this.value, this.id, 'listSel');" onFocus="request(readData, this.value, this.id, 'listSel');" onBlur="waitSupprList('listSel');">
<ul id="listSel" class="inputListNo"></ul>
</div>
One li :
<li onClick="document.getElementById('name').value = value; document.getElementById('listSel').innerHTML = '';"><div>value</div></li>

I repeat my question with code :
I have a div containing an input followed by an ul :
<div class="inputListDiv">
<input type="text" name="name" id="name" onkeyup="request(readData, this.value, this.id, 'listSel');" onFocus="request(readData, this.value, this.id, 'listSel');" onBlur="waitSupprList('listSel');">
<ul id="listSel" class="inputListNo"></ul>
</div>
ul area is filled using Ajax : onkeyup and onfocus are used for searching values in a database depending on what has been seized in input area, so user can choose among that values by clic on the right one. Value is then moved into input area. onBlur is used to empty ul area when user leaves input area. If necessary, I can give javascript code.
One li looks like that :
<li onClick="document.getElementById('name').value = value; document.getElementById('listSel').innerHTML = '';"><div>value</div></li>
The problem is that it seems onBlur starts before moving value into input area. So ul's content disappears before moving and so move doesn't work.
The only way I've found to solve that problem is to use setTimeout on function used by onBlur. It works well but I would like to know if there's another way.
Thanks.

I'm tired, I'll go to bed :-)
My answer was on wrong page. Shoot again :
I have a div containing an input followed by an ul :
<div class="inputListDiv">
<input type="text" name="name" id="name" onkeyup="request(readData, this.value, this.id, 'listSel');" onFocus="request(readData, this.value, this.id, 'listSel');" onBlur="waitSupprList('listSel');">
<ul id="listSel" class="inputListNo"></ul>
</div>
ul area is filled using Ajax : onkeyup and onfocus are used for searching values in a database depending on what has been seized in input area, so user can choose among that values by clic on the right one. Value is then moved into input area. onBlur is used to empty ul area when user leaves input area. If necessary, I can give javascript code.
One li looks like that :
<li onClick="document.getElementById('name').value = value; document.getElementById('listSel').innerHTML = '';"><div>value</div></li>
The problem is that it seems onBlur starts before moving value into input area. So ul's content disappears before moving and so move doesn't work.
The only way I've found to solve that problem is to use setTimeout on function used by onBlur. It works well but I would like to know if there's another way.
Thanks.

ASP MVC binding two controls to one field

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.

Can two form inputs have the same name if one is disabled?

I have an address form and I want to have a select box for states if the country is the U.S. and change it to a textbox if it's a foreign country so that the state/province can be typed in.
I generate the code in PHP (such as the states select and country select) and I was thinking of outputting both the select and textbox and initially hiding and disabling the textbox, then if the user changes the country unhide and enable the textbox and hide and disable the select.
My question is, is it valid if both inputs have the same name, assuming one of them will be disabled when the form is submitted?
As a bonus question, is there a better way of doing this?

Yes, it is possible and it is the best way to do this, since disabled inputs are not sent along in the request and it generates a valid and semantic HTML.
As show in w3:
When set, the disabled attribute has the following effects on an element:
Disabled controls do not receive focus.
Disabled controls are skipped in tabbing navigation.
Disabled controls cannot be successful.
[...]
In this example, the INPUT element is disabled. Therefore, it cannot receive user input nor will its value be submitted with the form.

Assuming you use jQuery, you could do something like this:
HTML:
<select id="countries">
<option>Countries</option>
</select>
<select id="states" style="display: none"> <!-- States in US -->
<option>States</option>
</select>
<textarea id="address" style="display: none">
</textarea>
JS:
// Cache states list and address box beforehand so we don't have to query every time.
var $states = $("#states"),
$address = $("#address");
$("#countries").change(function () { // Bind to change event for checking if US selected
var isUnitedStates = $(this).val() == "United States";
if (isUnitedStates) { // US is selected, show States
$states.attr("id", "address").show()
$address.attr("id", "_address").hide()
} else { // US is not selected, show Address box
$states.attr("id", "_address").hide()
$address.attr("id", "address").show()
}
})
This is not very convenient but if you really want to make sure, this is an option for you.

Iterate through all form elements irrespective of their type

I am busy with a form manager for one of our clients. The general idea is that forms will be built for the individual departments and I want to create a micro system which will handle validation etc for the form without redoing too much work. As automated as possible.
My first major task is that I want to on clicking the submit button, iterate through the entire form and based on specific credentials and validation rules validate the form before it gets sent to the server. I have seen a number of posts related to getting example all the input fields in a form, but I am looking for a solution which will iterate through the entire form and it's contents and then do validation on specifically all of the form elements (which includes select boxes, input boxes, text boxes etc).
I could do this separately, but I would preferably like the validation to be done top - bottom so if the first field is example a select and the next is an input field, it should iterate through the form from top to bottom so that I can output errors according to that.
// Sample code:
$(document).ready(function() {
$("#main_submit").click(function() {
// Select all of the form fields here and iterate through them ...
});
});
<form name='test_form' method='POST' action=''>
<div>
<label for='title'>Title</label>
<select name='title'>
<option value=''>Please select ...</option>
<option value='MR'>MR.</option>
</select>
</div>
<div>
<label for='full_name'>Full Name:</label>
<input name='full_name' type='text' />
</div>
.....
</form>

Use the jQuery :input selector:
jQuery("form :input");
Description: Selects all input, textarea, select and button elements.
http://api.jquery.com/input-selector/

Try this:
//loop through all input elements
$("form :input").each(function(){
var thevalue = $(this).val();//the value of the current input element
var thename = $(this).attr('name');//input name
var thetype = $(this).attr('type');//input type
});