Самоизпращане на jQuery мобилен формуляр и изчисляване от входове

Имам мобилен проект jQuery, който ще позволи на потребителите да въвеждат данни във формуляр, който след това (след изпращане) ще извърши някои JavaScript изчисления от страна на клиента и ще върне полезен резултат.

Не мога да разработя основния процес за предаване на входните данни към изходното поле при „изпращане“, да не говорим за извършване на изчисления или манипулации на данните.

В примера по-долу искам потребителят да въведе името си и при изпращане се зарежда нова страница с вече попълненото име. Това, което всъщност се случва е, че формулярът се зарежда добре и при изпращане показва страницата с отчета, но полето за име остава празно

<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="/bg#" 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>

Моят JavaScript е:

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

Или може би

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

javascript forms html client-side jquery-mobile
person kingsgambita    schedule 09.05.2014    source източник

Отговори (2)


arrow_upward
1
arrow_downward

Ето решение за едностранично приложение, което не изпраща никакви данни към сървъра:

<!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="/bg#" 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>

Решаващите промени са:

  • Замяна на бутона за изпращане с връзка, за да се избегне обработката на JQM при изпращане на формуляра.
  • Ръчна промяна на страницата в манипулатора onclick.

Това е за JQuery Mobile 1.4. Начинът, по който ръчно променяте страницата, е доста различен от начина, по който беше в 1.3, така че ако използвате по-стара версия, просто проверете документите (функцията се нарича changePage, ако си спомням правилно).

person Matt Van Der Westhuizen    schedule 09.05.2014
comment
Това предложение работи. Мислех, че трябва да изпратя, за да използвам приставката за валидиране, но сега мисля, че не. - person kingsgambita; 10.05.2014

arrow_upward
0
arrow_downward

Ето го проблемът: Javascript работи от страна на клиента. И поради това не можете да получите променлива на javascript, след като сте изпратили страницата си. Трябва да получите променливата POST. Полето за стойност е празно след изпращането. Виж това:

Как да получите POST променливи в jQuery

person Andi    schedule 09.05.2014
comment
Може би не трябва да използвам Post? Не искам да изпращам никакви данни към сървъра, просто правя целия процес от страна на клиента. - person kingsgambita; 09.05.2014
comment
Мислех, че мога да изпратя сам въз основа на [link]demos.jquerymobile.com/1.1.1/docs/forms/ - person kingsgambita; 10.05.2014
comment
Използвах метода на връзката вместо изпращане и това изглежда добре - но все пак съм любопитен дали и как да използвам бутон за изпращане в този контекст - person kingsgambita; 15.05.2014