...

View Full Version : Using NiceForms a onchange problem



petrsev
10-11-2011, 02:47 PM
Hello all,
i'm starting to use Niceforms solving for the better appearance of my forms (http://www.emblematiq.com/lab/niceforms/help/)

In my page i have for example this form



<form action="<?echo $_SERVER["REQUEST_URI"]?>" method="post" class="niceform">
<label>order by:</label>
<select size="1" name="orderby" onchange="this.form.submit()">

<option value="name"> Vzestupně </option>
<option value="name1"> Sestupně </option>

</select>
<input type = "hidden" name = "akce4" value = "zmena_razeni_prodejci" />

</form>

I modified this form follows (how it descibed http://www.emblematiq.com/lab/niceforms/help/):


<form action="<?echo $_SERVER["REQUEST_URI"]?>" method="post" class="niceform">
<label>order by:</label>
<select size="1" name="orderby" class="NFOnChange" >


el.lnk._onclick = el.onclick || function () {
if(this.ref.oldClassName == "NFOnChange") {
"this.form.submit()"
}};

<option value="name"> Vzestupně </option>
<option value="name1"> Sestupně </option>

</select>
<input type = "hidden" name = "akce4" value = "zmena_razeni_prodejci" />

</form>

Author Niceforms wrote about onchange:
By default, Niceforms overrides the onchange attributes of any drop down options, thus making a classic jump menu unusable. However, there is a quick workaround.

Add a custom class name to that particular select element (i.e. class="NFOnChange") so that the script can separate it from all the other regular select elements. Within the option(el, no) function, add the following code:


el.lnk._onclick = el.onclick || function () {
if(this.ref.oldClassName == "NFOnChange") {
//insert your code here
}};

Instead of the commented line simply insert your own custom javascript that should be executed when that particular option is selected.

but i dont know how it must be edited. I think that there is a syntax problem in "this.form.submit()". i dont know how i can change it.
Because now i have a beutiful form but when i try to change option it nothing happens.
Could somebody help me?
Im beginner in programming javascript.......thank you very much...Petr

Old Pedant
10-11-2011, 09:41 PM
If this is your actual code:


<select size="1" name="orderby" class="NFOnChange" >


el.lnk._onclick = el.onclick || function () {
if(this.ref.oldClassName == "NFOnChange") { "this.form.submit()" }
};

<option value="name"> Vzestupně </option>
<option value="name1"> Sestupně </option>

</select>

Then you totally misunderstood what to do.

The part in red there needs to be placed *someplace* in the JavaScript code. It's not HTML code, which is how you have coded it.

The instructions say

Within the option(el, no) function, add the following code:

You clearly did not do that.

In addition, the quotes around this.form.submit() are utterly bogus.

*************

Did you read this part?

Niceforms isn't for everyone! It is only intended for web professionals

petrsev
10-12-2011, 08:32 AM
Hi,
thanks for your reply.
im sorry i forgot write <script> tags in my code. It should be:


<script>
el.lnk._onclick = el.onclick || function () {
if(this.ref.oldClassName == "NFOnChange") {
"this.form.submit()"
}};
</script>

Yes, of course i read this text. im a beginner in javascript but it doesnt mean that i cant to use it.
Author write about quick workaround. probably It would not be difficult.
So do you think that edit will be more sophisticated?
Some advise please? im open to learn.
thx

visnait
11-21-2011, 02:09 PM
Hi,
thanks for your reply.
im sorry i forgot write <script> tags in my code. It should be:


<script>
el.lnk._onclick = el.onclick || function () {
if(this.ref.oldClassName == "NFOnChange") {
"this.form.submit()"
}};
</script>

Yes, of course i read this text. im a beginner in javascript but it doesnt mean that i cant to use it.
Author write about quick workaround. probably It would not be difficult.
So do you think that edit will be more sophisticated?
Some advise please? im open to learn.
thx


Hi

this script you must add to the niceform.js -> function option(el,no) this extends the select elements. You have there already the first condition there.

You can use the code from the help page, but im not added anything to niceforms.js only one line: overrideChange(this.ref.oldClassName);
Now you must only add a class to select and add a function (in this case 'overrideChange') and in variable 'el' you will become the class of original element.

but the easiest way is this (modify function option in niceform.js)


function option(el, no) { //extend Options
el.li = document.createElement('li');
el.lnk = document.createElement('a');
el.lnk.href = "javascript:;";
el.lnk.ref = el.parentNode;
el.lnk.pos = no;
el.lnk._onclick = el.onclick || function () {
el.lnk.ref.value = el.value;
myfireEvent(el.parentNode, 'change');
if (el.lnk.ref.onchange)
el.lnk.ref.onchange();


};

el.txt = document.createTextNode(el.text);
el.lnk.appendChild(el.txt);
el.li.appendChild(el.lnk);

}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum