PDA

View Full Version : Form/JS problem...



maarten_2002
12-18-2009, 05:12 PM
Hi People,

I am trying to use a button I found on:
http://monc.se/kitchen/59/scalable-css-buttons-using-png-and-background-colors/

The button setup works fine, but my form doesn't work any more...
That is why I am hoping anyone here can help me out.

Thanks in advance!


The JS I use for my form is:


var lv_firstName = new LiveValidation('firstName', {onlyOnBlur: true});
lv_firstName.add(Validate.Presence);
lv_firstName.add(Validate.Length, {minimum: 2, maximum: 50});
lv_firstName.add(Validate.Format, {pattern: /^([a-z \-\']+)$/i});

var lv_insertion = new LiveValidation('insertion', {onlyOnBlur: true});
lv_insertion.add(Validate.Length, {minimum: 2, maximum: 50});
lv_insertion.add(Validate.Format, {pattern: /^([a-z \-\']+)$/i});

var lv_lastName = new LiveValidation('lastName', {onlyOnBlur: true});
lv_lastName.add(Validate.Presence);
lv_lastName.add(Validate.Length, {minimum: 2, maximum: 50});
lv_lastName.add(Validate.Format, {pattern: /^([a-z \-\']+)$/i});

var lv_emailaddress = new LiveValidation('emailaddress', {onlyOnBlur: true});
lv_emailaddress.add(Validate.Presence);
lv_emailaddress.add(Validate.Email);

var lv_message = new LiveValidation('message', {onlyOnBlur: true});
lv_message.add(Validate.Presence, {failureMessage: ' '});
lv_message.add(Validate.Length, {minimum: 10, failureMessage: ' '});


The code I use for the button is:


var btn = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
as = btn.getElementsByClassName('btn(.*)');
for (i=0; i<as.length; i++) {
if ( as[i].tagName == "INPUT" && ( as[i].type.toLowerCase() == "submit" || as[i].type.toLowerCase() == "button" ) ) {
var a1 = document.createElement("a");
a1.appendChild(document.createTextNode(as[i].value));
a1.className = as[i].className;
a1.id = as[i].id;
as[i] = as[i].parentNode.replaceChild(a1, as[i]);
as[i] = a1;
as[i].style.cursor = "pointer";
}
else if (as[i].tagName == "A") {
var tt = as[i].childNodes;
}
else { return false };
var i1 = document.createElement('i');
var i2 = document.createElement('i');
var s1 = document.createElement('span');
var s2 = document.createElement('span');
s1.appendChild(i1);
s1.appendChild(s2);
while (as[i].firstChild) {
s1.appendChild(as[i].firstChild);
}
as[i].appendChild(s1);
as[i] = as[i].insertBefore(i2, s1);
}

if (document.getElementById('submit_btn')) {
btn.addEvent(document.getElementById('submit_btn'),'click',function() {
var form = btn.findForm(this);
form.submit();
});
}
},
findForm : function(f) {
while(f.tagName != "FORM") {
f = f.parentNode;
}
return f;
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
},
getElementsByClassName : function(className, tag, elm) {
var testClass = new RegExp("(^|\s)" + className + "(\s|$)");
var tag = tag || "*";
var elm = elm || document;
var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
var returnElements = [];
var current;
var length = elements.length;
for(var i=0; i<length; i++){
current = elements[i];
if(testClass.test(current.className)){
returnElements.push(current);
}
}
return returnElements;
}
}

btn.addEvent(window,'load', function() { btn.init();} );

HTML:


<p><input type="submit" value="Formulier verzenden" class="btn blue" id="submit_btn" /></p>

maarten_2002
12-20-2009, 09:11 PM
Problem solved in another way.