Link to home
Start Free TrialLog in
Avatar of mapper
mapper

asked on

RadioButton to trigger onSubmit Event...

I have a form I am developing and the a RadioButton within the form (if people are too confused to figure out the form requirements - can use to send off what they have to the person who devised the form for help) that needs to trigger the onSubmit and process what fields have been filled out and send it to the owner of the form...  

<input type="radio" name="frmsecurity" value="False1">

I need this RadioButton to trigger the onSubmit event when the person filling out the form selects it...  How would that be done?

Thanks,

Mapper...

Here you go mplungjan -- time to make up those points I gave to KEK last week...

:-)
Avatar of punker
punker

<input type="radio" name="frmsecurity" value="False1" onClick="submit(this)">

Radio buttons, checkboxes, and buttons respond to onClick. Others respond to onSelect.
To be precise, it's form.submit(this), where form is the name of the form you've created. Technically, it works without it, though.
Avatar of mapper

ASKER

Punker,

Thanks for your quick response -- the event needs to be tied to onBlur or onChange or some other similiar event -- The user will not know to scroll down to the bottom of the massive form -- just that when they check the RadioButton -- the onSubmit needs to trigger -- that's what was causing me trouble figuring out how to tie that together...

Thanks,

mapper
mapper:

Radio buttons also support the onBlur event handler.  You could write an event handler for the onBlur of the radio button which checks it's value and submits the form if the value is "on".

<input type=radio name=myRad onBlur="x(this)">

function x(but) {
  if document.myform.myRad.value == "on" {document.myform.submit()}
}

Tom
Oops!

Probably should be:

if (document.myform.myRad.value == "on")

Tom
Avatar of mapper

ASKER

TTom,

I have added the following to the header:

<SCRIPT language='javascript'>

<!--

        function x(but) {
        if (document.myform.frmsecurity.value == "on")
      {document.myform.submit()}
      }

//-->

</script>

And modified the input for the RadioButton to:

<input type=radio name="frmsecurity" onBlur="x(this)" value="on">

And it's not working when the radiobutton is clicked...

Any suggestions?

Thanks,

mapper
Actually, the code I used was:

function x() {
  if (document.myform.myRad.value == "on") {document.myform.submit()
}

<input type=radio name=myRad onBlur="x()">

I do know that there is no need for the value to be specified in the <input> tag.  Radio buttons default to a value of "on" when they are selected.

Here's the whole code for my page (which seems to work):

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
function x() {
  if (document.myform.myRad.value == "on") {
     document.myform.submit()
  }
}
// -->
</SCRIPT>
</head>
<BODY>
<form name=myform method=post action="mailto:tt@here.com">
<input type=radio name=myRad onBlur="x()"> Click here if you are confused.
</form>
</body>
</html>
Right, I'm clicking now, because I'm confused. Basically, what this function does is check to see if the radio button is selected, and if so, submits the form. The function runs when the user selects the radio button.

That's exactly what onClick="submit(this)" would do... less code, too. Am I being brilliant, or just plain challenged?
Avatar of mapper

ASKER

Punker,

Would that onClick be tied specifically to that RadioButton?

If so, then that's a horse of a different color!  This is the first question of many I feel... The lady who is having me develop this wants form validation -- I am trying to tell her to make it easy it's best to do the validation when the onSubmit is triggered (Hence, my apprehension about the onClick submission -- would that fire off the form validation for fields that are further down in the form?) this form is going to be a JavaScript nightmare I have a feeling -- That's why I am approaching this from a piece meal fashion attacking one item at a time and then posting the next question...

Have I confused you enough?? :-)

A brief synopsis:  There are about 7 or 8 form fields user name and email address - yada, yada...  Then if the user is confused at this point the RadioButton gives them a chance to submit the form and solicit help from the lady who is developing it...  So, when the user clicks the radiobutton -- it fires off the form...

Thanks,

Mapper
>>Would that onClick be tied specifically to that RadioButton?

Yep!
<input type="radio" name="frmsecurity" value="False1" onClick="submit(this)">

Would sumbit the entire form if the radio button were clicked (checked), which is (I think) exactly what TTom's code does, but it looks a bit fancier.

If you've got to do validation upon submission, AND you only want to include certain fields if this radio button is selected, you're better off making a function like TTom suggested and calling it from the radio button. However, you'll have to write some validation code and specifically say what is to be sent with the form submission under specific conditions.

Unfortunately, there's no magic button that says, do this, this, and while you're at it, this! That's not to say code can't be written, borrowed, or poached to make it happen.

