Submit Value From Radio Button To Form Within A Function

Question

Have main php page called tipComp.php that has script as follows to submit a value selected on a radio buttom from a form.

<script>
   $('input[type=radio]').on('change', function() {
        $(this).closest("form").submit();
    });
    
   // Go back to game picked tip on
   $(function () {
    var pathName = document.location.pathname;
    window.onbeforeunload = function () {
        var scrollPosition = $(document).scrollTop();
        sessionStorage.setItem("scrollPosition_" + pathName, scrollPosition.toString());
    }
    if (sessionStorage["scrollPosition_" + pathName]) {
        $(document).scrollTop(sessionStorage.getItem("scrollPosition_" + pathName));
    }
   });
</script>

The form is called via two functions that display a range of values as per the form below:

   <div class='schedRangeContainer'>
      <form action='./includes/addPick.php' method='post' class='pickForm' name='tipPicks'>
         <ul id='pickRange'>
            <li class='schedPickRange'>1<center><input class='schedRadioBtn' type='radio' name='score' value=1></center></label></span>
            <li class='schedPickRange'>2<center><input class='schedRadioBtn' type='radio' name='score' value=2></center></label>   
            <li class='schedPickRange'>3<center><input class='schedRadioBtn' type='radio' name='score' value=3></center></label>   
         </ul>
      </form>
   </div>

The form displays fine as do all of the radio buttons. On clicking the radio button it should add the selected value to the database via the addPick.php code however it is not submitting the form and running the php file.

The page does have two other scripts that run from the navbar.php file using the following eventlistener code and run okay:

   window.addEventListener("scroll", stickyFunction);
   window.addEventListener("scroll", scrollFunction);

I've tried running the code with this script disabled but does not make a difference.

It is the only form on the page and had been working previously but unfortunately I seem to have fixed it until it doesn't work! Any assistance that can be provided I will be most grateful.

SO show us the PHP script. Does the data get to the php? Did you try anything to debug this yet?? — RiggsFolly, Oct 11 '22 at 07:34
Unrelated fyi: `` is deprecated and its use is no longer recommended. Remove your ``s and the `` — brombeer, Oct 11 '22 at 07:35
Does this answer your question https://stackoverflow.com/questions/8622336/jquery-get-value-of-selected-radio-button? — Grumpy, Oct 11 '22 at 07:35
@RiggsFolly, ta for replying. It doesn't get to the php script so at this stage it's irrelevant as it doesn't fire the form. I've checked console and logs, get no errors it just does nothing. As stated have tried disabling all other JQuery functions. — Wignu, Oct 11 '22 at 07:39
Ta @brombeer, once I get the form to submit I'll fix those :) — Wignu, Oct 11 '22 at 07:40
There might be no input elements when the script runs. Try placing it in a `$( document ).ready(function() { ... }` — brombeer, Oct 11 '22 at 07:42
@Grumpy no none of those worked tried the first couple of answers but they don't fire the form, just give the value of the button selected. — Wignu, Oct 11 '22 at 07:53

score 0 · Answer 1 · answered Oct 11 '22 at 08:17

Thanks @brombeer for steering me towards the correct answer, I've fixed the error.

Here is the code in total, I added an eventlistener for the change and wrapped the form submission in a function.

<script.
window.addEventListener("change", addTipPick);

    function addTipPick() {
        $('input[type=radio]').on('change', function() {
                $(this).closest("form").submit();
            });
    }
        
        // Go back to game picked tip on
        $(function () {
            var pathName = document.location.pathname;
            window.onbeforeunload = function () {
                var scrollPosition = $(document).scrollTop();
                sessionStorage.setItem("scrollPosition_" + pathName, scrollPosition.toString());
            }
            if (sessionStorage["scrollPosition_" + pathName]) {
                $(document).scrollTop(sessionStorage.getItem("scrollPosition_" + pathName));
            }
        });
</script>

And she is all working nicely again ... must remember to back files up :|

Submit Value From Radio Button To Form Within A Function

1 Answers1