[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

javascript:this.blur() allowing the user to type an amount

Posted on 2007-07-24
11
Medium Priority
?
792 Views
Last Modified: 2013-11-19
I have a form that I'm using with authorize.net that automatically populates based on the user's selection.  There are 3 options which I will show below.  

I want the user to be able to pick from the 3 amounts, but when they select "Just a donation," I want the form field x_amount to be editable.  It is a simple text field in which they can type the amount they'd wish to donate, rather than selecting from a list of options.

My option values are as follows:

<select name="x_starfish" onChange="this.form.x_Amount.value=this.options[this.selectedIndex].value">
             <option value="">Just a donation
                   <option value="15.00">$15 Per Month
             <option value="25.00">$25 Per Month
             <option value="35.00">$35 Per Month
           </select>

On the x_amount field, this is how it looks:

<input name="x_Amount" type="text" onFocus="javascript:this.blur()" size="7" />

I am wondering if the this.blur() function is stopping me from allowing the user to edit that field.  Can anyone help?  Is there another function that I can call which allows the user to type in a manual donation amount if they choose not to select a pre-set amount from my drop down list?
0
Comment
Question by:JWeb Admin
  • 6
  • 4
11 Comments
 
LVL 10

Expert Comment

by:geodan7
ID: 19562078
you'll want to use the "enabled" property. When the user selects the Just a donation option, you'll want to execute a javascript function...which it looks like you're doing already...so once you figure out that it is "just a donation"...then you can use something like "document.form.x_Amount.disabled=false"
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 19562257
You will need to remove the onfocus value.  You can't have javascript blur() when it is focused if you expect to allow an amount to be entered.  If you want to disable the field then Geodan7's comment should help with that but don't forget to remove the onfocus part.

Let me know if you have a question or need more info.

bol
0
 

Author Comment

by:JWeb Admin
ID: 19562295
Ok, if I remove the onFocus value, what do I change that to?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 2000 total points
ID: 19562317
What do you want done when the cursor is put in the field?  If nothing then you remove the event completely.  For example ...

<input name="x_Amount" type="text" size="7" />

You don't have to have it there unless you want to have the browser do something when the cursor is put in the field.

bol
0
 

Author Comment

by:JWeb Admin
ID: 19562330
Right - but I don't want the user to be able to edit the field if they select something from the list - only if they select "Just a donation"

If I take out the onFocus, it allows me to edit the field, even if a $15.00 was placed in the form from a drop down selected value.
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 19562348
Are both elements submitted?

Since "Just a donation" is the default you can't really have the input disabled dependent on that value getting selected.  If you did this would force the user to change the value in the list to another one first and then switch it back to enable the input.  I suggest that you just leave it enabled all the time.  If you don't want to do that then "Just a donation" should not be a default.

Let me know if you have a question about any of this.

bol
0
 

Author Comment

by:JWeb Admin
ID: 19562361
This doesn't work:

<select name="x_starfish" onChange="this.form.x_Amount.value=this.options[this.selectedIndex].value">
             <option value="" onChange="this.form.x_Amount.disabled=false">Just a donation
                   <option value="15.00" onChange="this.form.x_Amount.disabled=true">$15 Per Month
             <option value="25.00" onChange="this.form.x_Amount.disabled=true">$25 Per Month
             <option value="35.00" onChange="this.form.x_Amount.disabled=true">$35 Per Month
           </select>
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 19562384
That isn't the way you use onchange.  The option tag doesn't have an onchange event.

bol
0
 

Author Comment

by:JWeb Admin
ID: 19562394
OK - thanks, I'll leave it how you've suggested.  There isn't a way to disable the field and re-enable it if that one option is checked?  Anyways, thanks for the help.
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 19562424
There is ... but is it worth it?  Do you need both submitted?  If so then it must be disabled for the input to be sent with the form; disabled form elements aren't submitted.  You would also have to address the issue of your "default" choice in the list.  If you want help preventing the input from being used then you need to answer these things for me.  You could use disabled like Geodan7 described, you could hide the input with CSS, or might make it read only.  There will just be issues that will complicate it and need to be addressed.

bol
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 19562437
I'm glad I could help.  Thanks for the grade, the points and the fun question.

bol
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Ready to get certified? Check out some courses that help you prepare for third-party exams.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month19 days, 6 hours left to enroll

834 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