• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 117
  • Last Modified:

Javascript in WordPress

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
Richard Korts
Asked:
Richard Korts
  • 7
  • 7
1 Solution
 
Dave BaldwinFixer of ProblemsCommented:
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
 
Richard KortsAuthor Commented:
Dave,

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

See attached.

Thanks
page-backflow-test-required.php
0
 
Jason C. LevineNo oneCommented:
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
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
Richard KortsAuthor Commented:
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
 
Jason C. LevineNo oneCommented:
What does the console say when you use the page?  It may be embedded fine but running into a conflict.
0
 
Richard KortsAuthor Commented:
Jason,

It has a million things, mostly referring to css files; the ones connected to the page itself are attached.
web-console.jpg
0
 
Jason C. LevineNo oneCommented:
Can you filter it down to errors only?  Or give me the current URL and I will do it.
0
 
Richard KortsAuthor Commented:
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
 
Jason C. LevineNo oneCommented:
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
 
Richard KortsAuthor Commented:
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
 
Jason C. LevineNo oneCommented:
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
 
Richard KortsAuthor Commented:
Is the implication you can't use Alert in Javascript in WordPress?

Thanks
0
 
Jason C. LevineNo oneCommented:
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
 
Richard KortsAuthor Commented:
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
 
Jason C. LevineNo oneCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 7
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now