Hybreeder Hybreeder - 4 months ago 28
HTML Question

Form action event not working on popup

I have a form inside popup but my form action event not working after click on button. My code is as follows:

HTML:

<a href="#Popup" class="button">Expose Modal</a>
<!--popup content here-->
<div id="Popup" class="Modal">
<div class="content">
<form action="demo.php" method="post" id="register-form">

<input type="text" name="name" placeholder="Name:" id="name">
<input type="text" name="location" placeholder="Location:" id="location">

<div class="center-text vpadding">
<input type="submit" value="request now" class="button-request" >
</div>
</form>

<span class="close"></span>
</div>
</div>


JS:

$.fn.expose = function(options) {

var $modal = $(this),
$trigger = $("a[href=" + this.selector + "]");

$modal.on("expose:open", function() {

$modal.addClass("is-visible");
$modal.trigger("expose:opened");
});

$modal.on("expose:close", function() {

$modal.removeClass("is-visible");
$modal.trigger("expose:closed");
});

$trigger.on("click", function(e) {

e.preventDefault();
$modal.trigger("expose:open");
});

$modal.add( $modal.find(".close") ).on("click", function(e) {

e.preventDefault();

// if it isn't the background or close button, bail
if( e.target !== this )
return;

$modal.trigger("expose:close");
});

return;
}

$("#Popup").expose();

// Example Cancel Button

$(".cancel").on("click", function(e) {

e.preventDefault();
$(this).trigger("expose:close");
});


CSS

.Modal {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
visibility: hidden;
}

.Modal .content {
position: absolute;
left: 50%;
top: 30%;
width: 50%;
padding: 50px;
border-radius: 3px;
background: #fff;
transform: translate(-50%, -30%) scale(0);
}

.Modal .close {
position: absolute;
top: 8px;
right: 8px;
display: block;
width: 18px;
height: 18px;
padding: 5px;
line-height: 18px;
border-radius: 50%;
text-align: center;
cursor: pointer;
background: #2ecc71;
color: #fff;
}

.Modal .close:before { content: '\2715'; }

.Modal.is-visible {
visibility: visible;
background: rgba(0, 0, 0, 0.5);
-webkit-transition: background .35s;
-moz-transition: background .35s;
transition: background .35s;
-webkit-transition-delay: .1s;
-moz-transition-delay: .1s;
transition-delay: .1s;
}

.Modal.is-visible .content {
-webkit-transform: translate(-50%, -30%) scale(1);
-moz-transform: translate(-50%, -30%) scale(1);
transform: translate(-50%, -30%) scale(1);
-webkit-transform: transition: transform .35s;
-moz-transform: transition: transform .35s;
transition: transform .35s;
}



.button {
display: block;
width: 150px;
height: 45px;
line-height: 45px;
margin: 125px auto 0;
border-radius: 3px;
text-align: center;
text-decoration: none;
background: #2ecc71;
color: #fff;
}
input[type="text"]
{
width: 100%;
border-radius: 50px;
border: 1px solid #ccc;
padding: 09px 0px;
outline: none;
margin-bottom: 15px;


}


Please help me in this.

Answer

You had an e.preventDefault(); that was blocking your form-action. SImply remove it from the modal click event listener. Everything will work as expected. No additional code or triggering required.

Working: https://jsfiddle.net/f1wh41fm/2/

Change this

$modal.add( $modal.find(".close") ).on("click", function(e) {

    e.preventDefault();

    // if it isn't the background or close button, bail
    if( e.target !== this )
      return;

    $modal.trigger("expose:close");
  });

to

$modal.add( $modal.find(".close") ).on("click", function(e) {

    //e.preventDefault();

    // if it isn't the background or close button, bail
    if( e.target !== this )
      return;

    $modal.trigger("expose:close");
  });

EDIT

For input-cursor indentation as you requested, Use the text-indent property: :

input {
  text-indent:20px;
}