jQuery同一页中的两种形式-值更改

Question

I've a list of all my users in a table. The last td element will contain a form, either a form for opening the account or a form for closing the account based on if the user is already been closed or not. I'm using jQuery AJAX form plugin from http://malsup.com/jquery/form/ which is working. What I'd like to do is the change the value of button before the form is been submitted.

Here's my JS for now:

$(document).ready(function() {

    $('form').ajaxForm({
        beforeSubmit: function() {
                $('form').find('input').val('Wait...');
            },
            success: function(data) { 
                $('body').html(data);
            }
        });
        return false;

    });

and here's my HTML markup:

<td>
<?php if($user['closed'] == 0):?>
    <?php $attributes = ['class' => 'account']; ?>      
    <?php echo form_open('admin/closeAccount', $attributes);?>
        <input type="hidden" name="user_id" value="<?=$user['user_id']?>"/>
        <input type="hidden" name="user_email" value="<?=$user['email']?>"/>
        <input type="submit" name="close_account" class="btn btn-danger btn-sm" id="trigger" value="Close" >
    <?php echo form_close();?>

<?php else:?>
      <?php $attributes = ['class' => 'account'];?>
      <?php echo form_open('admin/openAccount');?>
        <input type="hidden" name="user_id" value="<?=$user['user_id']?>"/>
        <input type="submit" data-loading-text="Odota..." name="open_account" class="btn btn-success btn-sm" id="trigger" value="Open" >
      <?php echo form_close();?>
<?php endif ?>
</td>

The problem is that every time I try to submit the form, it will now change the value of all buttons to "Wait..." instead of just the one I clicked. I tried to replace $('form') with $(this) in $('form').find('input').val('Wait...'); but that didn't help me at all.

Answer 1

Just try this code

$('.btn').val('Wait...');

or

$('.btn-danger').val('Wait...');

or

$('.btn-sm').val('Wait...');

Answer 2

If i understood you right you need just change your selector to - $('input[type="submit"]'). So it will be - $('form').find('input[type="submit"]').val('Wait...');

Or use :submit selector

Answer 3

According to the plugin documentation ( http://malsup.com/jquery/form/#options-object ) $form passed to beforeSubmit callback should give you access to the current form being submitted.

try:

$('form').ajaxForm({
    beforeSubmit: function(arr, $form, options) {
        $form.find('.btn').val('Wait...');
    },
    success: function(data) { 
        $('body').html(data);
    }
});

Answer 4

Try adding more specificity to your CSS selector. Inside your ajaxForm() call try this to change submit button value:

$(this).find('input[type="submit"]').val('Wait...');

Answer 5

Your button has an id, why aren't you using that selector?

$("#trigger").val("Wait...");

Is the form itself loaded via ajax? If so then delegate.

$(document).on("customevent", "#trigger", function() {
    $(this).val("Wait...");
});

and then in the beforesubmit just $(document).trigger("customevent");