I have the following form submit code
<div class="top-links">
<ul>
<li>Sign In
<div class="top-link-section">
<form id="top-login" role="form" action="">
<div class="input-group" id="top-login-username">
<input type="text" class="form-control" name="username" placeholder="Username" required>
</div>
<div class="input-group" id="top-login-password">
<input type="password" class="form-control" name="password" placeholder="Password" required>
</div>
<div class="input-group" id="top-login-remember">
<label><input type="checkbox" value="yes" name="remember_me"> Remember me</label>
</div>
<button class="btn btn-danger btn-block" type="submit">Sign In</button>
</form>
</div>
</li>
</ul>
</div>
If the user does not click on any anchor link in the page before sign in, then the form login works fine.
Working fine
http://example.com/index.php
However, if the page url become something like (with anchor # behind the url address)
http://example.com/index.php#
as I got some links that is of
Events
If user click Events to see some popup before they login, the login form will not work, How do I handle such scenario to ensure login still proceed even with # at the url address.
--
Assume after login always goes back to
example.com/index.php but I prefer if it can be example.com without the index.php
If below code puts # at the end of the page then you can make it to return false to do nothing when user clicks on this click and just open the popup.
Events
You can use pure JS or jQuery to achive the same. So modify the HTML of those elements like this,
Events <!-- for plain JS -->
Events <!-- for plain jQuery -->
At JS side you need to add following:
<script>
function eventClickBtn() {
// Your logic to open popupbox
return false;
}
// For jQuery
$('.eventClickBtn').click(function(e){
e.preventDefault();
});
</script>
By using event.preventDefault(); default action of the event will
not be triggered, same goes for plain JS. If you return false it won't fire up the hyperlink mentioned in href
Related
There are so many answers for this on stackoverflow. But unfortunately none of them is working for me. I will tell you what I have tried one by one.
<form (keydown.enter)="$event.preventDefault()" ...>
<button (keyup.enter)="skillsHandleEnter($event, skillString)"></button>
#Component(...)
class MyComponent {
skillsHandleEnter(event, skillString) {
event.preventDefault();
// ... your logic
}
}
But none of the approach is working. I am using ngx-tags-input which allows me to apply some tags separated by enter key. This creates a problem. The moment I press Enter key, my form gets submitted with just one tag that i was able to enter. Trust me I've tried almost everything to prevent this and also I dont want to over complicate the things. Please ignore naming conventions. I will fix them later.
Here's my blog.component.html before implementing any solution.
<form [formGroup]="editorForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="exampleInputEmail1">
<h3>Title</h3>
</label>
<input type="text" class="form-control" id="inputTitle" aria-describedby="emailHelp" placeholder="Enter a question that explains your problem exactly">
<br>
<label for="editor">
<h3>Editor</h3>
</label>
<quill-editor [styles]="editorStyle" [modules]="config" formControlName="editor"></quill-editor>
</div>
<ngx-tags-input class="form-control input-lg" name="tags"></ngx-tags-input>
<button class="btn btn-primary mt-3 mb-3">Submit</button>
</form>
Please correct me.
I followed these two simple steps:
1) I added an attribute in my form tag.
(keydown.enter)="$event.preventDefault()"
2) Added (click) listener on the submit button
So the entire HTML code looks like:
<div class="container">
<div class="row pt-5">
<div class="col-md-12 col-lg-12 col-sm-12 bg-light">
<form [formGroup]="editorForm" (keydown.enter)="$event.preventDefault()">
<div class="form-group">
...
</div>
<button class="btn btn-primary (click)="onSubmit()">Submit</button>
</form>
</div>
</div>
</div>
The problem was that I was using click listener with the form tag itself along with keydown.enter.
the html button element has a three valid type
submit : the button submits the form data to the server. This is the default 🔥🔥 if the attribute is not specified, or if the attribut is dynamically changed to an empty or invalid value.
reset: The button resets all the controls to their initial values,
like . button: The button has no default
behavior and does nothing when pressed. It can have client-side
scripts associated with the element's events, which are triggered
when the events occur.
button: the button has no default behavior and does nothing when
pressed. It can have client-side scripts associated with the
element's events, which are triggered when the events occur.
so to solve the probleb just set the button type to button like this
<button type="button" (click)="onSubmit()" class="btn btn-primary mt-3 mb-3">Submit</button>
The only reason to use ngSubmit is to submit the form on "enter".
So you can remove the ngSubmit event listening and replace it by the click event of the button. I also removed the submit emitting from the button by adding type="button".
<form [formGroup]="editorForm">
<div class="form-group">
<label for="exampleInputEmail1">
<h3>Title</h3>
</label>
<input type="text" class="form-control" id="inputTitle" aria-describedby="emailHelp" placeholder="Enter a question that explains your problem exactly">
<br>
<label for="editor">
<h3>Editor</h3>
</label>
<quill-editor [styles]="editorStyle" [modules]="config" formControlName="editor"></quill-editor>
</div>
<ngx-tags-input class="form-control input-lg" name="tags"></ngx-tags-input>
<button type="button" (click)="onSubmit()" class="btn btn-primary mt-3 mb-3">Submit</button>
</form>
I have just started using GWTBootstrap. I have set up my login page and now I want to:
If login was unsuccessful stay on page
If value returned from the database is "1" go to htmlpage1.html
If value returned from the database is "2" go to htmlpage2.html
In this way if the wrong login information is entered I do not go to the next page and, if successful login, people with different access levels are presented with different information.
Is there a tutorial that covers this please?
My html code is:
<form class="form-signin">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="text" class="input-block-level" placeholder="Email address">
<input type="password" class="input-block-level" placeholder="Password">
<label class="checkbox">
<input type="checkbox" value="remember-me"> Remember me
</label>
<button id="SignIn" class="btn btn-large btn-primary" type="submit">Sign in</button>
<script type="text/javascript">
document.getElementById("SignIn").onclick = function () {
location.href = "htmlpage1.html";
};
</script>
</form>
</div> <!-- /container -->
You need to create an AJAX request inside on-click method in order to get some response from a POST url, based on it, you will redirect to the correct html.
Anyway, is better to use some framework to do that.
So I've got a form. I'm utilizing tag helpers. The form only has one text input, and I'm trying to use the Bootstrap "input-group-addon" div as the submit button for this small form.
I'm running into strange behavior. If I just hit the enter key after typing something into the input, the data binds fine over into the controller action.
However, if I attach an onclick listener to the div, and run getElementById('Form').submit();, when I click the div, it still takes me to the controller action, but none of the data is bound to the incoming for model.
Razor form:
<form asp-controller="Search" asp-action="HomeBuyersSearchSubmit" id="Home_Buyers_Search_Form">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="input-group">
<input asp-for="Query" class="form-control" placeholder="City, Neighborhood, Address, Postal Code or MLS #" />
<div onclick="javascript: document.getElementById('Home_Buyers_Search_Form').submit();" class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
</div>
</div>
</div>
</div>
</form>
Controller action:
[HttpPost]
public IActionResult HomeBuyersSearchSubmit(SearchFilter filter)
{
return RedirectToAction("Index", filter);
}
I found a work around, but I'd still be curious in knowing what is going on.
For those interested, what I did was changed the "input-group-addon" to a button, and made some slight modifications to the padding and margins to make the button appear like the div counterpart. This also required Bootstrap's "form-inline" on the form. Data binding works as expected now.
<form asp-controller="Search" asp-action="HomeBuyersSearchSubmit" id="Home_Buyers_Search_Form" class="form-inline">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input asp-for="Query" class="form-control" placeholder="City, Neighborhood, Address, Postal Code or MLS #" />
<button type="submit" class="input-group-addon"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</div>
</form>
I got my website over on the Github Pages Service. I'm trying to implement the FormSpree free contact form but after you submit the form, it redirects you to a different website. Something I'd like to avoid. So I looked it up on the internet and of course others wanted to get rid of it too (I omitted my email in the below picture).
This is the form I got above but it doesn't actually work at all. It worked before I tried to fiddle with it though.
Here is what the form looks like by default from FormSpree:
<form action="//formspree.io/your#email.com"
method="POST">
<input type="text" name="name">
<input type="email" name="_replyto">
<input type="submit" value="Send">
</form>
Here is my version (which worked fine before I tried to get around the redirect)
<div class=modal-body style="background-color: #454545">
<p>Please use the form below to contact us regarding feedback or any questions you may have!
We will never use the information given below to spam you and we will never pass on your
information to a 3rd party.</p>
<p>As we are using <a target="_blank" href="http://formspree.io">FormSpree</a> for this form
please consult their privacy policy for any questions regarding this matter.</p>
<form id="contactform" method="POST">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Name</span>
<input name="form-name-input" type="text" name="name" class="form-control" required>
</div>
<div class="input-group">
<span class="input-group-addon">Email</span>
<input name="form-email-input" type="email" name="_replyto" class="form-control" required>
</div>
<div class="input-group">
<span class="input-group-addon">Subject</span>
<input name="form-subject-input" type="text" name="subject" class="form-control" required>
</div>
<div class="input-group">
<span class="input-group-addon">Description</span>
<textarea name="form-description-input" name="description" class="form-control" rows="4" cols="60" required></textarea>
</div>
<input type="text" name="_gotcha" style="display:none" />
<input class="btn btn-success" data-dismiss="modal" type="submit" id="form-submit-btn" value="Submit">
<input type="hidden" name="_next" value="http://www.dynamicrealities.net" onclick="FormSentConfirmation()"/>
</div>
<script>
var contactform = document.getElementById('contactform');
contactform.setAttribute('action', '//formspree.io/' + 'dynamicrealities#gmail.com');
</script>
</form>
</div>
<div class="modal-footer" style="background-color: #333333">
<button class="btn btn-danger btn-bg" data-dismiss="modal" type="button" id="form-dismiss-btn" onclick="">Close</button>
</div>
And when I call _next I want it to execute the following alert:
function FormSentConfirmation() {
alert('Thanks for the email, we\'ll be in touch promptly.');
}
When I press the Submit button, all that happens is that the form goes away but I don't receive any emails. I'm probably just doing this wrong as I am fairly new still to HTML/JavaScript.
Update: The feature available only on paid plans.
Use this hidden input field inside the form for redirection after form submission. You can redirect users to a page that you like or you have created by using this code block.
<input type="hidden" name="_next" value="//site.io/thanks.html" />
replace value with a valid thank-you page URL.
Follow this link for a tutorial on how to use Formspree and also a video demo
Follow their AJAX example at the bottom: https://formspree.io/
$("#sendMessage").on("click", function() {
$.ajax({
url: "//formspree.io/dynamicrealities#gmail.com",
method: "POST",
data: {message: "hello!"},
dataType: "json"
});
});
Remember to include jQuery as well for this to work. Remove the:
var contactform = document.getElementById('contactform');
contactform.setAttribute('action', '//formspree.io/' + 'dynamicrealities#gmail.com
and replace it with my code and change the selector. Or use $("form").on("submit"...
Here is my example, which sends you a mail and prompts an alert for the user: http://jsfiddle.net/228d4snb/
Do anything you'd like to do right before that return false;
You can put the form in an iframe so only the iframe gets redirected. What I did was create a separate html doc with just the contact form html (and any associated scripts) and then in my actual contact.html page I put:
<iframe src="contact-form.html" class="container"></iframe>.
Style the iframe to the appropriate size and with no border and it should work swimmingly.
Similar to the following question (note the following question is related to symfony 2.3 - I don't know what that is, I'm just using HTML) :
How to disable html5-validation for specific buttons in symfony 2.3
Is it possible to bypass HTML5 validation (required) for a specific button in HTML?
<form name="loginform" autocomplete="off" id="loginform" action="" method="post">
<nav class="clearfix">
<ul class="clearfix">
<li><input class="username" type="text" id="username" required placeholder="Username"></li>
<li><input class="password" type="password" id="password" required placeholder="Password"></li>
<li><button name="register" class="register">Register</button>
<button name="login" class="login">Log in</button></li>
</ul>
Menu
</nav>
</form>
I don't need validation if register button is clicked.
if(isset($_POST['register'])) {
header("Location: register.php");
}
Edit: A way of doing this without changing the structure of the form or changing the button :).
Add a click event listener to the register button. When it is clicked, do whatever you want to do (redirect with window.location = "....."), and return false to prevent default submission:
$("#register").on("click", function() {
alert("I am executed before the HTML5 check!");
return false;
});
You can see an example here: http://jsfiddle.net/89z4Lu91/
To the register button only use register or put the botons out and to the inputs submit add form attr