Solved

Javascript in WordPress

Posted on 2015-02-13
15
90 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 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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

WordPress has made it easy to create scalable sites based on their powerful CMS, but as great as WordPress is, there are some SEO issues that haven’t been addressed out of the box.  Fortunately these problems can be solved with a few plugins.  The f…
In Part I (http://www.experts-exchange.com/Web_Development/Blogs/WordPress/A_8410-Getting-Started-In-WordPress-Part-I.html), I introduced you to the powerful WordPress backend, the WordPress administrative Dashboard.  In Part II, I will introduce yo…
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…

911 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

21 Experts available now in Live!

Get 1:1 Help Now