CODEWITHSUNDEEP
javascriptjqueryforms
JWH89
JWH89

Reputation: 53

Auto submit form and retrieve form data using javascript/jquery

I'm looking to create a form that uses radio buttons but as soon as a radio button is clicked it runs a JavaScript function that retrieves data from the form inducing hidden values.

I was thinking it should be something like this but I've had no luck. 

<script type="text/javascript">
    $(function submitFunction(formname) {
        $(".submit").onclick(function(formname) {
               var hiddenValue = document.formname.hidden_value.value;
               var vote = document.formname.vote.value;
               var dataString = 'vote=' + vote + 'hiddenValue=' + hiddenValue;

               alert(dataString);
        });
    });
</script>

<form action="post"  name="form1" >
    <input type=hidden name='hidden_value' value='12345'>
    <input type='radio' name='vote' value='yes' onclick='submitFunction(form1)';>Yes <br/>
    <input type='radio' name='vote' value='no' onclick='submitFunction(form1)';>No
</form>

Edit: After some help from a reply on here I have some new code. It worked perfectly on jsFiddle but no luck when I implemented it myself. I made sure that jQuery is loading properly and it is version 1.51. Here is the code. Thanks in advance again.

JavaScript: 

     if(jQuery){
         alert("jQuery Here");
     }

    $("input.liveRadio1").click(function() {
        var jThis = $(this);

        var hiddenValue = jThis.siblings('input[name="hidden_value"]').val();
        var vote = jThis.val();
        var dataString = 'vote=' + vote + 'hiddenValue=' + hiddenValue;

        alert(dataString);
    });

HTML: 

    <form action="post"  name="form1" >
        <input type=hidden name='hidden_value' value='12345' />
        <input class="liveRadio1" type='radio' name='vote' value='yes' />Yes <br/>
        <input class="liveRadio1" type='radio' name='vote' value='no' />No
    </form>

Upvotes: 1

Views: 2570

Answers (3)

Brock Adams
Brock Adams

Reputation: 93483

Keep it simple; Don't use onclick and you don't need submitFunction for the posted code.
This should work:
See it in action at jsFiddle.

<script type="text/javascript" >
    $("input.liveRadio1").click (function () {
        var jThis       = $(this);
        var hiddenValue = jThis.siblings ('input[name="hidden_value"]').val ();
        var vote        = jThis.val ();
        var dataString  = 'vote=' + vote + 'hiddenValue=' + hiddenValue;

        alert(dataString);
    });
</script>

<form action="post"  name="form1" >
    <input type=hidden name='hidden_value' value='12345'>
    <input class="liveRadio1" type='radio' name='vote' value='yes'>Yes <br/>
    <input class="liveRadio1" type='radio' name='vote' value='no'>No
</form>


Additional answer for the revised question:

The code doesn't work in the standalone file because enough time was not allowed for jQuery, and the DOM, to initialize.

The standard way to do that is to use the ready event. Like so:

<script type="text/javascript">
    function jQueryMain ()
    {
        $("input.liveRadio1").click(function() {
            var jThis       = $(this);
            var hiddenValue = jThis.siblings('input[name="hidden_value"]').val();
            var vote        = jThis.val();
            var dataString  = 'vote= ' + vote + ', hiddenValue= ' + hiddenValue;

            alert(dataString);
        });
    }

    $(document).ready (jQueryMain);
</script>

Upvotes: 2

Kim Tranjan
Kim Tranjan

Reputation: 4541

the problem is the way you create your function, the correct should be

<script type="text/javascript" >
    function submitFunction(formname) {
        $('#' + formname).submit();
    }
</script>

<form action="post" id="form1" >
    <input type=hidden name='hidden_value' value='12345'>
    <input type='radio' name='vote' value='yes' onclick='submitFunction('form1')';>Yes <br/>
    <input type='radio' name='vote' value='no' onclick='submitFunction('form1')';>No
</form>

Upvotes: 0

Loogawa
Loogawa

Reputation: 389

You don't have to pass it form1 in 

onclick='submitFunction(form1)';

because you are accessing it in the submit. Although I think having that submit function in the other function might screw it up because when you click the radio button you haven't pressed submit, so that function in submitFunction will never trigger.

Upvotes: 0

Related Questions