[Solved]Trying to add Java Script[/Solved]

[ABU]

Hello. I'm trying to figure out how to add java to a form i've built through the form builder module

Here's what i've done.

I added the following code to the Page Specific Metadata:

Code: Select all

<__script__ type="text/javascript" src="contactus.js"></__script> 
{literal}
function validate_form(form) {
   var color = "#fff";
   var high_color = "#ffb";
   var error = false;
   var error_message = 'Please fill in required fields';
   var required = new Array("name","email","phone");
   
   for (i=0;i<required.length;i++) {
      if (form[required[i]].value == "") {
         error = true;
         form[required[i]].style.background = high_color;
      }
      else{
         form[required[i]].style.background = color;
      }
      if (required[i]=='email') {
         var email = form.email.value;
         if ( !email.match(/^[a-z0-9_\-\.]+@[a-z0-9_\-\.]+$/i) ){
            error = 1;
            form.email.style.background = high_color;
            form.email.value = '';
         }      
      }
   }
   if (error) {
      alert(error_message);
      return false;
   }
   else {
      return true;   
   }
}

var counter = 1;
function add_file(){
   if (counter<5) {
      counter++;
      var newFields = document.getElementById('read_root').cloneNode(true);
      newFields.id = '';
      newFields.style.display = 'block';
      var newField = newFields.childNodes;
      for (var i=0;i<newField.length;i++) {
         var theName = newField[i].name
         if (theName) {
            newField[i].name = theName + counter;
         }
      }
      var insertHere = document.getElementById('write_root');
      insertHere.parentNode.insertBefore(newFields,insertHere);
   }
}
{/literal}

Within the form builder module. I've added an upload field. Within the upload fields advanced setting I added the following script within the Javascript for field section:

Code: Select all

<input onclick="javascript:add_file();" value="+" type="button">

The form displays correctly, but the java script doesnt work. I'm positive i'm doing something incorrect. Any help would be much appreciated.

Thanks in advance.

[tyman00]

Try this. You still need to include the HTML call for Javascript when you use the  {literal} tags. The {literal} tags are there so Smarty doesn't parse any of the enclosed text by accident.

Code: Select all

<__script__ type="text/javascript" src="contactus.js"></__script> 
{literal}
<__script__ type="text/javascript">
<!--
function validate_form(form) {
   var color = "#fff";
   var high_color = "#ffb";
   var error = false;
   var error_message = 'Please fill in required fields';
   var required = new Array("name","email","phone");
   
   for (i=0;i<required.length;i++) {
      if (form[required[i]].value == "") {
         error = true;
         form[required[i]].style.background = high_color;
      }
      else{
         form[required[i]].style.background = color;
      }
      if (required[i]=='email') {
         var email = form.email.value;
         if ( !email.match(/^[a-z0-9_\-\.]+@[a-z0-9_\-\.]+$/i) ){
            error = 1;
            form.email.style.background = high_color;
            form.email.value = '';
         }      
      }
   }
   if (error) {
      alert(error_message);
      return false;
   }
   else {
      return true;   
   }
}

var counter = 1;
function add_file(){
   if (counter<5) {
      counter++;
      var newFields = document.getElementById('read_root').cloneNode(true);
      newFields.id = '';
      newFields.style.display = 'block';
      var newField = newFields.childNodes;
      for (var i=0;i<newField.length;i++) {
         var theName = newField[i].name
         if (theName) {
            newField[i].name = theName + counter;
         }
      }
      var insertHere = document.getElementById('write_root');
      insertHere.parentNode.insertBefore(newFields,insertHere);
   }
}
-->
</__script>
{/literal}

[ABU]

Thanks for the reply. I'm following your logic, but a little confused on a few things.

I've added the HTML call as you suggested, which makes sense.

Code: Select all

<__script__ type="text/javascript">

I'm a little confused on why the code has the comment out marks

Code: Select all

<!--  -->

So I took them out.

So I added your updated code to the Page Specific Metadata. Still didnt work. I'm getting closer though. I think the issue is either the page is not reading the contactus.js file (which is in my root directory) or my java script within the uploads field is incorrect.

Code: Select all

<input onclick="javascript:add_file();" value="+" type="button">

Also, when I view the page, at the end of the uploads field, there is a

Code: Select all

/>

displayed. So If I go back to the java code within the uploads field above and take away the so it looks like this

Code: Select all

input onclick="javascript:add_file();" value="+" type="button"

. It takes away the preceding />, but also the the "+" to add additional files. (hope that wasnt too confusing)

[tyman00]

The is an old habit. The purpose is to hide the Javascript from older browsers that don't support it or even know what it is. Not really needed anymore, since very few still use IE 3 for example.

Beyond that I am not much help since I really don't know where your script came from. You can test to see if your Javascript function add_file() is actually being called by adding the following line just below: function add_file(){

Code: Select all

alert('add_file Function entered');

Then when you click the button it should pop-up the message. If it doesn't that means your javascript isn't being loaded properly.  Beyond that you may need to consult with the Javascript Author. You can also try to create a "dummy" form out of HTML in a standard page without using FormBuilder just to make sure there aren't conflicts with the module.

[ABU]

tyman00:

Thanks for your suggestions. I got it to work, by creating a form with out using the form builder. I'll work on getting it to work within the form builder next. I am however running into a problem with WYSIWYG adding or removing code.

Here's what I did to get the java script working correctly.

I added the following code to my template

Code: Select all

{literal}
<__script__ language="JavaScript" type="text/javascript" >
var counter = 1;
function add_file(){
   if (counter<5) {
      counter++;
      var newFields = document.getElementById('read_root').cloneNode(true);
      newFields.id = '';
      newFields.style.display = 'block';
      var newField = newFields.childNodes;
      for (var i=0;i<newField.length;i++) {
         var theName = newField[i].name
         if (theName) {
            newField[i].name = theName + counter;
         }
      }
      var insertHere = document.getElementById('write_root');
      insertHere.parentNode.insertBefore(newFields,insertHere);
   }
}
</__script>
{/literal}

Within my page content I added the code to the form. I figured out I needed to turn off WYSIWYG to get the code working fine, because with WYSIWYG checked, it removes the javascript code.

So for example, with the turned off, the form works correctly and has the following code

Code: Select all

<form method="post" action="send.php" enctype="multipart/form-data" onSubmit="javascript: return validate_form(this);">

With the WYSIWYG  turned on it takes away the onSubmit="javascript: return validate_form(this); code above and as a result the code reads like this

Code: Select all

<form action="send.php" enctype="multipart/form-data" method="post">

It appears that every time I try and edit the page, the WYSIWYG  is automatically checked "on" and it automatically removes the bolded java. So i have to paste in the working code and turn off the  each time i edit the page.

Is there a way to keep the WYSIWYG  turned off on particular pages or templates so it doesnt automatically remove the java?

[tyman00]

Good deal!

You have a couple of options. You can turn off the WYSIWYG entirely under User Preferences.

If you want the WYSIWYG on, you can create a Global Content Block with just your form in it and then call that form into your page.

[duclet]

You can also install my DL Suite: EditArea module to edit the syntax with EditArea.

[ABU]

Wahooo! Global Content Blocks did the trick. You are the man. I'll change this to solved- although probably start another when when I decide to tackle getting the form builder to work with the script. Thanks again for you help.

[tyman00]

No Problem. Good luck!

[dmaireroa]

Thanks heaps for solving this, it saved me days I reckon  ;D.

I was wondering why Google Analytic didn't work on my CMSMS, and this has been 6 months too  >:(.
Oh well, at least it's working now  ;)

CHEERS