Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Using NiceForms a onchange problem

    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

    Code:
    <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/):

    Code:
    <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:

    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

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,536
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    If this is your actual code:
    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
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,
    thanks for your reply.
    im sorry i forgot write <script> tags in my code. It should be:

    Code:
    <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

  • #4
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by petrsev View Post
    Hi,
    thanks for your reply.
    im sorry i forgot write <script> tags in my code. It should be:

    Code:
    <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)
    Code:
    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);
    	
    }
    Last edited by visnait; 11-21-2011 at 01:37 PM. Reason: Update


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •