Solved

Javascript in WordPress

Posted on 2015-02-13
15
89 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
  • 7
  • 7
15 Comments
 
LVL 82

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
 

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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

How to install BuddyPress on your self-hosted WordPress site It’s been called everything from “social networking in a box” to “Facebook without the terms of service,” but until Feb. 16, BuddyPress was a relatively unknown outside the WordPress MU…
Do you think that WordPress is just for blogs?  Think again!  WordPress is really a fantastic all around platform that you can use to develop websites on.  Integrated into its basic functionality is the ability to create pages using your choice of a…
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…

744 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now