If you are getting bad vibes from the idea of coding this (aka: javascript nightmare), I'd suggest sitting down with a pen and paper and flow-charting everything, outlining it, etc. In my experience, tackling a coding issue with the entire "big picture" in mind is a lot easier than starting with a tiny piece and re-writing (and re-writing, and re...) to fit a bigger scope.

That's just my opinion!
Avatar of mapper

ASKER

punker,

It's not as bad as I am making it out -- I'm more concerned with the development process that will result in having to work with this particular person.  I had to develop similar forms for her previously and her concept of HTML and JS is limited to the inner shell of a Hydrogen atom... I exaggerate to clarify...

She wants all this functionality that script will provide, but I am a dabbler in the art, I know enough to tinker with existing code but I am not good and sitting down to develop my own...

She wants popup windows for help information (cool already been there and done that!)

Also, the form validation -- (I can reuse that from the other forms too!)

I am just concerned what adding this new feature of providing an option to click out after just answering a few simple questions about who you are...  This form she guarantees me is much simpler than anything else she has asked me to do from a user standpoint/point of view... sheesh, I think the bong water needs changing or something...

I would like the RadioButton and the submit buttons/function to be separate (because of the form validation issues...).  However, I may have to dink around with this and get it to a point and tell her -- this is the best as it's gonna get...

Thanks,

mapper
Avatar of mapper

ASKER

TTom,

No luck, I changed the code to reflect the name of my form and RadioButton and then gave it a whirl and no joy...

Here is what I have done again:

<SCRIPT LANGUAGE="JavaScript">

 
       <!--
          function x() {
            if (document.appinfo.frmsecurity.value == "on") {
               document.appinfo.submit()
               }
          }
       // -->

</SCRIPT>

<input type=radio name="frmsecurity" onBlur="x()">
              <font size="2" color="#FF00FF"><br>
(<i>Submit</i> request)</font>

Can't see what changing the name of the field and the name of the form would do...

Thanks,

mapper
mapper:

I think punker is right about a lot of this.  Certainly, onClick works as well or better than onBlur.

When I first looked at what was going on, I thought that, perhaps, a checkbox with something like:

"Please check this box if you are confused" with a submit onclick function if the box was checked.

The way I put it together, if you click on the radio button, the form will be submitted as soon as you click off it.  Since there is only one option, there is no way to "turn off" the radio button once you have selected it.

That may be what you want to do, but it certainly leaves no option to change your mind, and it really doesn't let the user know what's going on.  A confused user might get more confused.

I don't know.

In any case, anything I can do to help, let me know.

Tom
Avatar of mapper

ASKER

Tom,

I think you have it right -- the user clicks the RadioButton and the form information collected to that point is e-mailed to the lady.  She in turn calls the person (phone number is part of the collected form input) and then she answers their questions and they go back to the web site and fill out the form now that they are full of confidence...

The lady wants the events of fill out first part of form (Who you are) and then if you are confused -- you click the RadioButton and whoosh your data is mailed off...  The form will tie into an ASP script that throws up a "your form has been processed" disclaimer to let the sheep know that the farmer is coming to take care of them...

So, if you can help to figure out why your code -- with the minor alterations to my field name and form name is not working...

That why when I demonstrate it to her -- maybe, she'll draw the same conclussions you and punker have!!  Man, I must be dreaming or something...

That's the only way (I have learned this from experience) that she'll captiulate and take out the extra layers of JavaScripting to provide an idiot proof form -- in the words of George Bush "Not gonna do it, wouldn't be prudent!"  You can not provide an idiot proof form - too many variables to cover in one place...

Thanks,

mapper
Avatar of Michel Plungjan
Sorry I took yesterday evening off - and look what huge discussion ensue ;-)

I have read these comments over and over and I cannot see what is wrong with punker's initial suggestion except for the order of the keywords.
this.form.submit() is a must in Netscape and that any onSubmit form validation will not be triggered in Netscape on a javascript trieggered submit.

So may I try to capitulate here...

Punker's code:
<input type="radio" name="frmsecurity" value="False1"
onClick="submit(this)">
should be
<input type="radio" name="frmsecurity" value="False1"
onClick="this.form.submit()">

If the form has an onSubmit, that needs to be executed, use one of these constructs assuming the validation function is called validate and takes the form as parameter:

<FORM ACTION="........">
....
....
<input type="radio" name="frmsecurity" value="False1"
onClick="if (validate(this.form)) this.form.submit()">
...
...
...
<input type="button" name="subbut" value="Submit"
onClick="if (validate(this.form)) this.form.submit()">
</FORM>


