Jump to content
Sandor

Accordion script conflicting with form submit

Recommended Posts

After letting a project age well, I'm looking at modernizing my code. The project takes the data input all year long at several different events and builds a 'league scoreboard' of them. The code goes back as far as 2002 in the oldest parts and the last major update to the code was in '07 even if CSS was added by someone else in '14.

 

I have not worked with CSS before, and had a helper apply it to the PHP pages I coded way back when, but they were using a HTML4 subset that I would consider 'less than easily human readable'. My helper dropped out and I found myself looking at W3.css to learn what about what had changed in the ten years or so since I worked actively on this codebase, in order to pick up what they had started and migrate to something that I could maintain alongside my code. It was also decided to try and code parts of the project specifically for mobile use first. (/backstory)

 

After playing around with W3.css I came up with a HTML template of what I'd like to get working. http://scaikeqc.org/sandbox/tf-03.html. It needs polishing, and some refinements, but its close to what I want for the mobile experience.

 

Please note, there are no FORM tags in that page so the selects and inputs are for show only. I tried making a proper form of it, http://scaikeqc.org/sandbox/tf-03.php and it was a right mess. Every time you click on the accordion labels to expand them, the form submits, the script reloads, hilarity ensues. This introduces trash into the resultset and before I remembered to use the action tag on the form element, I crashed the GET.

 

Is it possible to have a whole-page form broken into accordion segments?

 

Here is a snip of the-03.php

<form class="w3-form" method="post" action="<?php echo $_SERVER[PHP_SELF]?>">

 <div class="w3-accordion w3-light-grey">
  <button onclick="feif('Rider')" class="w3-btn-block w3-centered">
    Open Rider Selection
  </button>

  <div id="Rider" class="w3-accordion-content w3-container w3-red">
   <H2>Select the Rider</H2>
   
   <SELECT class="w3-select" NAME="Pname">
   
<?PHP
  IF (isset($Pname)){
    printf("<OPTION VALUE=\"%s\">RiderID: %s\n", $Pname, $Pname);
  } else {
    echo "<OPTION VALUE=\"XXX\">Select Rider<OPTION VALUE=\"XXX\">-----\n";
    echo "<OPTION VALUE=\"NEW\">**NEW RIDER**\n";
  }
?>

<OPTION VALUE="XXX">-----
<OPTION VALUE="306">Johanna
<OPTION VALUE="83">Aaron MacGregor
<!-- 465 additional select items omitted for brevity-->
<OPTION VALUE="421">Zinaida Orshima
<OPTION VALUE="114">Zuriel Nightshade
<OPTION VALUE="XXX">-----<OPTION VALUE="NEW">**NEW RIDER**
</SELECT>
  </div>

  <button onclick="feif('Horse')" class="w3-btn-block w3-centered">
    Open Horse Selection
  </button>
  <div id="Horse" class="w3-accordion-content w3-container w3-red">

<H2>Select the Horse</H2>



   <SELECT class="w3-select" NAME="Hname">
   
<?PHP
  IF (isset($Hname)){
    printf("<OPTION VALUE=\"%s\">HorseID:%s\n", $Hname, $Hname);
  } else {
    echo "<OPTION VALUE=\"XXX\">Select Horse<OPTION VALUE=\"XXX\">-----\n";
    echo "<OPTION VALUE=\"NEW\">**NEW Horse**\n";
  }
?>

<OPTION VALUE="12">Unknown Mount
<OPTION VALUE="XXX">-----
<OPTION VALUE="103">Ace
<!-- 380 additional select items omitted for brevity-->
<OPTION VALUE="236">Zeus' Dream
<OPTION VALUE="280">Zia
<OPTION VALUE="XXX">-----<OPTION VALUE="NEW">**NEW HORSE**
</SELECT>  </div>
The form continues through five more containers I've not copied here.

<input type="submit">
</FORM>


<script>
function feif(id) {
    var x = document.getElementById(id);
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else {
        x.className = x.className.replace(" w3-show", "");
    }
}
</script>

I have a proof-of-concept form that does work(no accordions or data validation, data entered is not retained). This one checks an events database to see which of the five games are being played and only displays the data entry containers for the games that are being run. This is why I wanted to containerize the different sections of data entry. You can poke at that form here http://scaikeqc.org/sandbox/tf-05.php.

 

If you've gotten this far in my post, please accept my thanks for seeing it through, and my apologies for less than beautified code. I'm recycling a lot of the form code from the previous version and haven't had the time to polish non-working code.

Share this post


Link to post
Share on other sites

A button element inside a form will submit the form by default, so you just need your button click handler to cancel the default action before doing whatever else it does.

Share this post


Link to post
Share on other sites

Oh good, I'm not going crazy.

 

What's the smart way of overriding default click behavior?

Share this post


Link to post
Share on other sites

Depends IF you wish to prevent submission of form completely use ' onsubmit="return false;" ' on the form element, IF on the overhand you want it to prevent submission for specific buttons, you need to pass event handler to function so you can apply .preventDefault();

<button onclick="feif('Rider', event)" class="w3-btn-block w3-centered">
    Open Rider Selection
  </button>
function feif(id, e) {
    e.preventDefault();
    var x = document.getElementById(id);
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else {
        x.className = x.className.replace(" w3-show", "");
    }
}
  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...