HTML and JS snippets for the basis of an HTML-based MARC editor that uses MARC-in-JSON format.

marc-form-stub.html

<form id="marcForm">
<div class="leader"> 
  <!-- imagine all that leader stuff in here -->
</div>

<div class="field controlField" id="[ some-autogenerated-id ]">
   <label>Tag <input type="text" name="tag" pattern="[0-9]{3}">&nbsp; <input type="text" name="data" />
</div>

<div class="field dataField" id="[some-autogenerated-id]>
  <label>Tag <input type="text" name="tag" pattern="[0-9]{3}"/></label> <input type="text" name="ind1" maxlength="1" /> <input type="text" name="ind2" maxlength="1" /> <input type="text" name="data" />
</div>

</form>

marc-html-to-mij.js

var controlFields = { '001': true, '002': true, '003': true, '004': true, '005', true, '006': true, '007' : true, '008':true, '009': true};

function buildControlField(tag, data) {
   var obj = {};
   obj[tag] = data;
   return obj;
}

function readSubfields(data) {
   // no this is not implemented, but the result
   // would be an array that looks like this
   // probably need to do some semi-fancy regexes
   return [ { a: "Main Title!" } ];
}

function buildDataField(tag,div) {
   var obj = {};
   obj[tag] = { 
   	subfields: readSubfields(div.find('[name=data]').val()),
   	ind1 : div.find("[name=ind1]").val(),
   	ind2 : div.find("[name=ind2]").val()
   };
   return obj;
}
   
function buildRecord(someForm) {
   var $form = $(someForm);
   var rec = {leader: $($form, "[name=leader]").val(), fields : [] };
   $form.find("div.field").each( function() {
   	var div = $(this);
	var tag = div.find("[name=tag]").val();
   	if ( tag in controlFields ) {
   		rec.fields.push( 
			buildControlField(tag, div.find([name=data]).val() )
		);
	} else {
   		rec.fields.push( buildDataField(tag, div) );
   	}
   });
   return rec;
}