Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Javascript in WordPress

Posted on 2015-02-13
15
Medium Priority
?
109 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 84

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
Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?

 

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

Looking for a new Web Host?

Lunarpages' assortment of hosting products and solutions ensure a perfect fit for anyone looking to get their vision or products to market. Our award winning customer support and 30-day money back guarantee show the pride we take in being the industry's premier MSP.

Question has a verified solution.

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

Who says nothing in life is free? WordPress.com is a freebie. WordPress.org's downloadable publishing platform is free. Heck, even WordPressMU is free. WordPress is an open source project, which means it can be used on any personal or commerc…
I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
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…

688 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