jQuery mobile form self-submit and calculate from inputs

StackOverflow https://stackoverflow.com/questions/23556870

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);
    };   `
Was it helpful?

Solution

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).

OTHER TIPS

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top