Title: Trying to convert a form using javascript to wordpress
Last modified: August 19, 2016

---

# Trying to convert a form using javascript to wordpress

 *  [figure2](https://wordpress.org/support/users/figure2/)
 * (@figure2)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/trying-to-convert-a-form-using-javascript-to-wordpress/)
 * I am in the process of converting a small art gallery’s web site over to wordpress
   so they can take over management. I have run into a roadblock with the membership
   page. [The existing, non-CMS page](http://www.citylightsgallery.org/membership.html)
   uses a paypal form which uses a javascript function to change the donation amount
   in the text input box based on the selected index of the pulldown menu.
 * I have tried:
    - Putting the script tag and form with the function call in a post
    - Putting the script in the header and the form with the function call in the
      template file, outside the loop
    - linking to the script file locally as well as entering the full URL
 * So far none of my attempts has worked.
 * I am also having trouble understanding the instructions for javascript in the
   wordpress codex. For instance, the way the form call the function is through 
   an onchange event from inside the form’s opening select tag:
    `<select name="
   os0" onchange="changeValue()">` The codex says that the function call has to 
   formatted as:
 *     ```
       <script type="text/javascript">
       <!--
       updatepage();
       //--></script>
       ```
   
 * I don’t think that html allows for the embedding a script tag inside another 
   tag, which in this case would be the opening select tag. Can anyone suggest a
   way to solve this?

Viewing 13 replies - 1 through 13 (of 13 total)

 *  [stvwlf](https://wordpress.org/support/users/stvwlf/)
 * (@stvwlf)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/trying-to-convert-a-form-using-javascript-to-wordpress/#post-2024493)
 * Hi
 * I’ve had a lot of success embedding forms and other code the WordPress editor
   eats by placing the code in a custom field and embedding the custom field in 
   the post using a short tag.
 * Here is a plugin to do this:
    [http://wordpress.org/extend/plugins/custom-fields-shortcode/](http://wordpress.org/extend/plugins/custom-fields-shortcode/)
 * Create the custom field on the post or page, pasting the form code in the custom
   field If you call it MyForm you embed it in the post by adding this in the editor
   where you want the form to display (after enabling the plugin)
    `[cf]MyForm[/
   cf]`
 * You can assign a class or ID to the form tag, or wrap it in a Div, so you can
   assign styling to it.
 *  Thread Starter [figure2](https://wordpress.org/support/users/figure2/)
 * (@figure2)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/trying-to-convert-a-form-using-javascript-to-wordpress/#post-2024498)
 * Thanks stvwlf,
 * Actually the form’s functionality is fine. It’s the javascript the form calls
   which isn’t working. Will this plug-in make the javascript work?
 * If so, where does the script tag referencing the .js file go – in the header 
   or in the custom field with the form?
 *  [stvwlf](https://wordpress.org/support/users/stvwlf/)
 * (@stvwlf)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/trying-to-convert-a-form-using-javascript-to-wordpress/#post-2024504)
 * I got this line of code from your current site.
    `<script language="JavaScript"
   type="text/javascript" src="clg_Membership.js">`
 * Have you tried putting it in the `<head>` section of your theme’s header.php 
   file? That is where it would normally go in WordPress. It contains the changeValue()
   function.
 * You will need to change the path. You could put the js file in your theme folder,/
   wp-content/themes/MyThemeName/
 * if your WP install is in the root web folder, the line of code to add to header.
   php would be
    `<script language="JavaScript" type="text/javascript" src="/wp-
   content/themes/MyThemeName/clg_Membership.js">`
 * To be really clear, instead of MyThemeName you are inserting the name of the 
   folder your theme is in.
 *  Thread Starter [figure2](https://wordpress.org/support/users/figure2/)
 * (@figure2)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/trying-to-convert-a-form-using-javascript-to-wordpress/#post-2024634)
 * Thanks stvwlf for that info. Being relatively new to wordpress, I did not know
   the path WP needed to find the file. I will definitely try this and let you know
   if it works. I am assuming that the same path is true to link to images an other
   resources.
 * I apologize I can’t show you the current site in development as it is currently
   being developed locally in MAMP.
 * One other option I was wondering about was jquery. As a non-programmer, my skills
   in jquery are shaky at best. As an example I can show the contents of “clg_Membership.
   js” followed by my unsuccessful attempt to convert it to jquery. If anyone can
   offer a way to fix my code I would appreciate it:
 *     ```
       //Current contents of clg_Membership.js which changes the value of the "amount"
       //text input field in the paypal form based on the selected index of
       //the pulldown menu.
   
       function changeValue(){
       var price=0;
        if (document.clg_memberForm.os0.selectedIndex == 0){
       	price = 10;
        	document.clg_memberForm.amount.value = price.toFixed(2);
        }else if (document.clg_memberForm.os0.selectedIndex == 1){
       	price = 20;
        	document.clg_memberForm.amount.value = price.toFixed(2);
        }else if (document.clg_memberForm.os0.selectedIndex == 2){
       	price = 30;
        	document.clg_memberForm.amount.value = price.toFixed(2);
        }else if (document.clg_memberForm.os0.selectedIndex == 3){
       	price = 35;
        	document.clg_memberForm.amount.value = price.toFixed(2);
        }else if (document.clg_memberForm.os0.selectedIndex == 4){
       	price = 50;
        	document.clg_memberForm.amount.value = price.toFixed(2);
        }else if (document.clg_memberForm.os0.selectedIndex == 5){
       	price = 75;
        	document.clg_memberForm.amount.value = price.toFixed(2);
        }else if (document.clg_memberForm.os0.selectedIndex == 6){
       	price = 100;
        	document.clg_memberForm.amount.value = price.toFixed(2);
        }else if (document.clg_memberForm.os0.selectedIndex == 7){
       	price = 200;
        	document.clg_memberForm.amount.value = price.toFixed(2);
        }else if (document.clg_memberForm.os0.selectedIndex == 8){
       	price = 500;
        	document.clg_memberForm.amount.value = price.toFixed(2);
        }else if (document.clg_memberForm.os0.selectedIndex == 9){
       	price = 60;
        	document.clg_memberForm.amount.value = price.toFixed(2);
        }else if (document.clg_memberForm.os0.selectedIndex == 10){
       	price = 150;
        	document.clg_memberForm.amount.value = price.toFixed(2);
        }else if (document.clg_memberForm.os0.selectedIndex == 11){
       	price = 350;
        	document.clg_memberForm.amount.value = price.toFixed(2);
        }else if (document.clg_memberForm.os0.selectedIndex == 12){
       	price = 750;
        	document.clg_memberForm.amount.value = price.toFixed(2);
        }
       }
       ```
   
 *     ```
       //My unsuccessful attempt to convert this code to jquery
   
       $(document).ready(function() {
       switch ($('#on0 :selected').index()) { //on0 is the id of the pulldown menu
       case $(this).index() == 0:
       $("#amount").val("10.00");
       break;
   
       case $(this).index() == 1:
       $("#amount").val("20.00");
       break;
   
       case $(this).index() == 2:
       $("#amount").val("30.00");
       break;
   
       case $(this).index() == 3:
       $("#amount").val("35.00");
       break;
   
       case $(this).index() == 4:
       $("#amount").val("50.00");
       break;
   
       case $(this).index() == 5:
       $("#amount").val("75.00");
       break;
   
       case $(this).index() == 6:
       $("#amount").val("100.00");
       break;
   
       case $(this).index() == 7:
       $("#amount").val("100.00");
       break;
   
       case $(this).index() == 8:
       $("#amount").val("100.00");
       break;
   
       case $(this).index() == 9:
       $("#amount").val("500.00");
       break;
   
       case $(this).index() == 9:
       $("#amount").val("60.00");
       break;
   
       case $(this).index() == 10:
       $("#amount").val("150.00");
       break;
   
       case $(this).index() == 11:
       $("#amount").val("350.00");
       break;
   
       case $(this).index() == 12:
       $("#amount").val("750.00");
       break;
       }
       }
       ```
   
 *  [stvwlf](https://wordpress.org/support/users/stvwlf/)
 * (@stvwlf)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/trying-to-convert-a-form-using-javascript-to-wordpress/#post-2024649)
 * Hi
 * My suggestion is get it working with the javascript code you already have since
   you know that code works.
 * Then you can try creating a jQuery version.
 * In both examples the code would be cleaner if this line
    `document.clg_memberForm.
   amount.value = price.toFixed(2);` or `$("#amount").val("750.00");`
 * was performed once, at the end of the routine. In the jQuery, store the dollar
   amoun to a variable “price”, just as in the javascript routine. Initialize price
   to zero before the switch.
 * Then, after the switch statement,
 *     ```
       if price > 0
         document.clg_memberForm.amount.value = price.toFixed(2);
       ```
   
 * or
 *     ```
       if price > 0
         $("#amount").val(price);
       ```
   
 * Then there is only line of assignment code rather than one per condition.
 * Still, get it working first with what you already know works. Then you can improve
   it after it works.
 *  Thread Starter [figure2](https://wordpress.org/support/users/figure2/)
 * (@figure2)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/trying-to-convert-a-form-using-javascript-to-wordpress/#post-2024654)
 * stvwlf, unfortunately, even with the updated path the javascript still isn’t 
   working. I may try to put this up on a temporary server to let you and anyone
   else willing to look at it see what is going on.
 *  Thread Starter [figure2](https://wordpress.org/support/users/figure2/)
 * (@figure2)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/trying-to-convert-a-form-using-javascript-to-wordpress/#post-2024684)
 * I have the site up on a test server. The membership page with the non-working
   javascript is [here](http://mhannon-clienttest.markhannondesign.com/?page_id=44),
   compared to the [original page](http://www.citylightsgallery.org/membership.html)
   in which the very same form and very same javascript don’t work.
 * Again any help/advice getting the javascript working is much appreciated.
 *  [stvwlf](https://wordpress.org/support/users/stvwlf/)
 * (@stvwlf)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/trying-to-convert-a-form-using-javascript-to-wordpress/#post-2024711)
 * The first discrepancy I found is, in the HTML form I see this
    `<select name="
   os0" onchange="changeValue()">`
 * In the WordPress version I see this
    `<select name="os0">`
 * I do see the line (HTML version)
    `<input name="clgButton" type="submit" value
   ="Donate" onClick="changeValue();" style="margin-top:6px;">` and (WP version)`
   <input onclick="changeValue();" name="clgButton" type="submit" value="Donate"/
   >` which seem correct.
 * Make that other change and see if it makes a difference.
 *  Thread Starter [figure2](https://wordpress.org/support/users/figure2/)
 * (@figure2)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/trying-to-convert-a-form-using-javascript-to-wordpress/#post-2024729)
 * Sorry for the delay in responding. I am working a lot of hours during the week
   and have a limited window of time to work on the gallery site.
 * I had originally removed the “changeValue()” call when I tried my unsuccessful
   jquery solution. Clearly, I forgot to put them back in later. Thanks for pointing
   that out.
 * Unfortunately, the javascript still isn’t working but at least we eliminated 
   one possible cause.
 *  [stvwlf](https://wordpress.org/support/users/stvwlf/)
 * (@stvwlf)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/trying-to-convert-a-form-using-javascript-to-wordpress/#post-2024731)
 * In the old version, the HTML for the form line is
 *     ```
       <form action="https://www.paypal.com/cgi-bin/webscr" method="post" name="clg_memberForm">
       ```
   
 * I don’t know what you have in your code for the WordPress version of the form
   line, but what is appearing in the browser is
    `<form action="https://www.paypal.
   com/cgi-bin/webscr" method="post">`
 * the javascript requires the `name="clg_memberForm"` as that is how it knows what
   to update. Make sure that is in your WordPress code. If its not there, add it
   back in and update the page.
 * And, after you have updated and before you check the front end again, switch 
   back and forth between the editor’s visual tab and HTML tab a few times, and 
   update again. Then check your code and make sure the name attribute is still 
   there. You are checking to see if the editor is eating any of your code.
 * If the name is still there, check again to see if the javascript is now working.
 *  Thread Starter [figure2](https://wordpress.org/support/users/figure2/)
 * (@figure2)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/trying-to-convert-a-form-using-javascript-to-wordpress/#post-2024734)
 * Sorry about that. I was rushing and wasn’t paying attention. I’ll take care of
   it when I get home tonight.
 *  Thread Starter [figure2](https://wordpress.org/support/users/figure2/)
 * (@figure2)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/trying-to-convert-a-form-using-javascript-to-wordpress/#post-2024738)
 * stvwlf,
 * Putting the name of the form back in solved the problem. Thanks for your help.
 *  [kjblack](https://wordpress.org/support/users/kjblack/)
 * (@kjblack)
 * [15 years ago](https://wordpress.org/support/topic/trying-to-convert-a-form-using-javascript-to-wordpress/#post-2024831)
 * hi…read through your post and thought you could maybe provide me with some guidance.
   I have a similar situation and I am a newbie to all this and am a little lost.
 * I would like to have a form with two dependent dropdown lists that I could insert
   into a page or into a Text widget in the sidebar. I have put together a working
   form with HTML & Javascript but am having no luck at all getting it working within
   WordPress.
 * **This is my working standalone code:**
 * _[please use a [Pastebin](http://pastebin.com/) to post large chunks of code,
   [following forum etiquette](http://codex.wordpress.org/Forum_Welcome#Posting_Code)]_
 * Any help would be greatly appreciated.

Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘Trying to convert a form using javascript to wordpress’ is closed to 
new replies.

## Tags

 * [form](https://wordpress.org/support/topic-tag/form/)
 * [javascript](https://wordpress.org/support/topic-tag/javascript/)
 * [paypal](https://wordpress.org/support/topic-tag/paypal/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 13 replies
 * 3 participants
 * Last reply from: [kjblack](https://wordpress.org/support/users/kjblack/)
 * Last activity: [15 years ago](https://wordpress.org/support/topic/trying-to-convert-a-form-using-javascript-to-wordpress/#post-2024831)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics
