How to use JS to hold a variable from a PHP form before submit

Question

I'm quite new to PHP so apologies for not being fully aware of code structures.

In a PHP file I have a form with the options in a drop-down menu being populated from a database query (how many rounds for a tournament based on the number of entrants). Once a user has selected an option for the round of fixtures they want to view that option gets passed as a variable to determine what to display on form submit. On form submit the rest of the page changes to display the fixtures from the database that relate to the Round that the user selected from the drop-down.

My challenge is that after selecting the Round number from the drop-down menu I have to click the submit button twice - once to assign the variable and then the second press of submit to be able to use the variable as part of the process to display the fixture information from the database.

I'm aware that it is possible to use JS to store a variable that can then be used on form submit but I'm not sure how to integrate it with the way the form / has been written.

After looking at a few places on the web (like W3Schools) I've got some basic JS and have tried that but I think there's still a disconnect between the user selecting and storing the variable ready to be used when the submit is clicked.

//Basic JS
<script>
function getFormIndex() {
  document.getElementById($_POST['roundselect']).innerHTML =
  document.getElementById("roundselect").selectedIndex;
}
</script>

//PHP Elements

if(isset($_POST['submit'])){

$roundnum = $_POST['roundselect']; }

<?php
function setround(){

    $roundnum = $_POST['roundselect'];
    echo $roundnum;        
    }
?>  

//Form

<div class="h2_select">
                <?  if($fnum) { 
                    $select_opt = (isset($_GET['round'])) ? $_GET['round'] : 1;                 
                ?>
                    <form method="post" action="/tournaments/<?=$lid; ?>/fixtures/<?= $roundnum; ?>" name="rf">
                        <!--<input type="hidden" name="id" value="/<?=$lid; ?>" />
                        <input type="hidden" name="page" value="/fixtures" /> -->


                            <span class="minput">Select Round
                            <select size=1 class="mselect"  name="roundselect" onChange=getFormIndex();>
                                <? for($i=1; $i <= $total_rounds; $i++) { ?>
                                    <option value="<?= $i ?>" <?php if($i == $select_opt){ echo 'selected'; } ?> > <?= $i?> </option>
                                <? }
                                ?>
                            </select>&nbsp;
                            <input type="submit" name="submit" value="<?= $lang[185] ?>" class="minput"/>
                    </form>              
                <? } ?>
            </div>

To confirm, the form works and displays the correct information. The problem is that I currently need to click "submit" twice.

Thanks

Thanks @Teemu - I appreciate the info! I'll make sure to get all those things updated elsewhere in the code. — pwride, May 11 '20 at 10:39
@Teemu While there are reasons not to use short open tags, they're not deprecated. There was a proposal to deprecate them, which was initially accepted, but then serious problems with the approach were pointed out, and the result was reversed. (I won't link the discussions, because they got tied up in a whole bunch of politics and personal differences, but that's the key outcomes as I understand them.) — IMSoP, May 11 '20 at 10:53
@IMSoP OK, thanks for the information. It seems that this has been also updated to the manual. — Teemu, May 11 '20 at 11:14

score 0 · Answer 1 · answered May 11 '20 at 12:13

Good start, I would do it with a bit of AJAX that allows us to send a request and receive an answer "in the background" - so that first time user changes the select I would fetch data from backend in the background and display it without double-submitting needed.

Please check this thread - I think it is illustrating the same thing;

How to Submit Form on Select Change

It is based on JQuery and I think it is a good start for new developers.

But - if you do not want to use a framework and does not care for older browsers you can just use "vanilla" Javascript with Fetch (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) and onchange https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

Fetch returns the result so then you have to pass it back to the website.

It is very easy to do so with : 1. set a div on your page and add a unique ID to it (like ) 2. use document.getElementById("result").innerHTML = resultFromFetch;

So:

listen to onchange on select
fetch from backend when select changes
display fetch result

AJAX is really neat and very good for the user experience as it allows us to get the data asynchronously and in the "back stage" of our application. But then it is a good user experience measure to show also some "please wait" indications and also make sure to show some potential errors (the connection can go "down" when waiting for results and then it is wise to show errors to users instead of them waiting forever).

Hope this helps to point you in a new and exiting direction.

Thanks @nettutvikler - I had a look at the Fetch documentation and onChange and tried to implement it but my main question of that approach is - are you suggesting using it to replace the actual "submit" part of the form and have the results from the database show in the
? Also, how would I use your suggestion to set a variable? Thanks — pwride, May 13 '20 at 07:00
1.) PHP to generate form with the options in a drop-down menu being populated from a database query 2.) then you make javascript solution with on change and fetch for "user has selected an option ... that option gets passed as a variable to determine what to display" - no submit needed (onchange does the work here), 3.) AJAX fetches data from backend via PHP gets data from DB, then we can submit the form This should work around "after selecting the Round number from the drop-down menu I have to click the submit button twice" - actually onchange works as submit with no javascript. — nettutvikler, May 13 '20 at 07:27

How to use JS to hold a variable from a PHP form before submit

1 Answers1