Add event listener in custom page

[luthfifr]

Hi, I'm a newbie in prestashop. I use prestashop 1.6. I want to make a form in custom page that within the form there will be a hidden/shown field depends on another field value. To make it clear, here is the example:

 

 

I want to hide or show the "upload image" div depends on "Masukan jumlah yang ingin dipesan" field (quantity field). If it is less than 50, the "upload image" div will be hidden, otherwise, if it is more than 50 the "upload image" div will be shown. I know how to do this by using "onchange" event listener. The strange thing is, I already typed "onchange" event listener in my source code block, and then when I save the custom page, it is gone. As if prestashop don't want to save my "onchange" event listener. I already searched the topic in this forum, but I cant find any similar topic.

 

 

Is there anyone here who can help me?

 

Note:

I already put the javascript file that contains the function that will be executed in "onchange" event listener on themes/mytheme/js/autoload, and I put the css file for the hidden/shown class rules on theme/mytheme/css/autoload.

Edited September 15, 2016 by luthfifr (see edit history)

[luthfifr]

nobody cant help me in this forum? I thought this forum was active.

[razaro]

Hi

 

welcome to forum and sorry you did not find answer for few days. Posting in

General sub-forum is new users first choice so it get lot of posts there.

 

About your issue, where are you adding HTML code for that form ?

You are maybe using some existing module to add HTML code, but in that case

editor would strip JavaScript code. And what is custom page, some CMS page ?

 

My advice is to make new custom module and put HTML in tpl file, JavaScript in js files 

and that way you can control it better. I assume you have some php code too that is needed

when form is submitted ?

[shokinro]

I am guessing you are creating a custom box through a hook from a module or a module of your theme.

here are a few things you can look at it.

 

1. make sure your JavaScript works standalone by testing it in a pure HTML file.

2. make sure you JavaScript was included in the page where your Customer Box was rendered.

3. make sure you are using the $('document').ready to hook your event handler to make sure your elements are rendered before you hook event handlers

 

 

$('document').ready(function() {

 

   /// hook your event handlers

 

});

[luthfifr]

Finally, there 2 people who want to help me

thank you so much, guys.

 

Hi

 

welcome to forum and sorry you did not find answer for few days. Posting in

General sub-forum is new users first choice so it get lot of posts there.

 

About your issue, where are you adding HTML code for that form ?

You are maybe using some existing module to add HTML code, but in that case

editor would strip JavaScript code. And what is custom page, some CMS page ?

 

My advice is to make new custom module and put HTML in tpl file, JavaScript in js files 

and that way you can control it better. I assume you have some php code too that is needed

when form is submitted ?

Yes, what I mean by custom page is CMS page. I already put the css file and js file in correct directory. Yes, where should I put the php file?

 

 

I am guessing you are creating a custom box through a hook from a module or a module of your theme.

here are a few things you can look at it.

 

1. make sure your JavaScript works standalone by testing it in a pure HTML file.

2. make sure you JavaScript was included in the page where your Customer Box was rendered.

3. make sure you are using the $('document').ready to hook your event handler to make sure your elements are rendered before you hook event handlers

 

 

$('document').ready(function() {

 

   /// hook your event handlers

 

});

I already test it in pure html file, it's working, and the javascript is included. I also already put $('document').ready(function(){} in my js file.

What make me confuse is, the "onChange='()'" function is disappear everytime I save the CMS page. How to make it not disappear from the CMS page?

[shokinro]

on CMS page editing, HTML editor may not support embedded javascript. in stead of having onclick attribute in the HTML, you can hook the even inside $('document').redy. for example

 

$('document').ready(function() {

 

   /// hook your event handlers

   $("#my_element_id").click(function(e){

         //do what ever you waned to do here for the onclick event.

    });

 

});

[razaro]

on CMS page editing, HTML editor may not support embedded javascript. in stead of having onclick attribute in the HTML, you can hook the even inside $('document').redy. for example

 

$('document').ready(function() {

 

   /// hook your event handlers

   $("#my_element_id").click(function(e){

         //do what ever you waned to do here for the onclick event.

    });

 

});

 

Yeah this will get it done :-) 

 

For php well not cleanest solution but try to override CMSController.php, 

but still thinks custom module would be better. But if that works for it is OK :-)

[luthfifr]

on CMS page editing, HTML editor may not support embedded javascript. in stead of having onclick attribute in the HTML, you can hook the even inside $('document').redy. for example

 

$('document').ready(function() {

 

   /// hook your event handlers

   $("#my_element_id").click(function(e){

         //do what ever you waned to do here for the onclick event.

    });

 

});

Oh I see, that's why the onchange function always disappear.

I already edited my js file as you suggested but still, it's not working. I tried 2 ways to include it in CMS page, via cmscontroller.php and cms.tpl, none of them make my js works in my CMS page.

I just want to make a simple function, show a div if value of an input >50 and hide the div if it's <50. Why does such a simple function be a pain in the a** in prestashop

Do you have any other idea?

 

 

Yeah this will get it done :-) 

 

For php well not cleanest solution but try to override CMSController.php, 

but still thinks custom module would be better. But if that works for it is OK :-)

I will try it as soon as I already done with this js problem. Thank you for your suggestion