Forums

WordPress › Support » How-To and Troubleshooting

Trying to convert a form using javascript to wordpress (14 posts)

  1. figure2
    Member
    Posted 1 year ago #

    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 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?

  2. stvwlf
    Member
    Posted 1 year ago #

    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/

    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.

  3. figure2
    Member
    Posted 1 year ago #

    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?

  4. stvwlf
    Member
    Posted 1 year ago #

    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.

  5. figure2
    Member
    Posted 1 year ago #

    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;
}
}

  6. stvwlf
    Member
    Posted 1 year ago #

    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.

  7. figure2
    Member
    Posted 1 year ago #

    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.

  8. figure2
    Member
    Posted 1 year ago #

    I have the site up on a test server. The membership page with the non-working javascript is here, compared to the original page in which the very same form and very same javascript don't work.

    Again any help/advice getting the javascript working is much appreciated.

  9. stvwlf
    Member
    Posted 1 year ago #

    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.

  10. figure2
    Member
    Posted 1 year ago #

    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.

  11. stvwlf
    Member
    Posted 1 year ago #

    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.

  12. figure2
    Member
    Posted 1 year ago #

    Sorry about that. I was rushing and wasn't paying attention. I'll take care of it when I get home tonight.

  13. figure2
    Member
    Posted 1 year ago #

    stvwlf,

    Putting the name of the form back in solved the problem. Thanks for your help.

  14. kjblack
    Member
    Posted 12 months ago #

    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 to post large chunks of code, following forum etiquette]

    Any help would be greatly appreciated.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags