With the help of http://www.mkyong.com/wp-content/uploads/jQuery/jQuery-add-remove-textbox.html , I got my dynamic inputs and value.
But while adding its concatenating or getting Nan. I need to add values.
var counter = 2;
$("#addButton").click(function () {
if(counter>20){
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html(
' <div class="col-md-6 marg-top-10 "> <input type="text" class="form-control inputData" name="assetDescription' + counter +
'" id="assetDescription' + counter + '" value="" > </input> </div>' +
' <div class="col-md-6 marg-top-10 "> <input type="text" class="form-control inputData" name="textbox' + counter +
'" id="textbox' + counter + '" value="" > </input> </div>'
);
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
for adding value
$("#getButtonValue").click(function () {
console.log("came ");
var msg = '';
var totalvalue;
var result;
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
result += Number($('#textbox' + i).val());
console.log(result);
}
result is = Nan
help please!
try with this..
var result = 0;
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
result += Number($('#textbox' + i).val());
console.log(result);
}
Related
This is my code. I want to create two textboxes using Razor in script.
the model=>model[i].Name1 is not woring
var counter = 0;
#{
int i = 0;
}
$(document).ready(function () {
$("#addButton").click(function () {
if (counter < 0) {
alert("Add more textbox");
return false;
}
i = counter;
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter).attr("class", 'TextBoxDiv').attr("style", "border:5px solid green");
newTextBoxDiv.after().html('<label>Name #'+ counter + ': </label>' +
'#Html.EditorFor(model => model[i].Name1);' +
'<br/> <label>Email #'+ counter +': </label>' +
'#Html.EditorFor(model => model[i].EmailID);' +
'<br/><input type="button" name="button' + counter +
'" class="removeButton" id="removeButton' + counter + '" value="Remove Button" onclick="remove(this)">');
newTextBoxDiv.appendTo("#TextBoxesGroup");
alert(i.toString());
counter++;
i = i + 1;
});
});
You cannot get JS to write out Razor - the JS happens client side AFTER the razor has been executed on the server and sent to the client. the JS won't know what to do with the razor syntax.
In this case, you would need to manually create the html which the Razor helper would make for you. It should still parse back into razor, providing you put the html in the right format (right name, id etc)
So write out the and make the name field match what the razor would have generated.
You can try to set a js variable with the value of model,and then use <input/> to replace #Html.EditorFor():
var counter = 0;
var m = JSON.parse('#Json.Serialize(#Model)');
$(document).ready(function () {
$("#addButton").click(function () {
if (counter < 0) {
alert("Add more textbox");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter).attr("class", 'TextBoxDiv').attr("style", "border:5px solid green");
newTextBoxDiv.after().html('<label>Name #'+ counter + ': </label>' +
'<input id="model_' + counter +'__Name1" name=" model[' + counter + '].Name1" value="' + m[counter].Name1 + '"/>' +
'<br/> <label>Email #'+ counter +': </label>' +
'<input id="model_' + counter +'EmailID" name=" model[' + counter + '].EmailID" value="' + m[counter].EmailID + '"/>' +
'<br/><input type="button" name="button' + counter +
'" class="removeButton" id="removeButton' + counter + '" value="Remove Button" onclick="remove(this)">');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
});
I set below codes for the the design. i try to get images and name of image form the index.`
function Link_Generate(event) {
event.preventDefault();
var links = '';
var link = 'www.ski-roller.de/';
var result = document.getElementById('wrapper');
var code_id = document.getElementById("code_id").value;
for (i = 1; i < 6; i++) {
links += ' <div class="input-groups">' +
' <input class="form-input" id="link_' + i + '" type="text" name="link_' + i + '" ' +
' value="' + link + i + '/=' + code_id + '" placeholder="Generated Link "/>' +
' <input class="form-button" type="submit" id="' + i + '" value="Copy" onclick="copyToClipboard(this.id)" "/>' +
' <label>Product Name:'+ i +' ' + '<img src="cr05.jpg" alt="cross prime" width="100" height="100"> '+ ' </label>' +
' </div>';
}
result.innerHTML = links;
}
`
I am creating a directive, which is used to add and remove elements dynamically. But my ng-click fires multiple times while adding and removing elements. Please give suggestions.
Here enable values means to select when 1=>textbox; 2=>selectbutton;3=>Radio button; 4=>CheckBox;5=>+/-
HTML:
<body ng-app = "mainApp" ng-controller = "loginController">
<div id="sampleeid">
<incrementrowsdirective idvalue="sto"
arrayvalues='[]'
labelvalues='["Concepto","Monto","Add/Remove"]'
enablevalues='[2,1,5]'></incrementrowsdirective>
<button ng-click="SampleButton()">Sample
Button</button>
</div>
CODE:
gasapp.directive("incrementrowsdirective", function ($compile) {
var trheaderelements;
var tablenm;
var tablenm1;
var trelements;
var trfirstelement;
var firstelement;
return {
restrict: 'AE',
scope: {
idvalue: '#'
},
template: function (elem, attr) {
return '<div class="col-md-8 col-sm-11 col-xs-11"><table id="tableheaderid"></table> <table id="tableid' + attr.idvalue + '" class="table table-condensed table-striped table-bordered table-hover no-margin">' +
'</table></div>'
},
link: function (scope, iElement, iAttrs) {
scope.labelval = JSON.parse(iAttrs.labelvalues);
scope.enableval = JSON.parse(iAttrs.enablevalues);
scope.arrt = JSON.parse(iAttrs.arrayvalues);
scope.c = 0;
scope.count = 1;
trheaderelements = '<thead><tr id="mytrheader' + scope.idvalue + '" >';
angular.forEach(scope.labelval, function (value, key) {
trheaderelements = trheaderelements + '<th style="width: 20%;"> ' + value + ' </th>';
});
trheaderelements = trheaderelements + "</tr></thead>";
tablenm = angular.element(document.getElementById('tableid' + scope.idvalue)).append(trheaderelements);
$compile(tablenm)(scope);
trfirstelement = "<tr id='mytrfirstelement'>";
angular.forEach(scope.enableval, function (value, key) {
if (value == 1) {
trfirstelement = trfirstelement + '<td><input type="text" name="text1name' + scope.idvalue + value + key + '" ng-model="text1value' + scope.idvalue + value + key + '" id="text1valueeid' + scope.idvalue + value + key + '" > </td>';
}
if (value == 2) {
trfirstelement = trfirstelement + '<td><select id="selectid1value' + scope.idvalue + value + key + '" name="selectname1val' + scope.idvalue + value + key + '" ng-model="selectmodel1val' + scope.idvalue + value + key + '" style="width:185px;"><option>..select..</option><option>Brother</option><option>Sister</option><option>Wife/Husband</option></select></td>';
}
if (value == 3) {
trfirstelement = trfirstelement + '<td><input type="radio" id="radio1idvalue' + scope.idvalue + value + key + '" name="radio1nameval' + scope.idvalue + value + key + '" ng-model="radio1modelval' + scope.idvalue + value + key + '" > </td>';
}
if (value == 4) {
trfirstelement = trfirstelement + '<td><input type="checkbox" id="checkbox1idval' + scope.idvalue + value + key + '" name="checkbox1nameval' + scope.idvalue + value + key + '" ng-model="checkbox1modelval' + scope.idvalue + value + key + '"> </td>';
}
if (value == 5) {
trfirstelement = trfirstelement + '<td> <input type="button" value="+" id="addbtn' + scope.idvalue + value + key + '" ng-click="addRow1(' + scope.c + ')">' +
' </td>';
}
});
trfirstelement = trfirstelement + "</tr>";
firstelement = angular.element(document.getElementById('tableid' + scope.idvalue)).append(trfirstelement);
$compile(firstelement)(scope);
trfirstelement = '';
scope.addRow1 = function (a) {
scope.c++;
scope.count++;
trelements = '<tr id=mytr' + scope.idvalue + scope.c + '>';
angular.forEach(scope.enableval, function (value, key) {
scope.keyvalue = key;
if (value == 1) {
trelements = trelements + '<td><input type="text" name="text1name' + scope.idvalue + scope.c + value + key + '" ng-model="text1value' + scope.idvalue + scope.c + value + key + '" id="text1valueeid' + scope.idvalue + scope.c + value + key + '" > </td>';
}
if (value == 2) {
trelements = trelements + '<td><select id="selectid' + scope.idvalue + scope.c + value + key + '" name="selectname' + scope.idvalue + scope.c + value + key + '" ng-model="selectmodel' + scope.idvalue + scope.c + value + key + '" style="width:100%;"><option>..select..</option><option>Brother</option><option>Sister</option><option>Wife/Husband</option></select></td>';
}
if (value == 3) {
trelements = trelements + '<td><input type="radio" id="radioid' + scope.idvalue + scope.c + value + key + '" ></input> </td>';
}
if (value == 4) {
trelements = trelements + '<td><input type="checkbox" id="checkboxid' + scope.idvalue + scope.c + value + key + '" name="aaa" ></input> </td>';
}
if (value == 5) {
trelements = trelements + '<td> <input type="button" value="+" id="addbtn' + scope.idvalue + scope.c + value + key + '" ng-click="addRow1(' + scope.c + ')">' + ' <input type="button" value="-" ng-click="removerowbutton1(' + scope.c + ')" > </td>';
}
});
trelements = trelements + "</tr>";
tablenm1 = angular.element(document.getElementById('tableid' + scope.idvalue)).append(trelements);
$compile(tablenm1)(scope);
trelements = '';
}
scope.removerowbutton1 = function (index) {
//scope.c--;
alert("Removed")
var myEl = angular.element(document.querySelector('#mytr' + scope.idvalue + index));
myEl.remove();
}
}
};
});
Need to remove the lines,
$compile( firstelement )( scope );
$compile( tablenm1 )( scope );
and replace the line with
firstelement = angular.element(document.getElementById('tableid'+scope.idvalue)).append($compile(trfirstelement)(scope));
I'm working on multiple arrays and occured to one problem.
When I have only one question div generated I can add additional questions without problem, but if I add another question div, I can't add additional questions to neither of both windows(same applies to any other number too), error which is I get is newdiv[counterq] is undefined. Can anybody help me with this issue? Thanks!
Also, how can I move div AddOption below created new one option input?
I'm new at programming sorry if won't explain in correct terms. Thanks!
Edit: Updated with new problem. Didn't wanted to create seperate topic.
HTML :
var counterq = 0;
var limitq = 3;
var countero = 0;
var limito = 5;
function AddContent(divName) {
countero = 0;
if (counterq == limitq) {
alert("You have reached the limit of adding " + counterq + " inputs");
} else {
var newdiv = new Array()
newdiv[counterq] = document.createElement('div');
newdiv[counterq].className = "ContentWindow[" + counterq + "]";
newdiv[counterq].innerHTML = "<p class='ContentQuestion'>Question " + (counterq + 1) + " </p> <input type='text' class='AddQuestionInput' value='Type your question' name='myQuestion[" + counterq + "]'>";
if (countero == limito) {
alert("You have reached the limit of adding " + countero + " options");
} else {
newdiv[counterq].innerHTML += "<div class='OptionInputOuterWindow'><span class='OptionInputDescription'>Option " + (countero + 1) + "</span> <input type='text' class='AddOptionInput' name='myQuestion[" + counterq + "]"+"[myInputs]"+"[" + countero + "]'></div>";
newdiv[counterq].innerHTML += "<div class='OptionInputOuterWindow'><span class='OptionInputDescription'>Option " + (countero + 2) + "</span> <input type='text' class='AddOptionInput' name='myQuestion[" + counterq + "]"+"[myInputs]"+"[" + (countero+1) + "]'></div>";
document.getElementById(divName).appendChild(newdiv[counterq]);
countero += 2;
AddOption = function() {
var counterq = 0;
var limito = 5;
if (countero == limito) {
alert("You have reached the limit of adding " + countero + " options");
} else {
newdiv[counterq].innerHTML += "<div class='OptionInputOuterWindow'><span class='OptionInputDescription'>Option " + (countero + 1) + "</span> <input type='text' class='AddOptionInput' name='myQuestion[" + counterq + "]"+"[myInputs]"+"[" + countero + "]'></div>";
$("div[class*=ContentWindow]").css("height", "+=27");
countero++;
}
};
}
$(".container").css("height", "+=344");
newdiv[counterq].innerHTML += "<div class='AddOption' onclick='AddOption();'><img src='/img/Plussmall.png'>Add option</div>";
counterq++;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Content"></div>
<div class="AddContent" onclick="AddContent('Content');" >
<img src="/img/Plussmall.png">Add content
</div>
If you want the counter to increase by 2, use countero += 2 instead of countero++.
var counterq = 0;
var limitq = 3;
var countero = 0;
var limito = 5;
function AddContent(divName) {
if (counterq == limitq) {
alert("You have reached the limit of adding " + counterq + " inputs");
} else {
var newdiv = new Array()
newdiv[counterq] = document.createElement('div');
newdiv[counterq].className = 'new-rect';
if (counterq == limito) {
alert("You have reached the limit of adding " + countero + " options");
} else {
newdiv[counterq].innerHTML = "Entry " + (countero + 1) + " <br><input type='text' name='myInputs[" + countero + "]'><br>Entry " + (countero + 2) + " <br><input type='text' name='myInputs[" + countero + "]'><br>";
document.getElementById(divName).appendChild(newdiv[counterq]);
countero += 2;
}
counterq++;
}
}
.new-rect {
width: 300px;
height: 100px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Content"></div>
<input type="button" class="AddContent" value="Add content" onclick="AddContent('Content');">
See below code. I am creating 2 text fields at a time. Now how could I type on one text field and make the other twin text field have the same values simultaneously?
<button type="button" id="tfButton">Add text</button>
<div id="InputsWrapper"></div>
<div id="OuterWrapper"></div>
<script>
$(document).ready(function() {
var tfCont = 0;
var InputsWrapper = $("#InputsWrapper");
var x = InputsWrapper.length;
var namefield = $("#tfButton");
$(namefield).click(function() {
tfCont++;
$(InputsWrapper).append('<div>' + '<div class="name" id="InputsWrapper_0' + tfCont + '">' + '<input type="textarea" id="field_' + tfCont + '" class="fTypex" placeholder="Thought of the day..."/>' + '<br>' + '</div>' + '</div>');
$(OuterWrapper).append('<div id="textLayer_' + tfCont + '">' + '<input type="textarea" id="tf_' + tfCont + '">' + '</div>');
x++;
return false;
});
});
</script>
I created a fiddle that I think does what you want: http://jsfiddle.net/3h1h5j7y/
Here is the code.
HTML
<button type="button" id="tfButton">Add text</button>
<div id="InputsWrapper"></div>
<div id="OuterWrapper"></div>
JavaScript
I added a data- attribute to the inputs with the tfCont id so that they can operate in pairs as they are added.
Also, I am using the on() method so that objects can be added dynamically. It is filtering on the fTypex class.
$(document).ready(function() {
var tfCont = 0;
var InputsWrapper = $("#InputsWrapper");
var x = InputsWrapper.length;
var namefield = $("#tfButton");
$(namefield).click(function() {
tfCont++;
$(InputsWrapper).append('<div>' + '<div class="name" id="InputsWrapper_0' + tfCont + '">' + '<input type="textarea" id="field_' + tfCont + '" class="fTypex" placeholder="Thought of the day..." data-tfcount="' + tfCont + '"/>' + '<br>' + '</div>' + '</div>');
$("#OuterWrapper").append('<div id="textLayer_' + tfCont + '">' + '<input type="textarea" id="tf_' + tfCont + '" data-tfcount="' + tfCont + '">' + '</div>');
x++;
return false;
});
$(document).on("click blur keyup", "input.fTypex", function() {
var tfc = $(this).data("tfcount");
$("#tf_" + tfc).val(this.value);
});
});
I had to change $(OuterWrapper) from your example to $("#OuterWrapper") because there was not a variable.
Try something like this :
use onkeyup to call a function which binds the values
HTML
<body>
<input id='ip1' onkeyup='updateOther(this);' type='text'>
<input id='ip2' type='text'>
<script src="script.js"></script>
</body>
JS:
function updateOther(obj){
$('#ip2').val($(obj).val()) ;
}
http://plnkr.co/edit/dpwav5fGcisZcjBIzYyz?p=preview