Show Pop Up After Submit Form

Show pop up after submit form

To use ajax, download and link jQuery in your HTML code and access function like this:

jQuery

$('#my-form').on('submit', function(e)
{
    e.preventDefault(); //this stops the form submit + refresh 

        $.ajax({ 
            data:    {data_field: 'value'},
            type:    'post',
            url:     '/path/to/script.php',
            success: function(r) {$('#my-popup').removeClass('hidden')},
            error:   function(r) {alert('error'); console.log(r)}
        });
});

Html

<div class="hidden" id="my-popup">
    <p>some msg</p>
</div>

css

.hidden {display: none}

note: the above isn't going to work via copy and paste, alter the ajax function data field so it responds to your script

ref: https://api.jquery.com/jQuery.ajax/

show the sucess popup after form submit form?

if($insert_id=='success'){//change success based on the returned value of the model
    echo "<script>
        alert('Success');
        window.location.href='".base_url('general/index')."';
        </script>";
}

HTML form submit popup

You just need to add an ajax request to the url enpoint and fetch the response. But as mentioned in another answer you need to use preventDefault() to avoid refresh when clicking send button.

Here's a jsfiddle for the same - https://jsfiddle.net/ekLys4qa/1/

$(".trigger_popup_fricc").click(function(e){  e.preventDefault();  var my_inputs = {    name: $("#name").val(),    email: $("#email").val(),    message: $("#message").val()  }  $.ajax({    type: "POST",    url: "https://httpbin.org/post", // change it to your application specific url    data: my_inputs,    success: function(data, status){     console.log(data);      console.log(status);      $('.hover_bkgr_fricc').show();    },    error: function(err){     console.log(err);    }  });  // for resetting the form  $("#name").val("");  $("#email").val("");  $("#message").val("");});
$('.popupCloseButton').click(function(){  $('.hover_bkgr_fricc').hide();});

   /* Popup box BEGIN */.hover_bkgr_fricc{    background:rgba(0,0,0,.4);    cursor:pointer;    display:none;    height:100%;    position:fixed;    text-align:center;    top:0;    width:100%;    z-index:10000;}.hover_bkgr_fricc .helper{    display:inline-block;    height:100%;    vertical-align:middle;}.hover_bkgr_fricc > div {    background-color: #fff;    box-shadow: 10px 10px 60px #555;    display: inline-block;    height: auto;    max-width: 551px;    min-height: 100px;    vertical-align: middle;    width: 60%;    position: relative;    border-radius: 8px;    padding: 15px 5%;}.popupCloseButton {    background-color: #fff;    border: 3px solid #999;    border-radius: 50px;    cursor: pointer;    display: inline-block;    font-family: arial;    font-weight: bold;    position: absolute;    top: -20px;    right: -20px;    font-size: 25px;    line-height: 30px;    width: 30px;    height: 30px;    text-align: center;}.popupCloseButton:hover {    background-color: #ccc;}.trigger_popup_fricc {    cursor: pointer;    font-size: 20px;    margin: 20px;    display: inline-block;    font-weight: bold;}/* Popup box BEGIN */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form method="post"><div class="fields">    <div class="field half">        <input type="text" name="name" id="name" placeholder="Name" />    </div>    <div class="field half">        <input type="email" name="email" id="email" placeholder="Email" />    </div>    <div class="field">        <textarea name="message" id="message" placeholder="Message"></textarea>    </div></div><ul class="actions"><li><button class="trigger_popup_fricc primary" id="btn" type="submit" value="Send">Send</button></li></ul></form><div class="hover_bkgr_fricc">    <span class="helper"></span>    <div>        <div class="popupCloseButton">X</div>        <p>Add any HTML content<br />inside the popup box!</p>    </div></div>

I want to pop up a div after submit a form

I solve the issue see the example what I have done
This is the post.php

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
        $('#form').on('submit',function(e){
            e.preventDefault();
            $.post('result.php', $(this).serialize(), function(response){
                $('#result').html(response);
            });
        });
    });
</script>

<style type="text/css">
.no-close .ui-dialog-titlebar-close {
  display: none;
}
#popUpDiv{
    width: auto;
    min-height: 104px;
    max-height: none;
    height: auto;
    background: #026800 none repeat scroll 0% 0%;
    border-radius: 19px;
    text-align: center;
    color: rgb(255, 255, 255);
    font-size: 28px;
    margin-top: 6px;
    float: left;
    padding: 20px;
}   
}
</style>
</head>
<body>
<form id="form">
Number: <input type="number" name="number" />
<input class="show" type="submit" Value="Submit" name="submit" />
</form>
<div id="result"></div>
</body>
</html>

This is the result.php

<script>
 $( "#popUpDiv" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "X",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});
</script>
<?php
if (isset($_POST['number'])){
echo'<div id="popUpDiv">Your Number:  ' .$_POST['number']."</div>";
}
?>

How to show modal popup after submitting form using reactjs?

You were almost there, you just have to conditionally render ShowModal and pass event handler close to it.

import React from "react";
import { Form, Button } from "semantic-ui-react";
import axios from "axios";

import ShowModal from "./ShowModal"

export default class AddForm extends React.Component {
  {......same content........}
  onCancel = () => {
    this.setState(() => ({ message: "" }))
  }

  render() {
    const { message } = this.state
    return (
      <div>
        <Form onSubmit={this.handleSubmit}>
          {.....}
        </Form>
        <ShowModal close={this.onCancel} message={message} />
      </div>
    );
  }
}

EDIT:
And in ShowModal.jsx:

<Modal open={!!message}>
  {......}
</Modal>

open a popup window in mvc asp.net after submitting a form

You can use viewBag for sending message from controller to view.
Since ViewBag.Msg is checked for null it will popup the message only after initialize insde SalvarPermissoes action.

public ActionResult SalvarPermissoes(int[] permissoes_modulos)
{
 int employeeID = permissoes_modulos[0];

UserManagement userManagement = new UserManagement();
userManagement.EmployeeID = employeeID;
userManagement.DeleteUserManagement();

for(int i = 1; i < permissoes_modulos.Length; i++)
{
    userManagement.ModuleID = permissoes_modulos[i];
    userManagement.InsertUserManagement();
}
ViewBag.Msg = "Thankyou for submitting form";
return View(); //this target view is suppose to be a modal window
}

View

put this inside top of view

@if (ViewBag.Msg != null)
{

    <!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="modal-title">Post Status</h4>
            </div>
            <div class="modal-body">
                <p >@ViewBag.Msg.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<button type="button" class="btn btn-info btn-lg" id="bootstrapmodel" data-toggle="modal" data-target="#myModal" style="display:none">Open Small Modal</button>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script>

    $('#myModal').modal('show');
    </script>
}

Show Pop Up After Submit Form