We Keep Coding

Handling forms with multiple actions

Let's say I have an Admin page with a list of items, and I have various capabilities to modify those records -- Change its name, Delete it, Clear its contents, etc. For example a row would be rendered similar to the following:
const row =`<tr id="id${this.id}">
<td name="name">
<input type="text" placeholder="Set name" value=${this.name} />
<input type="submit" name="setName" value="Save" />
</td>
<td name="size">${this.set.size}<td/>
<td name="elements"><b>{ ${this.renderSetElements()} }</td>
<td name="actions">
<input type="text" placeholder="Add element" />
<input type="submit" name="addElement" value="Add" />
<input type="submit" name="clearElements" value="Clear" />
<input type="submit" name="deleteSet" value="Delete" />
</td>
</tr>`
What would the proper way to add forms here? Should there be one form around the row? Should there be four forms per row -- one for each action? (setName, addElement, clearElements, deleteSet)? Or what is the suggested way to accomplish the above? Additionally, is identifying the row as id${this.id} appropriate, or what's usually the contention for something like that?

The short answer is that you can have a
The form inside a cell td.
<table>
<tr><td><form>...</form></td></tr>
<tr><td><form>...</form></td></tr>
</table>
You can have a table inside a form
<form>
<table>
<tr><td>...</td></tr>
<tr><td>...</td></tr>
</table>
</form>
Or you can ditch the form element and use JavaScript to do Ajax:
In this case, I will be using the Javascript library jQuery since it simplifies a lot of stuff; however, you can implement this with pure Javascript if you want to.
// Wait for the document to be fully loaded
$(document).ready(function(){
$(".submit").on("click", function(event){
event.preventDefault();
console.log("submit...");
var url = "https://httpbin.org/get";
var data = {
id: $('#id').val()
};
$.get(url, data, function(result){
console.log("Server received the id number: ", result.args.id);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><input class="inputs" id="id" value="0"/></td>
</tr>
<tr>
<td><button class="submit" id="add">Add</button></td>
</tr>
</table>
In your particular case, you might try generate these rows dynamically and using Ajax to send the information to the server, without having to refresh the whole page. Here is an example:
(function(){
let count = 0;
function createColumn(){
let column = $('<td>');
let text = $(`<input type="text" placeholder="Set name" value="${count}">`);
let submit = $('<button class="save" type="submit" name="setName">Save</button>');
column.append(text);
column.append(submit);
return column;
}
function createRow(){
let row = $('<tr>');
row.attr("id", count++);
row.append(createColumn());
return row;
}
let table = $('#table');
$('#btnAdd').on('click', () => {
table.append(createRow());
});
table.on('click', '.save', function() {
let text = $(this).prev().val();
console.log("INPUT TEXT:", text);
});
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btnAdd">Add Row</button>
<table id="table">
</table>
I hope you found this informative, useful, and that you can apply it to your particular issue.

How to clear Input data from within JQuery Div

I have a simple form users can fill out and also add a new form to add multiple entries.
Everything works fine except when I enter data in the first set of inputs and click create new memberships it will take the data from the form and put it in the text boxes.
How can I stop that?
http://jsfiddle.net/811yohpn/2/
I have tried a couple different ways.
$('#education').find('input:text').val('');
$('#education: input').val('');
However that will clear all entries.

Call find on the newDiv, instead of all inputs within #education.
Updated fiddle
newDiv.find('input:text').val('');
var ed = 1;
function new_education() {
ed++;
var newDiv = $('#education div:first').clone();
newDiv.attr('id', ed);
var delLink = '<a class="btn btn-danger" style="text-align:right;margin-right:65px" href="javascript:deled(' + ed + ')" > Delete Education ' + ed + ' </a>';
newDiv.find('tr:first th').text('Education ' + ed);
newDiv.append(delLink);
newDiv.find('input:text').val(''); // <----------- added this
$('#education').append(newDiv);
}
function deled(eleId) {
d = document;
var ele = d.getElementById(eleId);
var parentEle = d.getElementById('education');
parentEle.removeChild(ele);
//ed--;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<legend>Education</legend>
<div id="education">
<div id="1">
<table border=3>
<tr>
<th colspan="4" style="background-color:#b0c4de;">Education 1</th>
</tr>
<tr>
<td>
<label>School Name</label>
<input type="text" name="schoolname[]" maxlength="30" size="30"/>
</td>
<td>
<label>Degree Type</label>
<input type="text" name="degreetye[]" maxlength="30" size="30"/>
</td>
<td>
<label>Degree Field</label>
<input type="text" name="degreefield[]" maxlength="30" size="30"/>
</td>
</tr>
</table>
</div>
</div>
<br/><a class="js-addNew btn btn-info" href="javascript:new_education()"> Add New Education </a>

You need to clear the inputs under the cloned element
newDiv.find('input').val('')
Demo: Fiddle
Your selectors are selecting all input elements within the #education container, that is not what you want. The newDiv variable refers to the newly created element so you can use that to find the input elements within in and then clear it

using jquery or javascript

I have this code in my page. with two textboxes and one textarea.
<fieldset>
<legend><b>Search Criteria</b></legend>
<table>
<tr>
<td>
Find Text:
<input type="text" style="width:150px" id="txtFind"/>
<input type="button" id="btnfind" value=" Find "/>
</td>
</tr>
<tr>
<td>
Replace Text:
<input type="text" style="width:150px" id="Text1"/>
<input type="button" value="Replace Text" id="btnReplace"/>
</td>
</tr>
</table>
</fieldset>
<br />
<fieldset>
<legend><b>Result</b></legend>
<table>
<tr>
<td>
<%:Html.TextArea("Hello ASP.NET here")%>
</td>
</tr>
</table>
</fieldset>
in my first textbox if I enter "here" then I click the Find button it should find the text
if I enter "MVC" on second text box click Replace Text button it should replace the text "here" to "MVC" ("Hello ASP.NET MVC").,
Please can any one help me out? How to do this with javascript or jquery?
Thanks

Asuming your textarea has id="textarea", you should do this:
$("#btnfind").click(function(){
var find = $("#txtFind").val();
var replace = $("Text1").val();
var text = $("#textarea").val();
while(text.indexOf(find) >= 0){
text = text.replace(find, replace);
}
$("#textarea").val(text);
});
(Note that we're not using Regular expressions to replace because the text to find is dynamic so we'd have to escape the 'find' text).
Hope this helps. Cheers

this should get you started: http://jsfiddle.net/DD7t5/
using jQuery and a highlight jQuery plugin
var $result = $('#result'),
$txtFind = $('#txtFind'),
$txtReplace = $('#txtReplace');
$('#btnFind').click(function() {
$result.removeHighlight();
var findValue = $txtFind.val();
if (findValue.length > 0) {
$result.highlight(findValue) // find and highlight
}
});
$('#btnReplace').click(function() {
$result.text($result.text().replace(eval('/' + $txtFind.val() + '/gi'),
$txtReplace.val())); // replace
});

Get Html Attributes inside div

<div>
<table>
<tr>
<td>
<input type="text" id="one" value="1" name="textbox"/>
</td>
<td>
<input type="hidden" id="two" value="2" name="hidden"/>
</td>
</tr>
<tr>
<td>
<input type="radio" name="group2" value="Water"> Water<br>
<input type="radio" name="group2" value="Beer"> Beer<br>
</td>
<td>
<span id="sdf" title="sdf">ok</span>
</td>
</tr>
</table>
<div>
Get Html Attributes inside div,How to get attribute like type,name,value
from above div using dom(traversing) for each elements like input,span etc

a simple search on google returned this guide for javascript. here you can find everything you need

I assume you're asking how to do this with javascript. Here's sample code for the objects with id values. For the other values, put id names on them too and use the same technique.
var input_one = document.getElementById("one");
var input_two = document.getElementById("two");
alert("Input one: type='" + input_one.type + "', name='" + input_one.name + "', value='" + input_one.value + "'");
And a fiddle that shows it in action: http://jsfiddle.net/jfriend00/nZyjN/

using getAttribute( "type" ) we can get value of the particular attribute

The querySelectorAll(selectors) method allows you, for a given element, to retrieve an array of its descendant elements that match given criteria.
For example:
// Replace "yourDiv" with a reference to you main div
var elements = yourDiv.querySelectorAll("input, span");
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var name = element.name;
var type = element.type;
var value = element.value;
// Now you can do what you want with name, type and value, for example:
alert("Name: "+name+"\r\n"+"Type: "+type+"\r\n"+"Value: "+value);
}
According to the Mozilla Developer Network the querySelectorAll method is supported in IE8, Fx3.5, Chrome1, Opera 10 and Safari 3.2.

find inputs in HTML using JavaScript

In the below table which is generated dynamically, I want to traverse and find html controls (input,select,textarea) using JavaScript DOM. I don't want span and div values.
Can anyone give an idea on how to traverse?
<html>
<head>Html</head>
<body>
<tr>
<td>
<div id="one"></div>
</td>
<td>
<input type="text" name="textbox" id="txtid" value=10"/>
</td>
<td>
<select id="cuskstatus" name="cuskstatus" class="selectStyleBorder">
<option selected value="LOCAL">Local</option>
<option value="GLOBAL">Global</option>
</select>
</td>
</tr>
<tr>
<td>
<textarea id="tareaid" name="" value="10"/>
</td>
<td>
<span id="span1">value</span>
</td>
</tr>
</body>
</html>

I would do it like this
var desired_tag_names = new Array('select', 'input', 'textarea');
function getElements(e) {
var elements = new Array();
for (i=0; i<e.length; i++) {
var el = document.getElementsByTagName(e[i]);
for (j=0; j<el.length; j++) {
elements.push(el[j]);
}
}
return elements;
}
var all_the_desired_elements = getElements(desired_tag_names);

In plain JavaScript, just use form.elements.
Assuming that you've a <form id="formid">:
var inputs = document.getElementById("formid").elements;
// ...
Or if you want to traverse all forms of the document on a per-form basis, just use document.forms to get all forms first.
for (var i = 0; i < document.forms.length; i++) {
var form = document.forms[i];
var inputs = form.elements;
// ...
}
If you're already using jQuery, or are open to, use :input selector.
var $inputs = $(':input');
// ...

Applying jQuery makes this problem trivial:
$('input','select','textarea')
This will return a jQuery collection of all input, select and textarea elements.