<button type="submit" class="btn btn-primary submitSignUp" >Sign Up</button>
Why does this not work? I have a different page called signUp and on-click of the sign-up button, I want it to go to the signUp page.
You should not place <button> inside <a> element as <button> consumes mouse events preventing <a> element click generation.
So try just this
Sign Up
to have the same result I would suggest you to change your code to this:
<a class="btn btn-primary submitSignUp" href="signUp.html">Sign Up</a>
Related
I have a page with two buttons connected to two different bootstrap modals. They were all working fine but all of a sudden stopped. Whenever I click on either button now, the page just keeps refreshing as opposed to displaying the respective modal. I do not know what the problem is as there is no error in the console.
The site is hosted on https://storzy.netlify.app/
I have searched high and low but can't seem to find what might be stopping the modal from displaying correctly now.
Please how do I go about stopping the page from refreshing and showing the correct modal instead?
Thank you.
change the form to div for your login and signup parents
<div class="form-inline mt-3 mt-lg-0">
<button class="btn btn-outline-primary" data-toggle="modal" data-target="#loginModal">login</button>
<button class="btn btn-primary ml-3" data-toggle="modal" data-target="#signupModal">Sign up</button>
</div>
If the button is within a form, the default behavior is submit. If the button is not within a form, it will do nothing.
Hence to avoid the page refresh, add type="button" to the buttons to prevent it.
<button class="btn btn-outline-primary" data-toggle="modal" data-target="#loginModal" type="button">login</button>
<button class="btn btn-primary ml-3" data-toggle="modal" data-target="#signupModal" type="button">Sign up</button>
When I hover over a bootstrap button on my website it doesn't show the link in the bottom left corner in chrome. Am I missing something here? Here is the code I am currently using for the button.
<button type="button" class="btn btn-primary navbar-btn m-l-15 m-r-15" onclick="location.href='{$relative}/upload'">{translate c='menu.upload'}</button>
You can use an <a> element with a role of button and style it to look like a button but using the same classes that you are currently using.
Only caveat to this would be that you should determine the correct element to use in your situation - for example - a link (a element) should navigate you to a new location or context - whilst a button should be used if it does something in the same location / context.
Also - if the bottonhad other functionality that navigating to the desired location - you will need to re-introduce the click handler and apply logic to perform that function.
<a
href="{$relative}/upload"
role="button"
class="btn btn-primary navbar-btn m-l-15 m-r-15"
>{translate c='menu.upload'}</a>
You can replace it with a link , and style it.
Have a visit to Bootstrap website and you will find Details here.
You can put your link as follows and it may solve your problem
<a href="your_link_here">
<button type="button" class="btn btn-primary navbar-btn ml-5 mr-5">
{translate c='menu.upload'}
</button>
</a>
First change the margin-left and margin-right from m-l-15 and m-r-15 to ml-1 and mr-1. In bootstrap ml and mr class only take values from 1 to 5. It don't takes the values more than 5 in class. You have to give it to css.
Try This:
<a role="button" class="btn btn-primary navbar-btn ml-5 mr-5"
href="{$relative}/upload">{translate c='menu.upload'}</a>
I have written an MVC5 Html extension to determine whether a button I have on screen is disabled.
It is as below:
public static HtmlString IsButtonEnabled(this HtmlHelper html, bool buttonEnabled)
{
return new HtmlString(buttonEnabled ? "" : "disabled=\"disabled\"");
}
My cshtml is as below:
<div class="col-sm-12">
<a class="btn btn-default btn-block btn-metro" #Html.IsButtonEnabled(Model.IsMyButtonEnabled)
onclick="location.href='#Url.Action("Index","MyController")'">
<img src="~/images/myImage.png"> <span class="h2">My Button</span>
</a>
</div>
The button is getting disabled as expected - however, due to using the onclick allows it to still be clicked. Is it possible to use my Html Extension with a Html.ActionLink?
I realise I could quite easily prevent the click using some js on the page - however, I would like to avoid that if possible.
UPDATE
The extension method is used by 10 different buttons on the screen. The generated markup for one of the buttons is as below:
<div class="col-sm-12">
<a class="btn btn-default btn-block btn-metro" disabled="disabled" href="/MyController/Index">
<img src="/myApp/images/myImage.png"> <span class="h2">My Button</span>
</a>
</div>
With Stephen comment below I change the on click to just be href - however, even though the button is disabled I can still click on it and the site navigates to the url specified
You could change the "a" tag to "button" tag. The URL tag is not meant to be disabled.
<div class="col-sm-12">
<button class="btn btn-default btn-block btn-metro" #Html.IsButtonEnabled(Model.IsMyButtonEnabled)
onclick="location.href='#Url.Action("Index","MyController")'">
<img src="~/images/myImage.png"> <span class="h2">My Button</span>
</button>
</div>
When I start translating on my web page (right click -> Translate to English), and then click on submit button on my form, the text in the button is multiplied. I realised that google translate wraps text in my button in double font tags, and if I click on the button more than one time, the text will mulitply.
Here is code before translation:
<button type="button" class="btn btn-success-ox btn-block btn-spin">
Update app details
</button>
After translatation and clicking on button 3 times:
<button type="button" class="btn btn-success-ox btn-block btn-spin">
<font><font class="">
Update app details
</font></font>
<font><font>
Update app details
</font></font>
<font><font>
Update app details
</font></font>
</button>
I am interested if there is way to intercept a function that adds font tags, or somehow to not add font tags at all?
Add the 'notranslate' class to the element you wish to block from containing the Google <font> tag:
<button type="button" class="btn btn-success-ox btn-block btn-spin">
<span class="notranslate">Update app details</span>
</button>
I'm having a problem with a button I have created, basically when I click the button it appears to be very unresponsive only firing about 50% of the time. At the moment I have a span tag inside the button and I think that maybe this is having an effect on the button click. Would this be right and if so what would be the best way to prevent the span being clicked?
Button markup:
<button class="btn view-newest btn-inverse is-active">
<i class="icon icon-star"></i>
<span>Click the button</span>
</button>
What I then have is a simple .on click event?
The <span> tag shouldn't be interfering with the jQuery click event listener if this is all the code you've got; it doesn't do anything fancy.
Here's a JSFiddle demonstrating this:
<button class="btn view-newest btn-inverse is-active">
<i class="fa fa-star"></i>
<span>Click the button</span>
</button>
<div id="timesClicked">Times clicked: </div>
<script>
clicked = 0;
$(".btn").on('click', function() {
clicked++;
$("#timesClicked").text("Times clicked: " + clicked)
});
</script>
I'd check the console for errors, make sure that there's only one event listener and that it's being called in the right place, and check to see if there's any loose Javascript or CSS rules affecting the button.