<commit_before><!DOCTYPE html>
<html>
<head>
<title>Form element to JSON</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/static/css/style.css"/>
<script src="/static/js/jquery-1.12.4.js"></script>
</head>
<body>
<div class="align-center">
	<h2>Form element to JSON</h2>
	<form>
		<section>
			<table>
				<tr>
					<td>
						<input type="text" name="txtIpt" value="introduce my self">
						<textarea name="txtarea" cols="30" rows="1">Textarea the firstborn</textarea>
						<label><input type="checkbox" name="chkbox" value="Y" checked> Y</label>
						<label><input type="checkbox" name="chkbox" value="N"> N</label>
					</td>
				</tr>
			</table>
		</section>
		<section>
			<table>
				<tr>
					<td>
						<input type="text" name="txtIpt" value="some meme">
						<textarea name="txtarea" cols="30" rows="1">Knowledge is power. - france is bacon</textarea>
						<label><input type="checkbox" name="chkbox" value="Y"> Y</label>
						<label><input type="checkbox" name="chkbox" value="N" checked> N</label>
					</td>
				</tr>
			</table>
		</section>
		<section>
			<table>
				<tr>
					<td>
						<input type="text" name="txtIpt" value="waldo said">
						<textarea name="txtarea" cols="40" rows="1">Hello there! String and fine morning! If you ask me, I'm Waldo.</textarea>
						<label><input type="checkbox" name="chkbox" value="Y" checked> Y</label>
						<label><input type="checkbox" name="chkbox" value="N"> N</label>
					</td>
				</tr>
			</table>
		</section>
	</form>
</div>
<div class="align-center" id="result">
</div>
<script>
/**
 * jQuery를 사용한 방식
 */
function formToJsObjectOld(targetElement) {
	var param = new Object();
	$(targetElement).find('input, textarea, select').each(function(idx, ele) {
		var name = $(ele).attr('name'),
			type = $(ele).attr('type'),
			checked = $(ele).prop('checked'),
			disabled = $(ele).prop('disabled'),
			val = $(ele).val();
		if (typeof name === 'undefined') {
			return true; // jquery each continue
		}
		if (type == 'checkbox' || type == 'radio') {
			if (checked && !disabled) {
				param[name] = val;
			}
		} else {
			if (!disabled) {
				param[name] = val;
			}
		}
	});
	return param;
}
/**
 * targetElement의 child dom 중 input(textarea, select 포함)을 모두 찾아 자바스크립트 객체로 변환
 * 
 * @param {object|string} parentElement input의 직계 조상 중 하나
 * @return 반환값 예시: {"txtIpt":"waldo","txtarea":"hi!","chkbox":"Y"}
 */
function formToJsObject(parentElement) {
	if (typeof parentElement == 'string') {
		parentElement = document.querySelector(parentElement);
	}
	var returnMe = new Object();
	var inputElements = parentElement.querySelectorAll('input, textarea, select');
	inputElements.forEach(function(ele, idx, obj) {
		var name = ele.getAttribute('name'),
			type = ele.getAttribute('type'),
			checked = ele.checked,
			disabled = ele.disabled,
			val = ele.value;
		if (typeof name === 'undefined') {
			return; // Array.forEach(): continue
		}
		if (type == 'checkbox' || type == 'radio') {
			if (checked && !disabled) {
				returnMe[name] = val;
			}
		} else {
			if (!disabled) {
				returnMe[name] = val;
			}
		}
	});
	return returnMe;
}
var formData = [];
var tables = document.querySelectorAll('table');
tables.forEach(function(ele, idx, obj) {
// 	console.log('idx:', idx); // index
// 	console.log('ele:', ele); // each element
// 	console.log('obj:', obj); // this
	formData.push(formToJsObject(ele));
});
console.log('formData: ', JSON.stringify(formData));
document.querySelector('#result').textContent = JSON.stringify(formData);
</script>
</body>
</html><commit_msg>코멘트 수정<commit_after><!DOCTYPE html>
<html>
<head>
<title>Form element to JSON</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/static/css/style.css"/>
<script src="/static/js/jquery-1.12.4.js"></script>
</head>
<body>
<div class="align-center">
	<h2>Form element to JSON</h2>
	<form>
		<section>
			<table>
				<tr>
					<td>
						<input type="text" name="txtIpt" value="introduce my self">
						<textarea name="txtarea" cols="30" rows="1">Textarea the firstborn</textarea>
						<label><input type="checkbox" name="chkbox" value="Y" checked> Y</label>
						<label><input type="checkbox" name="chkbox" value="N"> N</label>
					</td>
				</tr>
			</table>
		</section>
		<section>
			<table>
				<tr>
					<td>
						<input type="text" name="txtIpt" value="some meme">
						<textarea name="txtarea" cols="30" rows="1">Knowledge is power. - france is bacon</textarea>
						<label><input type="checkbox" name="chkbox" value="Y"> Y</label>
						<label><input type="checkbox" name="chkbox" value="N" checked> N</label>
					</td>
				</tr>
			</table>
		</section>
		<section>
			<table>
				<tr>
					<td>
						<input type="text" name="txtIpt" value="waldo said">
						<textarea name="txtarea" cols="40" rows="1">Hello there! String and fine morning! If you ask me, I'm Waldo.</textarea>
						<label><input type="checkbox" name="chkbox" value="Y" checked> Y</label>
						<label><input type="checkbox" name="chkbox" value="N"> N</label>
					</td>
				</tr>
			</table>
		</section>
	</form>
