Custom Javascript? « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

I'd like to add some custom javascript to a form. Is it possible? I'm still working on the validation part of the javascript, but here's a live link to what I want to do.
image viewer
All 4 fields will be gravity form fields.

The code is as follows:

<html>
<head>
<title>Image Viewer</title>
<style>
body {color:black;font-family:verdana;font size:12px;}
input { text-transform: uppercase; }

</style>
<script>
function getValues (filename,pos,font) {
	var font = document.img.font.value;
	filename = filename.replace(/^\s+|\s+$/g, '');
	filename = filename.toUpperCase();
	var image = 'monograms/'+font+'/'+filename+pos;
	return image;
}
function changeImageL(filename,font) {
	var filename = getValues(filename,"-L.png",font);
	document.mainimageL.src = filename;
}
function changeImageC(filename,font) {
	var filename = getValues(filename,"-C.png",font);
	document.mainimageC.src = filename;
}
function changeImageR(filename,font) {
	var filename = getValues(filename,"-R.png",font);
	document.mainimageR.src = filename;
}
</script>
</head>
<body>
<h3 align="center">In-line Image Viewer</h3>

<div align="center">
<form name="img">
	<strong>Select a Monogram</strong>
	<select name="font">
		<option value="Circle">Circle Monogram</option>
		<option disabled="disabled" value="Monogram1">Diamond Monogram</option>
		<option disabled="disabled" value="Monogram2">Script 1 Monogram</option>
		<option disabled="disabled" value="Script">Script 2 Monogram</option>
		<option disabled="disabled" value="Serif">Serif Monogram</option>
	</select><br /><br />Use All Capital Letters.<br />Press TAB after typing each letter.<br /><br />First&nbsp;Last&nbsp;Middle<br />
	<input type="text"  name="LL" size="1" maxlength="1" onblur="changeImageL(this.value,font)">&nbsp;
	<input type="text"  name="CL" size="1" maxlength="1" onblur="changeImageC(this.value,font)">&nbsp;
	<input type="text"  name="RL" size="1" maxlength="1" onblur="changeImageR(this.value,font)">
</form>
</div>

<div align="center">
	<img name="mainimageL" src="monograms/Circle/blank.png" border="0">
	<img name="mainimageC" src="monograms/Circle/blankC.png" border="0">
	<img name="mainimageR" src="monograms/Circle/blank.png" border="0">
</div>
</body>
</html>

Is it possible to do this, or am I again pushing Gravity Forms past it's limits?

Thanks,
Alisa

Posted 11 years ago on Thursday July 12, 2012 | Permalink

Chris Hajer
Key Master

You can use the gform_enqueue_scripts filter:

http://www.gravityhelp.com/documentation/page/Gform_enqueue_scripts

Is that your only question, how to add a script to a page with a Gravity Form?

Posted 11 years ago on Thursday July 12, 2012 | Permalink
Dancing Bay
Member

Well, not exactly. Did you look at the example of what I want to accomplish?

Not only do I need to add the javascript. I also need to understand how to add an onblur to the text fields and what all the paramenters for the add_action are.

I'm a little unclear on the parameters of the add_action(va1,val2,val3,val4);

val1: "gform_enque_scripts" telling the add_action this is a custom script???
val2: is this the function name??? My script has 4 at this point and maybe more.
val3: don't know what this is or where the value of 10 comes from
val4: don't know what this is or where the value of 2 comes from

Finally, I just want to know if what I'm wanting to do is possible or not. I cannot continue to waste time on things that are either beyond the scope of Gravity Forms or way outside my skill set. I linked a working example and my code, so please tell me if this is possible.

