CODEWITHSUNDEEP
javascriptasp.net-mvcformsform-submit
user1329307
user1329307

Reputation: 161

ASP Submit Button onclick/_doPostBack

The form begins:

 <% using (Html.BeginForm("Index", "recordssbook", FormMethod.Post, new { id = "SubmitForm" }))
    { %>

The submit button I would like to validate (there are other submit buttons in the same form):

<div><input type="submit" value="Delete Selected"  id ="DeleteButton" name="DeleteButton" onclick="deleteRecordsDialog();"/></div>

The buttons in my confirm dialog in js that automatically returns false:

function deleteRecordsDialog() {
    var returnThis;
    var numRecords = selectedRecordsArr.length;
    document.getElementById("popupContainer");
    var html = ""
    html= html + '<table>';
    html= html + '<tr>';
    html= html + '<td class="warning-icon-cell"></td>';
    html= html + '<td style="padding-left: 5px;">';
    if (numAddresses == 1) {
        html = html + '<p>You have chosen to delete a record.</p>';
    }
    else {
        html = html + '<p>You have chosen to delete ' + numRecords + ' records.</p>';
    }
    html= html + '<p>Are you sure you wish to proceed?</p>';
    html= html + '</td>';
    html= html + '</tr>';
    html = html + '</table>';
    if (numAddresses == 1) {
        html = html + '<div><input type="button" value="Yes, Delete Contact" style="width: 160px; onclick="document.DSubmitForm.HDeleteButton.submit(); CloseDialog();"/>&nbsp;&nbsp;<input type="button" value="Cancel" onclick="CloseDialog();"/></div>';
    }
    else {
        html = html + '<div><input type="submit" value="Yes, Delete Contact(s)" style="width: 160px; onclick="document.DSubmitForm.HDeleteButton.submit(); CloseDialog();"/>&nbsp;&nbsp;<input type="button" value="Cancel" onclick="CloseDialog();"/></div>';
    }
    html = html + '</div>';
    html = html + '</div>';
    html = html + '</div>';
    html = html + '</div>';
    OpenDialog(html, 350, 180, false, "Delete Contact")
    return false;
}

My issues:

  1. Even with onclick returning false the form is submitted: I can change the input type to button instead of submit, and this should work if I can get the psuedo submit to work
  2. is _doPostBack another way to submit the form?: From my google searches I think this should simulate the submit but when I make the submit button a regular button as stated in number 1 clicking "Yes, Delete Record(s)" doesn't submit the form.
  3. I have multiple submit buttons which makes this more complex
  4. I cannot use JQuery's easy .dialog

If someone can help me out in getting this to work I would GREATLY appreciate it!

Thanks!!

EDIT So the html a list of records with buttons that can query based on letter, add a record, delete a record and edit a record. All of these buttons are submit buttons in the same form. 

<td><input type="submit" value="ABC"  name="SubmitButton"/></td>
<td><input type="submit" value="DEF"  name="SubmitButton" /></td>
<td><input type="submit" value="GHI"  name="SubmitButton" /></td>
<td><input type="submit" value="JKL"  name="SubmitButton"/></td>
<td><input type="submit" value="MNO"  name="SubmitButton"/></td>
<td><input type="submit" value="PQRS"  name="SubmitButton" /></td>
<td><input type="submit" value="TUV"  name="SubmitButton"/></td>
<td><input type="submit" value="WXYZ" name="SubmitButton" /></td>
<div><input type="button" value="Add Contact" id="addAddress" onclick="AddAddresDialog()" /></div>
<div><input type="button" value="View &amp; Edit Selected" id="EditButton" name="EditButton"  onclick="updateAddressDialog()"/></div>
<div><input type="submit" value="Delete Selected"  id ="DeleteButton" name="SubmitButton" /></div>

I only want to add the confirm dialog to the delete button being clicked. I want to confirm it using a custom dialog window which is a div on the site master that appears as a pop up by being placed on top of a mask that covers the whole screen which is created in deleteRecordsDialog().

What I want to do is change the submit button for the delete task (id="DeleteButton) to a regular button that just opens the dialog created by deleteRecordsDialog() instead of the form submission it does now. The "Yes, Delete Contact(s)" button in the custom confirm dialog should take on that task of submitting the form with the value "Delete Selected" just as the submit button does now.

Upvotes: 1

Views: 5071

Answers (1)

Josh Mein
Josh Mein

Reputation: 28645

It is hard to really understand what you are trying to do without your html. However, you can try out the following:

HTML:

<div>
    <input type="submit" value="Delete Selected"  id ="DeleteButton" name="DeleteButton" onclick="deleteRecordsDialog();"/>
    <input type="button"  id ="DeleteButtonSubmit" name="DeleteButtonSubmit" style="display:none;" />
</div>

Javscript:

To create button for modal:

 html = html + '<div><input type="button" value="Yes, Delete Contact(s)" style="width: 160px; onclick="deleteContact();"/>&nbsp;&nbsp;<input type="button" value="Cancel" onclick="CloseDialog();"/></div>';

Function to post the delete confirmation:

function deleteContact()
{
    document.getElementById('DeleteButtonSubmit').click();
}

This function will click a hidden button below the button the user initially clicked. if you setup this button correctly, the form should submit with all of the information you need.

Upvotes: 1

Related Questions