Asked  7 Months ago    Answers:  5   Viewed   27 times

I'm using Twitter Bootstrap modal window functionality. When someone clicks submit on my form, I want to show the modal window upon clicking the "submit button" in the form.

<form id="myform" class="form-wizard">
    <h2 class="form-wizard-heading">BootStap Wizard Form</h2>
    <input type="text" value=""/>
    <input type="submit"/>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    <div class="modal-body">
        <p>One fine body…</p>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>


$('#myform').on('submit', function(ev) {
        show: 'false'

    var data = $(this).serializeObject();
    json_data = JSON.stringify(data);

    // $("#results").text(data);




Bootstrap has a few functions that can be called manually on modals:


You can see more here: Bootstrap modal component

Specifically the methods section.

So you would need to change:

    show: 'false'



If you're looking to make a custom popup of your own, here's a suggested video from another community member:

Tuesday, June 1, 2021
answered 7 Months ago

You need to use Prevent the default action of a submit button

$('#barkod_oku').submit(function () {
Saturday, May 29, 2021
answered 7 Months ago

This may seem silly, but did you check you're using the same bootstrap-datetimepicker.js plugin that you're referring to in your question?

There are two versions I know of which are very similar:

  1. The version you provided in your question:
  2. A slightly different version:

The first version responds to change.dp, while the second version responds to dp.change.

Just check the comments at the top of the bootstrap-datetimepicker.js to see which one you're using.

Wednesday, July 28, 2021
answered 4 Months ago

data-filed should have not spaces, try to change

data-field="Customer Name"



I updated your jsfiddle and filter-control works.

However it would be great to implement filter options updating to available values, as I described in this post:

bootstrap table filter-control - how to unset unnecessary values from select options

Saturday, August 14, 2021
answered 4 Months ago

I have this working well in my current project.

A partial view uses the Inherits control markup just like a full view does to strongly type the Model object to a datatype.

Here is a very simple example of a partial view that is returned via a ajax call and put inside a div. The purpose of this partialview is to display a text message that is passed through to it.


<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<string>" %>
<!-- LiteralMessage.ascx start -->
<%= Model %>
<!-- LiteralMessage.ascx end -->

Controller Method

public ActionResult ReturnId(int id)
    return PartialView("LiteralMessage", string.Format("Hello world! Id: {0}", id));

Note that in the partial page view can be any complex object.

I hope this helps!

EDIT: and because this is listed as jQuery as well, use this as your ajax's success event. (This is assuming your dialog has a content DIV with an Id of MyDialogMessage inside a dialog DIV with an Id of MyDialog)

// executes when $.post is complete
function doSuccess(result)
    $('div#MyDialog div#MyDialogMessage').html(result);
    //show dialog
Monday, October 4, 2021
answered 2 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :