How to stop my app from relocating the active page after submitting a form?

Question

I have index file with 3 pages using using data-role: page. On my 3rd page I have a form which when submitted adds an element to that page. When I test it in a browser it works fine but when I test it on mobile using phonegap build, the page is redirected to page1 (The function works fine and the element is created successfully).

I tried to add this line at the end of the submit function to redirect it back to page 3 but it didn't work.

$( ":mobile-pagecontainer" ).pagecontainer( "change", "#article3");

HTML:

<!-- PAGE 1 -->
<div data-role="page" id="article1">
    <div data-role="header" data-theme="a" data-position="fixed">
        <h1>Notes</h1>
    </div>
</div>


<!-- PAGE 2 -->
<div data-role="page" id="article2">
    <div data-role="header" data-theme="a" data-position="fixed">
        <a href="#article1" data-icon="home" data-iconpos="notext">Home</a>
        <h1>Reminders</h1>
    </div>
</div>


<!-- PAGE 3 -->
<div data-role="page" id="article3">
    <div data-role="header" data-theme="a" data-position="fixed">
        <a href="#article1" data-icon="home" data-iconpos="notext">Home</a>
        <h1>Checklist</h1>
    </div>

    <div data-role="content">
            <div id="listContainer">
                <form id="listForm">
                    <input type="submit" value="Add">
                    <input id="listInput" class="textarea" placeholder="Add your list item here, then click submit.">
                    <div id="checkboxContainer">
                    </div>
                </form>
            </div>
    </div>
</div>

JS (Submit func):

//ADD LIST ITEM
$("#listForm").submit(function(ev) {
    ev.preventDefault();
    var $listInput = $("#listInput");
    var input = $listInput.val();

    if (input == "") {
        alert("Please enter the item name, then click 'Add'.");
    } else {
        listCount++;

        $("<div />")
            .attr("id", "input" + listCount + "container")
            .attr("class", "inputContainer")
            .appendTo("#checkboxContainer");

        $("<input />")
            .attr("id", "input" + listCount)
            .attr("type", "checkbox")
            .attr("class", "inline checkbox")
            .appendTo("#input" + listCount + "container");

        $("<label />") //create new label
            .attr("id", "label" + listCount) //set ID
            .attr("for", "input" + listCount) //set For
            .attr("class", "inline")
            .attr("data-roll", "none")
            .html(input) //set contents
            .appendTo("#input" + listCount + "container");//add to checkbox container

        $("<img />")
            .attr("id", "closeBtn" + listCount)
            .attr("class", "closeBtn right")
            .attr("src", "assets/android-close.png")
            .appendTo("#input" + listCount + "container");


        //Store the list count
        localStorage.setItem("listCount", listCount);

        //Store the list title
        localStorage.setItem("input" + listCount, input); //"Note " + noteCount + ": " + 

        this.submit();

        $( ":mobile-pagecontainer" ).pagecontainer( "change", "#article3");
    }
});

score 0 · Answer 1 · edited May 23 '17 at 11:54

0

It's look like a duplicate with : Stop form refreshing page on submit.

Maybe you need wrap your code in the ready function ? Alternatively it's look like more a unloaded js file than a bad code.

edited May 23 '17 at 11:54

Community

1
1

answered Apr 29 '17 at 14:51

HollyPony

817
9
15

The js file muct be loading becuase it works, just weird that everytime I do an add, it takes me back to page1 – Heavenly Apr 29 '17 at 14:57
@HollyPolly Just managed to get it working but thank you anyways! – Heavenly Apr 29 '17 at 15:34
Oh yeah I missed the cordova context ... I don't on which device you have this issue but have you tried the stopPropagation trick ? – HollyPony Apr 29 '17 at 15:44

How to stop my app from relocating the active page after submitting a form?

1 Answers1