Question

我在一个页面上有两种不同的表单，可以动态生成输入。一个用于文本输入，按下一个按钮（我将这个表格称为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>

    <?
    }

Answer 1

我不确定你是否确切需要，但对于类似这样的事情，我会使用knockout.js。还有其他类似的javascript框架，如angularjs和backbone（google了解更多）。

这是一个简单的knockoutjs example on jsFiddle，显示您正在寻找的功能。

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

根据操作从多个表单发布数据

1 个答案:

HTML