In my html I have code which dynamically adds rows when a button is clicked and on each row there is a button called "Add"
<form name="{{form.name}}"
ng-repeat="form in forms">
<div ng-repeat="cont in form.contacts">
Add
<input type="text" class="xdTextBox" ng-model="cont.ac"/>
<input type="text" class="xdTextBox" ng-model="cont.a_number"/>
</div>
<button ng-click="submit(form)">Submit</button>
<button ng-click="addFields(form)">Add</button>
<hr>
</form>
Than on my second page /edit i have following code that lists rows of values fetched.
<table>
<tbody ng-repeat="item in alllis">
<tr>
<td>
Select
</td>
<td>
<input type="text" ng-model="item.ac" />
</td>
<td>
<input ng-model="item.a_number />
</td>
</tr>
</tbody>
</table>
What I am trying to figure out is when I am on /edit and I select any row how do i populate back that row data on main page.
Please let me know from /edit page how do i go back to main page populating that row where Add button was clicked. Thanks
Here is the plunker for the first (Main) page.
http://plnkr.co/edit/VVUx2roDTrM9ob2uyZMv?p=preview
Related
I've got the following in a partial view, representing a row that is added dynamically:
<td>
<input asp-for="Id" class="form-control" />
</td>
<td>
<input asp-for="EnableDropDown1" id="EnableDropDown1Id" type="checkbox" class="form-control" />
</td>
<td>
<select asp-for="MyDropDown1" id="MyDropDownId1" asp-items="Html.GetEnumSelectList<MyEnum1Type>()" disable="disabled" class="form-control"></select>
</td>
<td>
<input asp-for="EnableDropDown2" id="EnableDropDown2Id" type="checkbox" class="form-control" />
</td>
<td>
<select asp-for="MyDropDown2" id="MyDropDownId2" asp-items="Html.GetEnumSelectList<MyEnum2Type>()" disable="disabled" class="form-control"></select>
</td>
I thought that maybe an onclick="EnableDropDown()" call attached to the CheckBox (that took a checkbox and a dropdown parameter) might do the trick, but it doesn't keep the state nor does the checkbox find the appropriate dropdown. I could loop through all the rows on a click and enable/disable dropdowns appropriately but this seems like a poor solution.
I've seen a fair few solutions out there but none of the simple ones work... either because they're not dynamic, or maybe it's down to the multiple checkboxes, or the fact it's an EnumSelectList and not a simple DropDown (Is there a difference?)..
I'm not too well-versed on javascript so I'm a bit lost with this one.
First, you are missing a "d" in the disabled attribute
Then if you are adding the row dynamically that means that the events are not added when the dom load, you can modify this behavior using a parent selector that already exists when the dom is rendered, also add some references using data-attributes between inputs and select make easier handle this
Try using the following code
$(".parent-class").on("change",".checkbox-class", function() {
var enabledDropdown = $(this).data("dropdown")
$(`#${enabledDropdown}`).removeAttr("disabled")
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="parent-class">
<tr>
<td>
<input asp-for="Id" class="form-control" />
</td>
<td>
<input data-dropdown="MyDropDownId1" asp-for="EnableDropDown1" id="EnableDropDown1Id" type="checkbox" class="form-control checkbox-class" />
</td>
<td>
<select asp-for="MyDropDown1" id="MyDropDownId1" asp-items="Html.GetEnumSelectList<MyEnum1Type>()" disabled="disabled" class="form-control"></select>
</td>
<td>
<input data-dropdown="MyDropDownId2" asp-for="EnableDropDown2" id="EnableDropDown2Id" type="checkbox" class="form-control checkbox-class" />
</td>
<td>
<select asp-for="MyDropDown2" id="MyDropDownId2" asp-items="Html.GetEnumSelectList<MyEnum2Type>()" disabled="disabled" class="form-control"></select>
</td>
</tr>
</table>
I would like to add p tage or line break after table, so that contents in table and div can display in two lines.
At the moment they display in one line which is very messy (i.imgur.com/7cnQhou.jpg).
Would you please let me know how to do it using php or JS?
<div class="woocommerce-variation">
<input type="hidden" id="thwepof_product_fields" name="thwepof_product_fields" value="test2">
<table class="thwepo-extra-options thwepo_variable" cellspacing="0">
<tbody><tr class=""><td class="label leftside"></td>
<td class="value leftside">
<input type="text" id="test2" class="thwepof-input-field">
</td></tr>
</tbody>
</table>
<div class="quantity">
<input type="number" id="quantity_60" class="input-text qty" inputmode="numeric">
</div>
<button type="submit" class="single_add_to_cart_button">Add to cart</button>
</div>
Thank you.
table and div tag are both block level element. They display in two lines in default.
Below is the result of running your code.
I am try to display under my form the new value.
<form>
<h2>AES Encryption</h2>
<table>
<tr>
<td>
<label for="inputValue">Text to encrypt</label>
</td>
<td>
<input type="text" id="inputValue" size="50" name="inputValue" />
</td>
</tr>
<tr>
<td>
<label for="inputPassword">Password:</label>
</td>
<td>
<input type="text" id="inputPassword" size="50" name="inputPassword" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="Verschlüsseln" id="submitButton" onclick="encryptAES()"/>
</td>
</tr>
</table>
<div id="afterPressed" hidden="true">
<h3 id="resultTitle"></h3>
<p id="result"></p>
<br>
<h3>Code</h3>
Download
</div>
</form>
and my Script:
function encryptAES() {
var value = document.getElementById("inputValue").value;
var password = document.getElementById("inputPassword").value;
var encrypted = base64toHEX(CryptoJS.AES.encrypt(value, password));
document.getElementById("afterPressed").removeAttribute("hidden");
document.getElementById("resultTitle").innerHTML = "Result";
document.getElementById("result").innerHTML = encrypted;
}
When I click the button the code works for 1 second and then refresh the form as null
I want to show the result in the div result tag, but the page is updated and everything disappears and the code is hidden again.
Your form is submitting, so the values are displayed in the browser and then the page reloads.
You can either set the onsubmit property of the form like this:
<form onsubmit="return false;">
Or you can use an <input type="button"> or <button> instead of the <input type="submit"> that is... well, submitting the form.
Update your form tag with <form onsubmit="return false;">. This will prevent the page from getting submitted.
I use angularJS and I have one table on my page, I made one button to add row with input fields. My solution work good for adding rows and value of input fields in form, but doesn't work well where I need to delete particular row. I use one function for form, and another for adding and deleting rows.
It's like this:
<div ng-init="tmplCtr.newPeople()">
<div class="col-lg-12">
<input name="postsubmit" class="btn btn-default btn-sm" type="submit" value="Save table" ng-click="tmplCtr.newTable(tmplCtr.table)" />
<button class="btn btn-default btn-sm" ng-click="tmplCtr.editRow()">Add row</button>
</div>
<form name="peopleForm" novalidate>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th class="place-name">Name</th>
<th class="place-value">Lastname</th>
<th class="place-options">Options</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="people in tmplCtr.peoples">
<td class="place-name"><input type="text" name="" class="form-control" autocomplete="off" ng-model="tmplCtr.peoples.values[$index].name"></td>
<td class="place-last"><input type="text" name="" class="form-control" autocomplete="off" ng-model="tmplCtr.peoples.values[$index].lastname"></td>
<td class="place-options"><button class="btn btn-danger btn-md btn-delete" ng-click="tmplCtr.editRow($index)">Delete</button></td>
</tr>
</tbody>
</table>
</div>
</form>
When I press button add row I get row, but when I press delete row I delete row from screen but last row in array, not by index. Beside that also value of that row is not deleted from form scope. Function is:
function editRow(item) {
if(item == undefined) {
vm.peoples.push({});
} else {
vm.peoples.splice(item,1);
}
}
Can anyone help me?
I think its better to make two functions, the first one is for adding items, and the second one is for deleting like below:
function addEmptyItem(){
vm.peoples.push({});
}
function deleteItem(index){
vm.peoples.splice(index, 1);
}
Then in your view you can change tmplCtr.editRow($index) --> tmplCtr.deleteItem($index)
Furthermore it is strongly advised to use this syntax person.name etc in your repeat directive.
EDIT:
This is not tested by the way...
Please see this screen shotI need some help. I want to populate dynamic table's row data into a form when i clicked on the particular row.When i try this html elements are repeating along with data when i click on the table rows, but i need like elements should not repeat only data should change. This is my template code
<table class="table2">
<tr>
<th>'Player'</th>
<th>Age</th>
</tr>
<tr ng-repeat=" usr in fc.saveData" ng-click="fc.fnRowClick(usr)">
<td>{{usr.player}}</td><td>{{usr.age}}</td>
</tr>
</table>
<div ng-repeat="data in fc.displayData track by $index">
<label for="field1">
<span>Name</span><input type="text" name="field1" required="true" ng-model="data.player"/>
</label>
<label for="field2">
<span>Age</span><input type="text" name="field2" required="true" ng-model="data.age"/>
</label>
</div>
This is my js code.
fc.displayData=[];
fc.fnRowClick = function(usr){
console.log(usr);
fc.displayData.push(usr);
console.log(fc.displayData);`
}
html name attribute is beeing duplicated during ng-repeat.
That may cause this problem.
Change:
<label for="field1">
<span>Name</span><input type="text" name="field1" required="true" ng-model="data.player"/>
</label>
to this:
<label for="field1{{$index}}">
<span>Name</span><input type="text" name="field1{{$index}}" required="true" ng-model="data.player"/>
</label>
Do the same for second label.