Custom Form Not Working With onClick

seeraig
seeraig used Ask the Experts™
on
I'm using a custom form script called niceforms to create nicer forms. I'm trying to get an onClick function that show/hides a layer on a CHECKBOX to work with them. Niceforms does overwrite custom event handlers in order to work properly, but there is a workaround, but I'm not really understanding what code is necessary. It is explained how to do it here:

http://www.emblematiq.com/lab/niceforms/help/#help04

What I need is the niceforms.js file edited to include the additional code that will show/hide a layer when a niceforms checkbox is clicked (show on checked, hide when unchecked). Here is a sample of my basic code:

<!-- Show/Hide Script -->
<script language="javascript" type="text/javascript">
var currentSpan = 1;
function showMe(n) {
document.getElementById("ex_"+currentSpan).style.display = "none";
document.getElementById("ex_"+n).style.display = "block";
currentSpan = n;
}
</script>

<!-- CheckBox -->
<INPUT TYPE="CHECKBOX" NAME="#FormName#" VALUE="#FormName#" onClick="showMe(1)">

<!-- Show/Hide Layer -->
<span id="ex_1" style="display:none;"><INPUT TYPE="TEXT" NAME="Image2" SIZE=10></span>

niceforms2.0.js
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Michel PlungjanIT Expert
Top Expert 2009

Commented:
change code starting at line 205
from

      el.onclick = function() {
            if(this.checked) {this.dummy.className = "NFCheck NFh";}
            else {this.dummy.className = "NFCheck";}
      }

to

      el.onclick = function() {
            if(this.checked) {this.dummy.className = "NFCheck NFh";}
            else {this.dummy.className = "NFCheck";}
         if (this.id.indexOf("chk")!=-1) {
            var n = this.id.split("_")[1];
            document.getElementById("ex_"+currentSpan).style.display = "none";
            document.getElementById("ex_"+n).style.display = "block";
            currentSpan = n;
          }
     }

assuming you are allowed to change
<INPUT TYPE="CHECKBOX" NAME="#FormName#" VALUE="#FormName#" onClick="showMe(1)">
to
<INPUT TYPE="CHECKBOX" NAME="#FormName#" VALUE="#FormName#" id="chk_1">

Author

Commented:
I've implemented this, but it's not working. I updated the niceforms2.0.js with your code above. Then I have the following:

<INPUT TYPE="CHECKBOX" NAME="PetImage2_Ad" VALUE="PetImage2_Ad" id="chk_1">

I've implemented this, but it's not working. I updated the niceforms2.0.js with your code above. Then I have the following:

<INPUT TYPE="CHECKBOX" NAME="PetImage2_Ad" VALUE="PetImage2_Ad" id="chk_1">

<span id="ex_1" style="display:none;">
<input type="file" class="nicefield" accept="images/*" name="PetImage2" size="15" tabindex="31" onkeydown="blur()" onkeyup="blur()" />
</span>
Michel PlungjanIT Expert
Top Expert 2009

Commented:
What is the deal with the file field and the blur?
Exploring SQL Server 2016: Fundamentals

Learn the fundamentals of Microsoft SQL Server, a relational database management system that stores and retrieves data when requested by other software applications.

Michel PlungjanIT Expert
Top Expert 2009

Commented:
Works for me:

http://jsfiddle.net/mplungjan/rrSLF/

I added code to hide the field if the checkbox is unchecked:

document.getElementById("ex_"+n).style.display = this.checked?"block":"none";

Author

Commented:
hi,

on your code example your form is not a niceform. i have no problems doing it on a regular form field. When niceforms is coded correctly it looks like this:

http://www.emblematiq.com/lab/niceforms/demo/v20/niceforms.html

the blur and file field does not matter, getting it to work with any form field or layer will be enough, i can get the file field after that.

thanks
craig
Michel PlungjanIT Expert
Top Expert 2009

Commented:
I do not have the CSS but I included the niceform js
Michel PlungjanIT Expert
Top Expert 2009

Commented:
Ah

Now it is a niceform but their documentation must be wrong
http://jsfiddle.net/mplungjan/rrSLF/

It does not trigger my code at all

Author

Commented:
yeah you have the right niceform now and as you can see it does not trigger a show/hide layer. not sure how to do that with the niceform. If you figure it out let me know.
Michel PlungjanIT Expert
Top Expert 2009

Commented:
I have mailed them

We will see if they answer
leakim971Multitechnician
Top Expert 2014

Commented:
check this : http://jsfiddle.net/5V9wJ/1/

var currentSpan = 1;

function showMe(obj) {
    n = obj.value; // you may put the number in a class or a custom attribute if you can't put it as the value
    document.getElementById("ex_"+currentSpan).style.display = "none";
    document.getElementById("ex_"+n).style.display = "block";
    currentSpan = n;
}

window.onload = function() {
    var el = document.getElementsByName("#FormName#")[0];
    if(el.addEventListener) {
        el.addEventListener("click", new Function("showMe(this)"), false);
    }
    else if(el.attachEvent) {
        el.attachEvent("onclick", new Function("showMe(this)"));
    }
}

Open in new window

leakim971Multitechnician
Top Expert 2014

Commented:
Check this too : http://jsfiddle.net/5V9wJ/4/
No change to your current HTML

var currentSpan = 1;

function showMe(n) {
    document.getElementById("ex_"+currentSpan).style.display = "none";
    document.getElementById("ex_"+n).style.display = "block";
    currentSpan = n;
}

window.onload = function() {
    var obj = document.getElementsByName("#FormName#")[0];
    setOnClick(obj,"showMe(1)")
}

function setOnClick(el, hndFct) {
    if(el.addEventListener) {
        el.addEventListener("click", new Function(hndFct), false);
    }
    else if(el.attachEvent) {
        el.attachEvent("onclick", new Function(hndFct));
    }
}

Open in new window

Michel PlungjanIT Expert
Top Expert 2009

Commented:
But why is all that necessary? What is the reason for the lacking click handler?
Multitechnician
Top Expert 2014
Commented:
there's an image over the checkbox.
we need to put the code for the image not for the checkbox itself
check el.dummy :

function inputCheck(el) { //extend Checkboxes
    el.oldClassName = el.className;
    el.dummy = document.createElement('img');
    el.dummy.src = imagesPath + "0.png";
    if(el.checked) {el.dummy.className = "NFCheck NFh";}
    else {el.dummy.className = "NFCheck";}
    el.dummy.ref = el;
    if(isIE == false) {el.dummy.style.left = findPosX(el) + 'px'; el.dummy.style.top = findPosY(el) + 'px';}
    else {el.dummy.style.left = findPosX(el) + 4 + 'px'; el.dummy.style.top = findPosY(el) + 4 + 'px';}
   el.dummy.onclick = function() {
        if(!this.ref.checked) {
            this.ref.checked = true;
            this.className = "NFCheck NFh";
            showMe(1);

        }
        else {
            this.ref.checked = false;
            this.className = "NFCheck";
        }

test page here : http://jsfiddle.net/cMtPy/

>But why is all that necessary?

we've just add 3 lines of code :)
It allow we to add event without modification of the plugin

function setOnClick(el, hndFct) {
    if(el.addEventListener) el.addEventListener("click", new Function(hndFct), false); else if(el.attachEvent) el.attachEvent("onclick", new Function(hndFct));
}

Open in new window


this part should be already in a page :
window.onload = function() {
    var obj = document.getElementsByName("#FormName#")[0];
    setOnClick(obj,"showMe(1)")
}

Open in new window


Michel PlungjanIT Expert
Top Expert 2009
Commented:
But my original code SHOULD have worked according to the documentation

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial