Home/ Questions/Q 8828195
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T07:33:05+00:00

I have two different forms on one page that dynamically generate inputs. One is

  • 0

I have two different forms on one page that dynamically generate inputs. One is used for text inputs and by pressing a button(I’ll call this form 1) another textbox appers. The other adds users to be notified. When a button is pressed a user is added to the list(I’ll call this form 2).

Say I have 3 text boxes generated on form 1, if I try to add another user with form 2 all of the textboxes from form 1 disappear because the data from form 1 isn’t being posted.

Here’s how the two forms are called

<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>
<?

When I change it so these are both posted at the same time (instead of individually as it currently is), the individual forms don’t work correctly.

To sum it up, is there any way to tell a form to post its data even when a submit button isn’t pressed? Something like onaction(post data from other form…)

This is from form 2. If I remove the method from this then I can’t properly delete items from the list. 

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>

    <?
    }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m not certain of you’re exact needs, but for something like this I would use knockout.js. There are other such javascript frameworks like angularjs and backbone (google for more).

    Here is a simple knockoutjs example on jsFiddle displaying the functionality you’re looking for.

    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>

    As you can see knockoutjs relies on JQuery being available, but this also gives you access to JQuery’s ajax functionality. This allows you to send the data via ajax. I <3 knockoutjs for it’s simplicity and users love the magic it provides. You’ll have to modify the ajax options to suit your needs, of course

    • 0