Submit Radio and Text Input Form onOnClick

My form includes radio buttons for yes/no but also a text input. I waned to submit the yes/no answer and update the database on the same page independent of the text submission. But I also wanted to to update the current status of the radio button. But my code does not submit the radio button and I get an error.

As you can see I'm validating the form via a JavaScript on the same page so I need to retain that OnSbmit code in the form. The radio buttons work with my cfquery update code at the top of my page but again, I don't see a way to include the current condition of the radio buttons when the SAVE button is clicked.

I can easily combine both the radio buttons and the text  input but I wanted to make the interface cleaner but not having to remind the user to SAVE each time they changed the condition of the radio buttons.


<form name="Form1" id="Main" action="/event/pending/edit/edit-pending.cfm" method="post" onSubmit="return validateForm(this)">
<input type="radio" name="Yes/No" value="1" onclick="this.form.submit();">
<input type="radio" name="Yes/No" value="0" onclick="this.form.submit();">
<textarea name="STORY_BODY">#story_body#</textarea>
<input type="submit" name="SaveButton" value="Save" />
</form>

Open in new window

Grover McBroomAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

_agx_Commented:
EDIT:
But my code does not submit the radio button and I get an error.

First, what is the error? Second, not sure I understand the issue.  A "submit" button and "this.form.submit" do the exact same thing. They submit all  of the fields in the form. So the issue isn't clear.


CFDump the FORM scope at the very top of the page. What values does it contain when the radio button is clicked and how does it differ from the results when the "submit" button is clicked?  Keep in mind, radio button values are ONLY submitted when they are checked.  Perhaps that is part of the issue here...

Also, it sounds like you are trying to submit asynchronously ie without leaving the page.  If that's the case you need to use ajax instead of "this.form.submit".
0
Grover McBroomAuthor Commented:
Sorry for not being clear. The YES/NO variable works fine when using the radio button but its variable (yes/no) is not defined when using the SAVE button. That's the problem. I want to use the radio button for quick update to the database but also include it (YES/NO variable)  when SAVED is clicked. That's what I can't seem to figure out and maintain the validateForm check.

Not at all sure what you mean by "using ajax instead of "this.form.submit".   Would you or someone give me an example?
0
_agx_Commented:
The YES/NO variable works fine when using the radio button but its variable (yes/no) is not defined when using the SAVE button.

Well the "save" button and the onClick function both do the exact same thing- submit the form. So if it works using one method, it will work for the other too.  

That said ... radio buttons and checkboxes are special types of fields. They're only submitted IF they are checked.  Since your form doesn't preserve the state of the form fields, the radio buttons will return to the default (ie nothing checked) once the form is submitted. If you want to preserve the state, you need to do that via code.  

First, set a default at the top of the page so it will always exist.  Note, "Yes/No" isn't a valid variable name, so I changed it to "YesNo" instead.  (Though I'd recommend something more descriptive)

            <!--- "-1" means nothing was checked --->
            <cfparam name="FORM.YesNo" default="-1">

Now use it in your form code to preselect whatever button was last checked.

<input type="radio" name="YesNo" value="1"
                onclick="this.form.submit();"
               <!--- check this button if the previous selection was "1" --->
               <cfif FORM.YesNo eq 1>checked</cfif>>

<input type="radio" name="YesNo" value="0"
                onclick="this.form.submit();"
               <!--- check this button if the previous selection was "0" --->
               <cfif FORM.YesNo eq 0>checked</cfif>>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Grover McBroomAuthor Commented:
Thanks. Looks very helpful. I'll check it out and get back here.
0
_agx_Commented:
Not at all sure what you mean by "using ajax instead of "this.form.submit".  

BTW, what I meant was that "this.form.submit" submits the whole form to the server. Meaning the whole page reloads. That's why the button selection disappears.  With ajax, it is possible to submit data the server without ever leaving the page. Its done using ajax (or javascript).  Basically, the JS submits a request to the CF server in the background. Data is sent, but the user stays on the same page.  It's a little more complicated than a basic form submit, but using a tool like jQuery helps simplify things.

I'd be happy to post an example, but ... after re-reading the original question, I don't think that's what you were asking. Let me know how the other example  works out and we'll take it from there...
0
Grover McBroomAuthor Commented:
Seems your solution is what I was looking for so this really helps and thanks!

Yes, I'd really be interested in seeing a JavaScript solution example for my example page (ajax?).
0
_agx_Commented:
Sure. I'm heading out, but will post a working example tomorrow.

Edit:

Just a reminder, the radio button will now have one of 3 values:

-1 : nothing selected
0  : No
1 : Yes

Not sure if that makes a difference in your app, so modify your code accordingly.
0
_agx_Commented:
Here's a simple example of how you might do it using ajax.  There are 2 parts: the form and a CFC.  I used more descriptive names in the example to (hopefully) make it clearer what's going on

Form
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$( document ).ready(function() {
    $("input[name='isActive']").change(function(){
                var selValue = $("input[name='isActive']:checked").val();
                $.ajax({
                        method: "POST",
                        url: "/Path/To/YourComponent.cfc?method=saveActiveStatus&returnformat=JSON",
                        dataType: "json",
                        data: { isActive: selValue}
                }).done(function( msg ) {
                // do something here on success
                alert( "Data Saved: " + msg.SUCCESS );
                }).fail(function( jqXHR, status, error) {
                       // do something here on error
                        alert( "Request failed: " + status +"\nError: "+ error );
                });    
    });
});
</script>
<form>
    <label for="ActiveYes">Yes</label>
    <input type="radio" name="isActive" value="1" id="ActiveYes">
    <label for="ActiveNo">No</label>
    <input type="radio" name="isActive" value="0" id="ActiveNo">
    ... other form fields here ....

</form>  

Open in new window


/Path/To/YourComponent.cfc
<cfcomponent>
 
        <cffunction name="saveActiveStatus" access="remote" returnType="struct">
                <cfargument name="isActive" type="string" default="0" />
       
                <!--- localize function variables --->
                <cfset var result = { success=true, error="" } />
       
                <cftry>
                                <!--- for demo purposes only - write to log file --->
                                <!--- do whatever you want with arguments here --->
                                <cffile action="append"
                                        file="c:/path/to/AjaxTest.log"
                                        output="Invoked at #now()# [isActive=#arguments.isActive#] "/>
                        <cfcatch>
                                <!--- returning actual error message for demo purposes only --->
                                <cfset result = { success=false, error=cfcatch.message } />
                        </cfcatch>
                </cftry>
       
                <cfreturn result />
        </cffunction>
</cfcomponent>

Open in new window

0
Grover McBroomAuthor Commented:
Thanks so much. I'll need to experiment...
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

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.