CODEWITHSUNDEEP
javascriptphpjqueryhtml
StoopidDonut
StoopidDonut

Reputation: 8617

Handle multiple forms with dynamic HTML element ids through jQuery

I have a situation where my php page generates multiple forms based on the data received through a third party api.

My requirement is to handle a jQuery modal confirmation for these dynamically generated form elements but I'm at a loss since jQuery is unable to handle this in my case.

I have tried JSFiddle too but couldn't get it working; here.

EDIT: There was not much wrong with the script but fiddle adds the windo onLoad which was interfering with the script:

window.onload=function(){
function formSubmit(formId) {
    alert('here');
    var submitForm = $('#form_twake' + formId);
...

The modal confirmation div ('confirm' within the form) should also remain hidden but I can see that appearing in fiddle as well.

I know I am missing something very basic since I cannot get fiddle to work but so far I am at a complete loss; my research on this topic leads to id creations through jQuery or form submit through jQuery but I am not inclined to go that route unless the current flow is unfeasible.

The forms are generated just fine and a regular html submit yields the desired results; but without the modal confirmation.

Any leads to how can I achieve this dynamic handling of generated forms with a generic jQuery?

jQuery

<script>
function formSubmit(id) {
var submitForm = $('#form_twake'+id);
submit = false;

$('#confirm'+id).dialog({
    resizable: false,
    height: 140,
    modal: true,
    autoOpen: false,
    buttons: {
        'Submit': function() {
            $(this).dialog('close');
            submit = true;
            submitForm.submit();
        },
        'Cancel': function() {
            $(this).dialog('close');
        }
    }
});
//$("#confirm").parent().appendTo($("#form_twake")); 

submitForm.submit(function() {
    if (submit) {
        return true;
    } else {
        $("#confirm"+id).dialog('open');
        return false;
    }
});
};
</script>

PHP where forms are generated:

 <html>
    <body>
    <center>
    <div><img src="includes/static/logo.png" alt="Twake"/></div>
    </br>
    <?php
    try {
    $suffix = 0;
    foreach ( $json ['users'] as $bud ) {
        $keys = array_keys ( $bud );
        $suffix = $suffix + 1;
        ?>
    <form id="form_twake<?php echo $suffix?>" name="form_twake<?php echo $suffix?>" method="POST" action="index.php" onsubmit="formSubmit(<?php echo $suffix?>)">
    <div class="box fade-in one">
            <input type="submit" value="Destroy" class="twake-button" />
            <div id="confirm<?php echo $suffix?>" style="display: hidden;" title="Bin user?">
                <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Confirm cleanup of the user <?php echo $bud ['name'];?>?</p>
            </div>
        </div>
    </form>

    <?php
    }
    }
    catch (Exception $e) {
    echo 'Please check your connection and try again. ' . $e->getMessage();
    }
    ;
    ?>

    </center>
    </body>
    </html>

Upvotes: 0

Views: 1423

Answers (2)

StoopidDonut
StoopidDonut

Reputation: 8617

I got it working with a few modifications, posting it here as it can be helpful for someone else as well.

  1. I modified my jQuery to be contained within a javascript function, to which I had a more control
  2. I changed my submit to a normal button element to trigger submit based on the onclick and modal confirmation event (removed onsubmit on the form)

Here is the modified code:

JavaScript

    <script>

    var submitForm = null;
    var id = 0;
    var submit = false;

    function formSubmit(formId) {
    id = formId;
    submitForm = $('#form_twake'+id)
    alert(id);
    $('#confirm'+id).dialog({
        resizable: false,
        height: 140,
        modal: true,
        autoOpen: false,
        buttons: {
            'Submit': function() {
                $(this).dialog('close');
                submit = true;
                submitForm.submit();
            },
            'Cancel': function() {
                $(this).dialog('close');
            }
        }
    });
    //$("#confirm").parent().appendTo($("#form_twake")); 
    twakeSubmit(submit);
    }

    function twakeSubmit(isSubmit) {
        if (isSubmit) {
            return true;
        } else {
            $("#confirm"+id).dialog('open');
            return false;
        }
    }

</script>

HTML/PHP code

<html>
    <body>
    <center>
    <div><img src="includes/static/logo.png" alt="Twake"/></div>
    </br>
    <?php
    try {
    $suffix = 0;
    foreach ( $json ['users'] as $bud ) {
        $keys = array_keys ( $bud );
        $suffix = $suffix + 1;
        ?>
    <form id="form_twake<?php echo $suffix?>" name="form_twake<?php echo $suffix?>" method="POST" action="index.php">
    <div class="box fade-in one">
            <input type="button" value="Destroy" class="twake-button" onclick="formSubmit(<?php echo $suffix?>)"/>
            <div id="confirm<?php echo $suffix?>" style="display: hidden;" title="Bin user?">
                <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Confirm cleanup of the user <?php echo $bud ['name'];?>?</p>
            </div>
        </div>
    </form>

    <?php
    }
    }
    catch (Exception $e) {
    echo 'Please check your connection and try again. ' . $e->getMessage();
    }
    ;
    ?>

    </center>
    </body>
    </html>

Upvotes: 0

Ori Refael
Ori Refael

Reputation: 3018

Something is bad with saving the parameter and than using it, its just not right. what you can do is to store this value in a property inside the form.

    submitForm.attr('extraData', false);
    $('#confirm'+id).dialog({
    resizable: false,
    height: 140,
    modal: true,
    autoOpen: false,
    buttons: {
        'Submit': function() {
            $(this).dialog('close');
            submitForm.attr('extraData', true);
            submitForm.submit();
        },
        'Cancel': function() {
            $(this).dialog('close');
        }
    }
});
submitForm.submit(function() {
var submit = $('#submitForm').attr('extraData');
if (submit) {
    return true;
} else {
    $("#confirm"+id).dialog('open');
    return false;
}

});

OR just write a function to do this. difining what a function to do on form submit is just like calling a normal function but not relate it to a specific event of the form. for example:

    $('#confirm'+id).dialog({
    resizable: false,
    height: 140,
    modal: true,
    autoOpen: false,
    buttons: {
        'Submit': function() {
            $(this).dialog('close');
            DoWork(true);
        },
        'Cancel': function() {
            $(this).dialog('close');
        }
    }
});

function DoWork (isSubmit) {
  if (!isSubmit) $("#confirm"+id).dialog('open');
}

Upvotes: 1

Related Questions