After setting up a simple box dialog form I would like to keep the box open after submitting the form, but the box keeps closing.
After a little search into the jquery docs I came with preventDefault method on the event. I added that to the code, but the box keeping closing.
Here is the code:
$(document).ready(function(e) {
$('#toggle').click(function(e) {
$('#box').toggleClass('max');
e.preventDefault();
});
$('#close').click(function(e) {
/* $('#box').remove();*/
});
});
It did not work, I've tried the stopPropagation() and that did not worked either.
someone can spare a hint, please?
the html:
<div id="box" class="min">
<span id ="toggle" class="fa fa-window-restore">
<b>Open Dialog</b>
</span>
<form action="/conversations/3/reply" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓" />
<input type="hidden" name="authenticity_token" value="VgKXI1p4MumSlvZF51pbXYKMMRLFKs0Us4NUB2+O7VZalzk++QDNQ5SsQMzvt4HlgUnlMa3ux54IDc3R/tGZhA==" />
<textarea name="body" id="body" cols="3" class="form-control" placeholder="Type something..." required="required"></textarea>
<button name="button" type="submit" class="btn_green">Send Message</button>
</form>
</div>
You need to call preventDefault() on the form's submit event in order to prevent the page from being replaced by the form submission.
document.querySelector('form').addEventListener('submit', e => e.preventDefault());
Related
I am trying to post the form from modal. To keep the current page, I target post to the iFrame.
Which trigger is triggered after posting the form? Or any other solution to close modal after post?
OnSubmit, as seen in the code, do not work.
<div class="modal-body">
<form method="post" id="modalForm" action="/Test/TestForm" target="myframe">
<input type="text" name="id" required />
<input type="text" name="name" required />
<input type="submit" value="Post" onsubmit="alert('after post - close modal!');" />
</form>
</div>
You can post form via Ajax and get the begin and end request by using the following approach:
<script>
$(document).ajaxStart(function () {
//display loading, etc.
});
$(document).ajaxComplete(function () {
//hide loading, etc.
});
</script>
anyone can help i have a form, i want do something like this :
http://criminalcase.ha-lab.com/
there is a boutom "Click Here Before Submit", when you click on it you are redirected to the same page(*url dont change), and you can see the bottom submit (*no click here for submit). Thank you in advance for any help ^^
<form method="get" action="?">
id : <input name="id" / size="45"/><br>
Sig : <input name="sig" <br>
<input type="submit" name="submit" value="==>click here befor submit<==" id="submit" />
</form>
what i want is when i click on click here befor submit it will redirect me to to do same page but with boutom submit
Something like this? It's really difficult understand you without code.
$("#showSubmit").click(function(){
$(this).hide();
$("#submitButton").show();
})
.hidden{ display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label>input</label><input type="text"/>
<input type="submit" class="hidden" id="submitButton" value="submit" />
Click here before submit
</form>
I am also trying to understand What Dr House is asking, I would like to slightly modify what JuaRoAI has done, and do something like this, try it and let us know:
$("#showSubmit").click(function(){
$(this).hide();
$("#submitButton").show();
})
.hidden{ display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label>input</label><input type="text"/>
<input type="submit" class="hidden" id="submitButton" value="submit" />
Click here before submit
</form>
I have the following HTML:
<div class="artikelen">
<div>
<div>
<img src="http://mijnmanege.nl/img/artikelen/1.png" alt="Article" />
</div>
<strong>Article</strong>
<span>{artikel_groep} (<span data-artikel-groep-id="1">1</span>)</span>
<img src="/img/v3/main/icons/geld.png" alt="Price" /> 999
<form method="post">
<input type="number" value="1" name="aantal" max="99" min="1" required="required" data-artikel-id="1" data-artikel-groep-id="1" />
<input type="submit" value="Buy" name="submit" />
</form>
</div>
</div>
And the following jQuery:
$(document).ready(function() {
$('.artikelen form').submit(function(e) {
alert('We are in!');
e.preventDefault();
});
});
When I press the submit I get the "We are in" alert and the form gets prevented from being submitted. However when I use $('.artikelen').html(code...); to add exactly the same html code to the class artikelen (without the first and the last ofcourse), it still gets submitted and doesn't even trigger the error.
The console doens't give any errors whatsoever.
Thanks in advance.
And sorry for any bad English, I'm not a native.
you are repacing the form so the event binding is gone, you could use delegate to solve that:
$(document).ready(function() {
$(document).on('submit', '.artikelen form', function(e) {
alert('We are in!');
e.preventDefault();
});
});
The code appears to be hooked up (like this)
jQuery("#contactForm").validationEngine();
because it will validate and raise an error bubble if:
you tab out of required field without any input
you type at least one character into a field that requires more and then click the submit button
But it will not validate and raise an error bubble if you do nothing at all except click the submit button. In that case, it just submits. Once you click in the field or enter anything at all, it seems to work.
What can I be looking for that I've mis-configured?
The HTML:
<form class = "contactform" id = "contactForm">
<fieldset>
<div class="contactform-name contactform-field">
<label class="contactform-label" for="contactform-name">Name:
<br>
</label>
<input class="validate[required,minSize[8]] contactform-input" type="text" id="contactform-name" name="name" />
</div>
<div class="contactform-email contactform-field">
<label class="contactform-label" for="contactform-email">Email Address:<br></label>
<input value class="validate[required,custom[email]] contactform-input" type="email" id="contactform-email" name="contactform-email" />
</div>
<div class="contactform-text contactform-field">
<label class="contactform-label" for="contactform-text">Message:
<br>
</label>
<textarea class="validate[required,minSize[12]]contactform-input" name="text" id="contactform-text" > </textarea>
</div>
<input class="contactform-button" type="submit" name="submit" value="Send" />
</fieldset>
</form>
The JavaScript (it's running in Meteor):
Template.Contact.rendered = function () {
jQuery("#contactForm").validationEngine();
}
I've never used this engine, but from the docs I found that 'attach' will attach the validator to form.submit. Can it be as simple as that?
https://github.com/posabsolute/jQuery-Validation-Engine#attach
EDIT:
You can also do stuff to the submit-event (if the tip above won't help).
Something like this (not tested, but should put you in the correct path):
Template.templateName.events({
'submit': function(event) {
// Prevent the submit with preventDefault()
event.preventDefault();
// Do something to check the submit etc.
}
});
I want to interrupt and prevent a form from submitting using jQuery. Here's my form markup:
<div id="register-box">
<div id="register-box-inner">
<h2>Register</h2>
<form action="/register" method="post" id="register-form">
<p><label for="username">Username:</label><input type="text" name="username"></p>
<p><label for="password">Password:</label><input type="password" name="password"></p>
<p><label for="email">E-mail:</label><input type="text" name="email"></p>
<p><input type="submit" value="Register" class="register"></p>
</form>
</div>
</div>
and my Javascript code thus far:
$('#register-form').submit(function(e){
e.preventDefault();
alert("hi");
});
Problem is, the form still goes through. I wanted to submit the form using AJAX but with a fallback for users who don't have Javascript enabled. No errors pop up in the Javascript console, either.
Try
$("form").live("submit", function() {
alert("hi");
return false;
});
Try returning false from the handler.
$('#register-form').submit(function(e){
e.preventDefault();
alert("hi");
return false;
});
Try:
<p><input type="submit" value="Register" class="register" onclick="submit(); return false;"></p>