The actual form I want to add this to is at Can Koozie>. Select a Monogram (any of the first 5 choices except Man's Monogram) choise from the "Select No Text, Monogram, Name, or Text" option. This adds the option to select a monogram font and the three boxes that I want to add the onblur so the customer can see the look of the desired monogram.

Also is there a validation to restrict a field to certain characters, like in my case A-Z only. no numbers or special character? I can convert lower to upper case in my javascript I think.

Thanks,
Alisa

Posted 11 years ago on Thursday July 12, 2012 | Permalink
Dancing Bay
Member

[ Is that your only question, how to add a script to a page with a Gravity Form? ]

Okay yes. How do you add a script to a Gravity Form and how do you add the call for it, like an onblur to an input tag?

I really don't appreciate having my questions dismissed by the administrators when they do not deem them as worthy of their time to answer. Though probably a really stupid question to you guys, it isn't so straight forward for me. I have searched and seached the documentation and cannot find anything other than the one Gform_enqueue_scripts page. That page only tells how to insert the script, not how to call it, nor does it give a to link to further information. I've also done a internet wide google search and cannot find any additional information. There are not a lot of example of how to use Gravity Forms or explainations of how things work together. Explaining how to add a javascript with a Gform_enqueue_scripts is great, but if nothing explains how to call it, then what good is it? If I cannot call it on an onblur or an onkeyup, then just tell me and I'll quit spinning my wheels over this.

Thanks,
Alisa

Posted 11 years ago on Sunday July 15, 2012 | Permalink
Chris Hajer
Key Master
We were not dismissing your question; sorry I made you feel that way.

The functionality you want to add will be accomplished in JavaScript, not Gravity Forms. I provided a link to the hook to allow you to add the JavaScript to the page when the Gravity Form runs. We can't provide support for JavaScript programming but are happy to help show you how Gravity Forms fits in to the functionality. You're not pushing against the limits of Gravity forms, and you are not spinning your wheels. I think the functionality you want to add it possible using JavaScript.

Regarding this question:

add_action(va1,val2,val3,val4);

add_action is a WordPress function which is documented here.

But:
- val1: that is what you are hooking YOUR function to. In this case, val1 is gform_enqueue_scripts (that will ensure your custom code runs when the gform_enqueue_scripts is processed internally by Gravity Forms, and will make sure your script is loaded when and where is needs to be loaded
- val2: this is the NAME of the function you define. It can be called ch_load_koozie_scripts or anything at all really. (there are a few rules governing the name of the function, but keep it lowercase and use underscores and no spaces and you should be fine). The key here is to have this text be identical to the name of the function you use later on
- val3: priority, determining if this will be processed early or late. The default is 10 and there are few instances where you want to change this.
- val4: the number of accepted arguments. Since this is a built in Gravity Forms hook, and the function allows two arguments, you need to leave this as 2.
So, arg3 and arg4 are fixed (10 and 2 respectively.)

arg1 is fixed as gform_enqueue_scripts.

arg2 is the only thing you can change, and it's just the name of your function. And your function really only loads your JavaScript.

All the hard work is going to be in the JavaScript and that's outside the scope of what we can help you with. You can add a lot of cool functionality to Gravity Forms using the built in hooks and filters, but ultimately the code for the customizations will have to be written by you. We can help you load it concurrently with your Gravity Form.

I hope that explanation helps.
Posted 11 years ago on Monday July 16, 2012 | Permalink
Dancing Bay
Member

Thanks Chris... Thanks for your response. I've been really frustrated trying to get what I want accomplished. I know many of the things are "possible" outside of a Wordpress framework. I'm a bit nervous to change too many things for fear of breaking something and not being able to fix it.

I have the javascript working as a standalone example, http://dancingbayembroidery.com/Testing/image_viewer.php, except that I just noticed it no longer likes the tab. Easy enough fix though. I don't know how much time I'll have this week to work on my page, but will report back when I'm successful or with additional questions.

Again, thanks for your help. Sorry about my frustrations coming out in my posts.

Thanks,
Alisa

Posted 11 years ago on Monday July 16, 2012 | Permalink
Chris Hajer
Key Master

Thanks for the update Alisa. Please do post back with success or if you need more help. If you have the JavaScript working, it won't be too difficult to integrate it with your Gravity Forms.

--Chris

Posted 11 years ago on Monday July 16, 2012 | Permalink