if you wish to bypass the validation, use this for the radio
<input type="radio" name="frmsecurity" value="False1"
onClick="this.form.submit()">

or perhaps better:

<input type="radio" name="frmsecurity" value="False1"
onClick="
if (this.form.email.value = '') {
   alert('at least fill out the email address or I cannot help you');
   this.form.email.focus();
}
else this.form.submit()">

Any help?

Michel
Opps
if (this.form.email.value = '') {
should be
f (this.form.email.value == '') {

and please note that the '' are two single quotes
And my cut and paste is no good :(
      if (this.form.email.value == '') {

Michel
mapper:

Not sure why code I supplied wouldn't work.  I get email every time I click on it (although I do get a confirmation that my information is being sent via email).

That having been said, I think perhaps punker and Michel have provided additional options which will work (perhaps even better than what I suggested).

Will keep listening.

Tom
Avatar of mapper

ASKER

mplungjan,

Your code worked -- I am gnawing at my bottom lip as I type this...  This form is BIG and the end results have the data harvested by an ASP script that sends all the form data in a nicely packaged format to the person that the user selects.  The form has various entries that ARE required and require form validation script to ensure valid entries...  I have used two types previously; one to check the textfields and the other to validate the drop down menu/lists...  They were both triggered off of the onSubmit -- the form fields validated and then ASP triggers and processes the form...

I can see some trouble with what the FORM LADY wants me to do... I your learned opinion -- Would it be possible to validate each form field as the user steps through the form by using onBlur or onClick to ensure that the required fields are filed out -- instead of tying all of the validation code to the onSubmit?  That way what the FORM LADY wants to do will work...  Otherwise, the user will have to fill out ALL validated form fields or the onSubmit will never return a true value to step out of the validation process...  Would this be true??

If the validation can be tied into the input function like you did with the RadioButton, then I don't have a problem, if they can't, then I will have to have a chat with the FORM LADY and tell to stop hitting the bong so hard!

Please advise...

Thanks,

Mapper
Yes, that would be possible, however I would stick to the script and tell formlady that EITHER you validate the form on submit (on click of button) and allow a non-validated please help me fill this out form submission OR you validate per field in which case the user might not even get to the email field because he/she gets an alert each time he/she leaves the first invalid field...

Michel
PS: I am not the only person with qualified input here ;-)

Michel
Avatar of mapper

ASKER

Michel,

My thoughts too!  I e-mailed her and explained it might be best to keep the validation the way it was, and use a popup window with the RadioButton.  That way you can have a smaller version of the BIG DADDY form (I'll call it "miniform") and have the user fill out the minimum daily required info and then submit it and no harm -- no foul...

That way I can remake -- remodel my old validation script and all are happy...

Hum, I will have to ensure formlady can see the logic in not trying to over complicate "her simpler form" ...

Thanks,

Mapper

Quandry time...  To whom should I give the points...  I believe TTom provided the first correct answer...  However, yours was a better option...  If you like I can submit two 25 point questions and half the bounty between you??

Let me know and I will comply...

Punker and TTom should share if any

I like the popup idea - for example:

<INPUT TYPE="radio" onClick="if (this.form.email.value != '') window.open('miniform.html?' + this.form.email.value); else alert('Please at least try to fill in your email, DUH!')">

and in miniform have
<BODY onLoad="if (window.location.search) document.miniform.email.value=window.location.search.substring(1)">

(ie will ignore search from harddisk so upload to test)
Michel
Avatar of mapper

ASKER

Michel,

Once again you prove to be honest and fair...  I will allow TTom and Punker to decide...  

Hey fellas, how do you want to go about figuring out who gets the payolla??  I can post two new questions worth 25pts or let one of you have the whole chalupa?  Either way is Daijo with me...

I think I may even have the Formlady convinced that this is the best way to go...

Thanks dudes you never cease to amaze me...

Mapper
Let punker go for it.  His code was actually correct.  I just expanded on it a bit and kept the discussion going.

Tom
Avatar of mapper

ASKER

TTom,

You and Michel are pretty decent (and not uprepresentative of the people I have encountered here...) dudes...

Okay Punker, form your comment into a question and you got it...

Thanks fellas,

Mapper
ASKER CERTIFIED SOLUTION
Avatar of punker
punker

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of mapper

ASKER

Punker,

Thanks for hanging in there...

Michel and TTom -- thank you too!

Mapper