0

我在一个页面上有两种不同的表单，可以动态生成输入。一个用于文本输入，通过按下一个按钮（我称之为表单 1）另一个文本框出现。另一个添加要通知的用户。当一个按钮被按下时，一个用户被添加到列表中（我称之为表格 2）。

假设我在表单 1 上生成了 3 个文本框，如果我尝试使用表单 2 添加另一个用户，表单 1 中的所有文本框都会消失，因为没有发布表单 1 中的数据。

以下是这两种形式的调用方式

<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。还有其他这样的 javascript 框架，如angularjs和骨干网（谷歌了解更多）。

这是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 发送数据。我 <3 knockoutjs 因为它的简单性，用户喜欢它提供的魔力。当然，您必须修改 ajax 选项以满足您的需要

于 2012-11-13T04:48:24.363 回答