Multi part form - trying to stop default a href behaviour

198
November 22, 2016, at 12:32 PM

Having my first go at a multi-part form with forward and backward controls. The initial idea is you can't jump off the page until you've completed all required fields. I'm using multiple a hrefs to submit the form, one set of these a hrefs is part of menu which is included in form pages and none form pages. So my thinking was to use javascript, read the pageId placed in the tag to decide whether after clicking on the href it should be submitted as a form or simply follow the default href="" link. So I tried the following:

        function setvalue(whatvalue){
            alert (document.getElementById('subtype').value);
            if (pageId != "gettingstarted"){
                alert ("Doesn't equal gettingstarted so submit");
                if (whatvalue){document.getElementById('subtype').value=whatvalue;}
                $('#myForm').submit();
                return false;
            }
        }

Using these links with the default href="" and an onclick firing the js function

     <a onclick="setvalue('gettingstarted.php');" href="gettingstarted.php">Get Started</a>
     <a onclick="setvalue('form1.php');" href="form1.php">Form One</a>
     <a onclick="setvalue('form2.php');" href="form2.php">Form Two</a>
     <a onclick="setvalue('preview.php');" href="preview.php">Preview</a>

You click the href, then if it's not the start page (containing no form), there's a tweak to the form and it is then submitted and the default href="" is stopped from being carried out (by the return false;). If is the start page the js does nothing and in theory the href link is then followed.

The href links though are not being stopped. If I change the hrefs to "#" it works, as I can see a flicker in which the page loads and then php form checker kicks in. But with the links in place, the link location is loaded in and the submit (and subsequent form check) doesn't appear to have the chance to happen. Read a few threads relating to stopping default behaviour and thought the return false was the answer.

Thanks for your time and reading.

Answer 1

the event needs to have a return in the attribute

 <a onclick="return setvalue('gettingstarted.php');" ..... />

you also need to add a return true here which will allow the event to continue.

function setvalue(whatvalue){
            alert (document.getElementById('subtype').value);
            if (pageId != "gettingstarted"){
                alert ("Doesn't equal gettingstarted so submit");
                if (whatvalue){document.getElementById('subtype').value=whatvalue;}
                $('#myForm').submit();
                return false;
            }
            return true;
        }
READ ALSO
Toggle menu onclick, close by clicking menu link - but only in mobile view

Toggle menu onclick, close by clicking menu link - but only in mobile view

I've made a responsive menu for a one page website that switches to a toggleable menu, when the window width is lower than 768px. [nnn]Basically I want the menu to be toggled by a click on the header and closed by another click on a menu link (li-element)....

259
Searching items causes lags

Searching items causes lags

I have following problem. Let's say I have DOM like this.

214
How to make independent a function on different target jQuery?

How to make independent a function on different target jQuery?

I don't realy know if this is where the problem come from but it seems to be that the event of stopPropagation()is applying to both div at a time. .

275