0

1つのページに2つの異なるフォームがあり、動的に入力を生成します。1つはテキスト入力に使用され、ボタンを押すと（このフォームを1と呼びます）、別のテキストボックスが表示されます。もう1つは、通知するユーザーを追加します。ボタンが押されると、ユーザーがリストに追加されます（このフォームを2と呼びます）。

フォーム1で3つのテキストボックスを生成したとします。フォーム2で別のユーザーを追加しようとすると、フォーム1のデータが投稿されていないため、フォーム1のすべてのテキストボックスが表示されなくなります。

2つの形式の呼び方は次のとおりです

<form method="post">
<?
$friends = new common_functions();
$friends->add_friends($added_friends); //this is in common functions - also used for assistance invites
?>
<br>
</form>


<form method="post">
<br>
<?
$register = new common_functions(); 
$register->register_tasks($j, $reg_description, $reg_num);
?>
</form>
<?

両方が同時に投稿されるように変更すると（現在のように個別にではなく）、個々のフォームが正しく機能しません。

要約すると、送信ボタンが押されていない場合でもデータを投稿するようにフォームに指示する方法はありますか？onactionのようなもの（他のフォームからのデータを投稿...）

これはフォーム2からのものです。これからメソッドを削除すると、リストからアイテムを適切に削除できません。

if(count($added_friends) > 0){
        ?>
        <table width="200">
        <col width="150">
        <th>Name</th><th>Remove</th>
        <?
        $count = count($added_friends);
        for($i=0; $i< $count; $i++){
            if($added_friends[$i] == NULL){
                $count = $count;
            }
            $friend = $added_friends[$i];
            ?>

            <!-- allows a user to remove invited friends -->
            <form method="post">
            <tr><td><? echo $friend; ?></td><td><input type="submit" name="remove_friend" value="X"/>
            <input type="hidden" name="remove_name" value="<? echo $friend; ?>"/>
            <input type="hidden" name="added_friends" value="<? echo implode(',',$added_friends); ?>"/></td></tr>               </form>
            </form>
            <?
        }
        ?>
        </table>

    <?
    }
4

1 に答える 1

0

正確なニーズがあるかどうかはわかりませんが、このようなものにはknockout.jsを使用します。angularjsやバックボーンなどの他の JavaScript フレームワークがあります(詳細については Google を参照)。

これは、探している機能を表示するjsFiddleの簡単な knockoutjs の例です。

Javascript

var viewModel = function(){
    this.values = ko.observableArray();
    this.invited = ko.observableArray();
    this.addValue = function(){
        var txt = $('#form1 input').val();
        this.values.push(txt);
    }.bind(this);
    this.addInvite = function(){
        var txt = $('#form2 input').val();
        this.invited.push(txt);
    }.bind(this);
    this.sendData = function(){
        $.ajax({
            url: 'www.blah.com/blahblah',
            data: { text: this.values(), invited: this.invited() } 
        });   
    }.bind(this);
}

ko.applyBindings(new viewModel());

HTML

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
</head>
<body>
    <div id="form1">
        <input type="text" />
        <button data-bind="click: addValue">Add</button>
    </div>
    <div id="valueList" data-bind="visible: values().length > 0">
        <ul data-bind="foreach: values">
            <li data-bind="text: $data"></li>
        </ul>
    </div>
    <div id="form2">
        <input type="text" />
        <button data-bind="click: addInvite">Invite</button>
    </div>
    <div id="inviteList" data-bind="visible: invited().length > 0">
        <ul data-bind="foreach: invited">
            <li data-bind="text: $data"></li>
        </ul>
    </div>
    <button data-bind="click: sendData">Save</button>
</body>

ご覧のとおり、knockoutjs は利用可能なJQueryに依存していますが、これにより、JQuery の ajax 機能にもアクセスできます。これにより、ajax 経由でデータを送信できます。そのシンプルさとユーザーはそれが提供する魔法を気に入っています。もちろん、必要に応じてajaxオプションを変更する必要があります

于 2012-11-13T04:48:24.363 に答える