简体   繁体   中英

Jquery mobile form data submit between two pages in a single file?

I want send the data 'home_page' page to 'get_data' page.how to get the data from home page and send to the second page using jquery

<div class="main">
<!-- first page -->
    <section id="home_page" data-role="page">
        <header data-role="header">
            <h1>Header</h1>
        </header><!-- /header -->
        <article role="main" class="ui-content">
        <!-- Form -->
            <form action="" method="post" accept-charset="utf-8">
             form data send here            
            </form>
        </article><!-- /content -->
        <footer data-role="footer">
            <h1>Footer</h1>
        </footer><!-- /footer -->
    </section><!-- second page -->
    <section id="get_data" data-role="page">
        <header data-role="header">
            <h1>Header</h1>
        </header><!-- /header -->
        <article role="main" class="ui-content">
            <p> display the data here from home page </p>
        </article><!-- /content -->
        <footer data-role="footer">
            <h1>Footer</h1>
        </footer><!-- /footer -->
    </section><!-- /page -->
</div>

You can grab the form data on page 1 and append the form values to the 2nd page. when that's done you can then change the page if you wish. In the demo, the Submit button goes to the 2nd page.

code

$("#sub").on( "click", function( event ) {
var first = $('#first').val();
var last  = $('#last').val();

$("#formdata").empty();

var pagedata = $("<p>" + first + "</p><p>" + last + "</p>");    

pagedata.appendTo("#formdata");

$("#formdata").enhanceWithin();

$( ":mobile-pagecontainer" ).pagecontainer( "change", "#get_data", { transition: "pop" } );    
})

demo

http://jsfiddle.net/j6btvLym/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM