jQuery mobile form self-submit and calculate from inputs

Question

I have a jQuery mobile project which will allow users to enter data in a form which will then (after submit) perform some JavaScript calculations on the client-side and return a useful output.

I can't work out the fundamental process for passing the input data to the output field upon "submit" let alone performing any calculations or manipulations of the data.

In the example below I want the user to enter their name and upon submit a new page loads with the name already filled in. What actually happens is that the form loads nicely, and on submit shows the report page but the name field remains blank

<form action="#report" name="formInput" method="post"data-ajax="false">
            <div class="ui-field-contain">
            <label for="name-1">Name:</label>
            <input name="name-1" id="name-1" value="" minlength="2" type="text" />
            </div>
            <div class="ui-grid-a">
            <div class="ui-block-a"><input type="reset" value="Reset" data-icon="back"data-theme="a"/></div>
            <div class="ui-block-b"><button type="submit" name="submit" value="submit"onclick="yourName();" data-theme="a">Submit</button></div>
            </div>
        </form>
    </div>
</div>

<!-- Start of third page -->
<div data-role="page"data-theme="b"data-add-back-btn="true" data-back-btn-text = "Home" id="report">
<div data-role="header">
    <a href="#" data-icon="back" data-rel="back" title="Go back">Back</a><h1>This is your name</h1>
</div>
    <div data-role="content">   
     <label for="name-rep">Name:</label>
    <input name="name-rep" id="name-rep" value="" minlength="2" type="text" />
    </div>

My JavaScript is:

enter code here
$("#formInput").submit(function(e){
var name = $('#name-1').val();
$('#name-rep').val(name);
});

Or maybe

function yourName() {
var name = $('#name-1').val();
$('#name-rep').val(name);
    };   `

score 1 · Accepted Answer · answered May 09 '14 at 10:05

Here's a solution for a single page application that doesn't send any data to the server:

<!doctype HTML>

<html class="ui-mobile">
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>

<body class="ui-mobile-viewport">
    <div data-role="page" data-theme="b" id="index">
        <form name="formInput" method="post" data-ajax="false">
            <div class="ui-field-contain">
                <label for="name-1">Name:</label>
                <input name="name-1" id="name-1" value="" minlength="2" type="text" />
            </div>
            <div class="ui-grid-a">
                <div class="ui-block-a">
                    <input type="reset" value="Reset" data-icon="back"data-theme="a"/>
                </div>
                <div class="ui-block-b">
                    <a data-role="button" onclick="yourName();" data-theme="a">Submit</a>
                </div>
            </div>
        </form>
    </div>

    <!-- Start of third page -->
    <div data-role="page"data-theme="b"data-add-back-btn="true" data-back-btn-text = "Home" id="report">
        <div data-role="header">
            <a href="#" data-icon="back" data-rel="back" title="Go back">Back</a>    
            <h1>This is your name</h1>
        </div>

        <div data-role="content">   
            <label for="name-rep">Name:</label>
            <input name="name-rep" id="name-rep" value="" minlength="2" type="text" />
        </div>
    </div>
</body>

<script>
    function yourName() {
        var name = $('#name-1').val();
        $('#name-rep').val(name);

        $.mobile.pageContainer.pagecontainer("change", "#report");
    };
</script>
</html>

The crucial changes are:

Replacing the submit button with a link to avoid JQM handling the form submission.
Manually changing the page in the onclick handler.

This is for JQuery Mobile 1.4. The way you manually change the page is quite different from how it was in 1.3, so if you're using an older version just check the docs (the function is called changePage if I recall correctly).

This suggestion works. I thought I needed "submit" in order to use the validation plugin but now I think not. — kingsgambita, May 10 '14 at 01:26

score 0 · Answer 2 · edited May 23 '17 at 11:50

0

Here's the problem: Javascript is running on the client side. And because of that, you cant get a javascript variable after you've sent your page. You have to get the POST variable. The value field is empty after the submit. Check this out:

How to get POST variables in jQuery

edited May 23 '17 at 11:50

Community

1
1

answered May 09 '14 at 06:31

Andi

909
1
11
26

Perhaps I should not use Post? I don't want to send any data to the server just do the whole process client side. – kingsgambita May 09 '14 at 08:33
I thought I could "self-submit" based upon [link]http://demos.jquerymobile.com/1.1.1/docs/forms/forms-sample-selfsubmit.php – kingsgambita May 10 '14 at 01:19
I used the link method rather than submit and that seems fine - but still curious about whether and how to use a submit button in this context – kingsgambita May 15 '14 at 02:33

jQuery mobile form self-submit and calculate from inputs

2 Answers2