Solved

Javascript in WordPress

Posted on 2015-02-13
15
94 Views
Last Modified: 2015-02-15
I want to put a VERY simple JavaScript function in a custom WordPress page.

I put it in, then put an onSubmit tag on the Submit element.

It's totally ignored.

See attached.

Where do I put the JavaScript/
page-backflow-test-required.php
0
Comment
Question by:Richard Korts
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 7
15 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40609169
Of course it is.  It goes in the <form> tag, not the submit button.  

<form method="POST" action="http://www.rain1.com/new-site/service-plans-with-backflow-test/" name="st" onSubmit="return on_bft_chg();">
0
 

Author Comment

by:Richard Korts
ID: 40609183
Dave,

Yes, obviously, I was stupid. I changed it, it still ignores the Javascript.

See attached.

Thanks
page-backflow-test-required.php
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40609239
In the waiting rooms again.

Not the best way to get a Javascript function on the page. What does the web console say about script errors (remember, JQuery is also loading via WordPress and may cause some conflicts)?

http://codex.wordpress.org/Using_Javascript

Is required reading.  At a minimum you should follow this code formatting:

<script type="text/javascript">
<!--
codegohere;
//--></script>
0
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 

Author Comment

by:Richard Korts
ID: 40609980
According to http://codex.wordpress.org/Using_Javascript:

To use JavaScript repeatedly within your site, you can either set the call for the JavaScript, or the script itself, in the head of your header.php template file, between the meta tags and the style sheet link, no differently than you would if you were using JavaScript in any HTML page.

So I put Javascript into header.php, see attached.

Then, in the page page-backflow-test-required, I have a form with this:

<form method="POST" action="http://www.rain1.com/new-site/service-plans-with-backflow-test/" name="st" onSubmit="return on_bft_chg();">. Full page attached.

Note the alert in the Javascript.

Why doesn't this work? it is completely ignored.

Thanks
header.php
page-backflow-test-required.php
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40609986
What does the console say when you use the page?  It may be embedded fine but running into a conflict.
0
 

Author Comment

by:Richard Korts
ID: 40609993
Jason,

It has a million things, mostly referring to css files; the ones connected to the page itself are attached.
web-console.jpg
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40609997
Can you filter it down to errors only?  Or give me the current URL and I will do it.
0
 

Author Comment

by:Richard Korts
ID: 40610022
I don't know how to filter it down to errors only; wish I did.

OK, you have to go through a process.

(1) http://rain1.com/new-site/service-agreement/

(2) Select zip code 43020

(3) Select 3 zones; click either radio button.

(4) Next page, Backflow Test Required is where the Javascript is. It's supposed to execute the onSubmit when continue is pressed; select one of the radio buttons first.

The rest is screwed up too (because wp_redirect doesn't work).

Thanks!
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40610032
Okay. I'm hanging out at the hospital again today so access is limited to iPad until I get home and then will go through the above.

For th redirect, I discovered that wp_redirect() won't work either as it just wraps header().  So what I want to do when I get home is take a broader look at the whole process and suggest an alternative.  I think you're going about this the way you would a typical PHP application and a better way probably exists.
0
 

Author Comment

by:Richard Korts
ID: 40610181
Jason,

"I think you're going about this the way you would a typical PHP application"

Exactly.

At least that's what I am TRYING to do.
0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 500 total points
ID: 40610354
Exactly. At least that's what I am TRYING to do.

Can't.  It won't work as expected because things are being loaded and executed way before we get to your in-page customizations.  The challenge with learning WordPress (and, to be fair, any CMS) is that you need to understand what is loading where in the environment before you can effect change.  Otherwise, you're kind of making changes blindly and hoping things will work.

Onto the actual javascript:

<html>
<head>
	<script type="text/javascript">
		function on_bft_chg() {
			if(document.getElementById('bkflo_no').checked)  {
				document.st.action = "one.html";
			} else {
				document.st.action = "two.html";
			}
			
			return true;
		}	
	</script>
</head>
<body>

                   <div class="row">
                        <div id="content_wrap" class="span12">
							<form method="POST" action="" name="st" onSubmit="return on_bft_chg();">
							<input type="hidden" name="basic" value="140.40">
							<input type="hidden" name="recommend" value="189.90">
							<input type="hidden" name="gold" value="194.40">
							<input type="hidden" name="platinum" value="243.90">
							<input type="hidden" name="aeration" value="85.00">
							<input type="hidden" name="zip" value="43020">
                            Will you need us to provide a backflow test as part of your maintenance plan?&nbsp;&nbsp;&nbsp;<input type="radio" id="bkflo_yes" name="bft" value="y">&nbsp;Yes&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="bft" id="bkflo_no" value="n">&nbsp;No<br><br>
							About <b>Backflow testing / certification</b> service:   We provide the annually required backflow inspection to ensure the device is up to code, submit form and results to the  proper government agency.  This service is required by law in some areas.
								<br><br><br>
									<input type="submit" value="Continue">
							</form>
                            
                        </div>
                        
                                                
                    </div>

</body>
</html>

Open in new window


The above should work (obviously change values).  Your alert line at the beginning of the function was throwing an error and killing the script.
0
 

Author Comment

by:Richard Korts
ID: 40610889
Is the implication you can't use Alert in Javascript in WordPress?

Thanks
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40611057
No.  As you can see, I took the form and the javascript completely out of WordPress to isolate and test with dumb old .html.

It was throwing an error there, removing it allowed the form to process as normal.
0
 

Author Closing Comment

by:Richard Korts
ID: 40611078
Thanks, Jason.

Now there are even more issues.

Please look at my question
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_28617373.html

I am starting to get the message that I am "playing with fire" with these custom pages.

The only alternative I think I have is to create a custom template (outside of Wordpress) that has the header, menus & footer & do it all there with custom php / html, most of which I can copy from the custom pages already. I did this partially 3 months ago on another project, but it's SO hard to get the css right so the look is exactly the same, mainly on the menus and the body text.

I can get it close, but.............

I have still another problem, in addition to the Chrome issue discussed in the referenced question, I'll post another question on that.

The Chrome issue is a deal breaker unless I can fix it.

Thanks SO MUCH for all your help.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40611159
That question is a simple CSS issue.  The radios are disappearing because you aren't providing them with a style, so the overall reset takes precedence.  

Just style them and the issue is resolved.
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
dashicon not showing on one website 13 45
AJAX pass along a variable 3 82
e commerce steps shown instead of self testing 2 56
Slow Down an Animation 3 29
Wordpress Horizontal Drop-Down Menu In this tutorial I will show you had to add a WordPress horizontal navigation menu to your theme. I have searched and searched for a good tutorial on creating a WordPress nav menu without adding a plug-in or us…
This article shows the steps required to install WordPress on Azure. Web Apps, Mobile Apps, API Apps, or Functions, in Azure all these run in an App Service plan. WordPress is no exception and requires an App Service Plan and Database to install
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question