</div>
<div class="align-center" id="result">
</div>
<script>
/**
 * jQuery를 사용한 방식
 */
function formToJsObjectOld(targetElement) {
	var param = new Object();
	$(targetElement).find('input, textarea, select').each(function(idx, ele) {
		var name = $(ele).attr('name'),
			type = $(ele).attr('type'),
			checked = $(ele).prop('checked'),
			disabled = $(ele).prop('disabled'),
			val = $(ele).val();
		if (typeof name === 'undefined') {
			return true; // jquery each continue
		}
		if (type == 'checkbox' || type == 'radio') {
			if (checked && !disabled) {
				param[name] = val;
			}
		} else {
			if (!disabled) {
				param[name] = val;
			}
		}
	});
	return param;
}
/**
 * targetElement의 child dom 중 input(textarea, select 포함)을 모두 찾아 자바스크립트 객체로 변환.
 * 이름(input의 name 속성)이 같은 태그가 둘 이상이면 (HTML 마크업 기준)가장 나중에 위치한 태그 하나만 변환된다.
 * 
 * @param {object|string} parentElement input의 직계 조상 중 하나
 * @return 반환값 예시: {"txtIpt":"waldo","txtarea":"hi!","chkbox":"Y"}
 */
function formToJsObject(parentElement) {
	if (typeof parentElement == 'string') {
		parentElement = document.querySelector(parentElement);
	}
	var returnMe = new Object();
	var inputElements = parentElement.querySelectorAll('input, textarea, select');
	inputElements.forEach(function(ele, idx, obj) {
		var name = ele.getAttribute('name'),
			type = ele.getAttribute('type'),
			checked = ele.checked,
			disabled = ele.disabled,
			val = ele.value;
		if (typeof name === 'undefined') {
			return; // Array.forEach(): continue
		}
		if (type == 'checkbox' || type == 'radio') {
			if (checked && !disabled) {
				returnMe[name] = val;
			}
		} else {
			if (!disabled) {
				returnMe[name] = val;
			}
		}
	});
	return returnMe;
}
var formData = [];
var tables = document.querySelectorAll('table');
tables.forEach(function(ele, idx, obj) {
// 	console.log('idx:', idx); // index
// 	console.log('ele:', ele); // each element
// 	console.log('obj:', obj); // this
	formData.push(formToJsObject(ele));
});
console.log('formData: ', JSON.stringify(formData));
document.querySelector('#result').textContent = JSON.stringify(formData);
</script>
</body>
</html>
{'fraction_non_alphanumeric': 0.19691065961591983, 'fraction_numerical': 0.004453103256331756, 'mean_word_length': 3.750165234633179, 'pattern_counts': {'":': 6, '<': 151, '<?xml version=': 0, '>': 151, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4818259', 'n_tokens_mistral': 2957, 'n_tokens_neox': 2681, 'n_words': 593}