asked on

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

_agx_

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".

Grover McBroom

ASKER

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?

ASKER CERTIFIED SOLUTION

_agx_

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Grover McBroom

ASKER

Thanks. Looks very helpful. I'll check it out and get back here.

_agx_

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...

Grover McBroom

ASKER

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?).

_agx_

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.

_agx_

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

Grover McBroom

ASKER

Thanks so much. I'll need to experiment...