Мобильная форма 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="#" 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="#" 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
Я думал, что смогу отправить сообщение самостоятельно на основе [ссылки]demos.jquerymobile.com/1.1.1/docs/forms/ - person kingsgambita; 10.05.2014
comment
Я использовал метод ссылки, а не отправку, и это кажется прекрасным, но все же любопытно, можно ли и как использовать кнопку отправки в этом контексте. - person kingsgambita; 15.05.2014