I have the following button:
<div class="form-group">
<button onclick="assign_all()" class="btn btn-default">Vælg alle</button>
</div>
Now this calls a JavaScript function called assign_all
This works fine however when it is done executing the JavaScript it simply tries to load a page. Which is fairly odd (its like if you click on an A tag)
As you can see below nothing in my javaScript indicates that it should reload / load a page:
function assign_all() {
var info = [];
var i = 0;
$('.user_list').each(function () {
if ($(this).hasClass('show')) {
info[i] = $(this).find('.user_id').val();
i++;
}
})
}
Can anyone tell me why this is happening?
It's because the default button element's type attribute is set to submit. Your button element is attempting to submit a form. Simply give it a type of button:
<button onclick="assign_all()" class="btn btn-default" type="button">...</button>
Add type="button" to your button tag. it must solve the issue
you can do this also
<button onclick="assign_all();return false;" class="btn btn-default">Vælg alle</button>
Related
I have dug and dug for a few hours today without much luck. My language is PHP and my javascript skills are not that great I am learning.
I have a list of buttons, each with their own value. When the button is pressed I would like for it to send the value of that button to a variable so the right file is loaded.
I know that this has got to be a simple thing but it's beyond me right now.
Code:
<button type="button" id="myButton" onClick="setval('shannen')" class="btn btn-primary cd-btn">VIEW</button>
<button type="button" id="myButton" onClick="setval('fall-features')" class="btn btn-primary cd-btn">VIEW</button>
var content_div = document.getElementsByClassName("cd-panel-content");
$(document).ready(function() {
setValue();
$("#myButton").on('click',setValue)
}) console.log(mysample);
function setValue() {
mysample=null;
var mysample=$("#myButton").val();
var mysample=mysample+".html";
console.log(mysample);
$(".cd-panel-content").load("emails/"+mysample);
When they click it a window opens on the right of the screen displaying an HTML file.
www.jeffcade.com to see the functionality. I have gotten it to work with one variable but then it will not change when a different button is pressed.
You're calling a "setval()" function with one argument, but you've written a "setValue()" function with no arguments. You could try changing your function to:
function setval(mySample) {
mySample=mySample+".html";
console.log(mySample);
$(".cd-panel-content").load("emails/"+mySample);
}
I have a button on my page that when clicked should redirect to another view based on an Action in my controller, but when clicked it does not do anything... I have the same html syntax with another button on another view and it works.... so here is the broken button:
<input type="button" class="btn btn-info btnArchive clearButton" value="Clear Search" onclick="location.href='#Url.Action("ClearArchiveFilter","ApplicantRecords", new { area = "" })'" />
Here is the same button but with a different action on another view of mine that works:
<input type="button" class="btn btn-info indexBtns" value="Clear Search" onclick="location.href='#Url.Action("ClearFilter","ApplicantRecords", new { area = "" })'" />
However, if instead of using inline onclick events for the broken button I used JS as a workaround and it works fine:
<script type="text/javascript">
$(document).ready(function (e) {
$('.clearButton').click(function (e) {
location.href = '#Url.Action("ClearArchiveFilter","ApplicantRecords")';
});
});
</script>
Here is the ClearArchiveFilter method in my ApplicantRecords Controller:
public ActionResult ClearArchiveFilter()
{
Session.Clear();
return RedirectToAction("Archive");
}
Just a quick method to clear a session.
So my question, is that why doesn't my button work? Am I missing something really small? It is just striking me as weird that one button with the same syntax works and the other doesn't... I will stick with the JavaScript method if this can't be explained/resolved.
I have checked spelling multiple times so that is not the issue (at least I hope not and I overlooked a spelling mistake multiple times)
Thanks in advance.
I have this portion of code that creates a button group:
<div class="btn-group btn-group-lg">
<button id = "Image" type="button" class="btn btn-primary">Click1</button>
<button id = "Text" type="button" class="btn btn-primary">Click2</button>
</div>
I want to make it dynamic, in a sense that each button will take me to a different URL. I have come across this post:
How do I navigate to another page on button click with Twitter Bootstrap?
However, I cannot use <a></a> when dealing with a button group (or at least cannot think of a way to do so). So I guess I need a JS file with a function? How do I do that with AngularJS?
You can use a simple Javascript function such as:
go(path) {
window.location = path;
}
Then call it from your button with:
ng-click="go('index.html')"
I have a button that triggers the below jquery function. Currently the function works and hides/shows the form element as desired. However it is tripping the html 5 validation (which I want on submit). Is there a reason it is triggering and a way I can prevent this? I experimented with having a return at the end of the function but no luck. Also neither form is required as part of the validation. I keep getting a pop up telling me previous items are required when I hide/show the form elements..
<button class="col-sm-2 btn btn-success" onclick ="hideFormField ()">Hide</button>
function hideFormField (){
if(!$("#trail").is(":visible"))
{
$("#trail").show();
$("#blazers").hide();
}else{
$("#trail").hide();
$("#blazers").show();
}
}
Try this:
<button class="col-sm-2 btn btn-success" onclick ="hideFormField ();return false;">Hide</button>
Try:
<button class="col-sm-2 btn btn-success" onclick="hideFormField();event.preventDefault();">Hide</button>
Jonathan Lonowski was correct in his comment. Buttons are submit-type by default so you need to explicitly define a button with type="button" attribute if you don't want any additional effects when the button is clicked.
A small example that illustrate the activation of HTML5 form validation through default button behavior is in this jsfiddle: http://jsfiddle.net/zk3jr9vn/
by default button is submit type so add Type to button
like
<button type="button" class="col-sm-2 btn btn-success" onclick ="hideFormField ()">Hide</button>
I'm trying to piece together a basic page using PHP & JS to take me to a google map related to a search box. However the JS script will only run with an alert, no other function type will run:
The address bar just changes to "Domainx.com/?searchButton="
The code for the button is:
<button class="btn btn-success btn-lg" name="searchButton" onclick="searchFunction()">Search </button>
and directly under it (within the body) is have my script:
<script>
function searchFunction() {
alert("pressed");
}
</script>
When i change the alert to anything else i.e. window.location.href = "http://www.google.com"
it simple stays on the page and only the address bar changes.
You probably wanted to use window.open("http://www.google.com/search?q=the_meaning_of_life");
If you wanted to use reload onclick, the following should work:
<input type="button" value="Reload Page" onClick="window.location.reload()">
There is an example of how to dow it here - http://www.mediacollege.com/internet/javascript/page/reload.html