I want to save the input of some fields in variables after a click on a button (I am using Bootstrap btw). This is my function:
<script>
function test () {
var test1 = document.getElementById("nameown").value;
javascript.alert( 'test1' )
}
</script>
and this is my button:
<div id="button">
<onclick="test()" class="btn btn-success btn-large">
Example...
</a>
</button>
</div>
When I click on the button nothing happens...
As a annotation: I am a HTML and JavaScript beginner.
Let's see..
There's no element with an id of nameown.
If anything, it would be window.alert(), but just alert() is fine.
You're alerting the literal string "test1" instead of the variable.
onclick is not an element.
You don't have an opening a tag.
You don't have an opening button tag.
I think this is what you were going for:
<script>
function test() {
var test1 = document.getElementById("button").value;
alert(test1);
}
</script>
<div id="button" onclick="test()" class="btn btn-success btn-large">
Example...
</div>
There are more elegant ways of doing this, as well as shortcuts, but you'll get there if you stick with it.
Your HTML is incorrect. It should look like this:
<div id="button" onclick="test()" class="btn btn-success btn-large">
Example...
</div>
or
<button onclick="test()" class="btn btn-success btn-large">
Example...
</button>
I was really caught up in that mess of HTML and didn't pay attention to the script. It is pretty bad. Let me give you a few pointers. Start with HTML and learn the basics. wcshcools is a start. Then move on to javascript like that you were attempting above. You probably wanted something like this:
<script>
function test() { //Create the function test
var test1 = document.getElementById("nameown").value; //Get the element with id="name own" and assign it to a variable named "test1"
console.log(test1); //log the value of the variable "test1"
}
</script>
I went with console.log because it is a way better way to test code. For instance if you looped that function you would have a problem in some browsers. To view the console check out firebug for firefox or use the dev console in Chrome or Safari. Learn the dev console. It will come in handy.
you shouldn't have a < before onclick. Is that a typo? Is there a lot of other extra stuff there too?
<div id="button" onclick="test()" class="btn btn-success btn-large">
Example...
</div>
You're missing the tag "a"
<div id="button">
<a onclick="test();" class="btn btn-success btn-large">
Example...
</a>
</div>
and the JS:
function test () {
var test1 = document.getElementById("nameown").value;
alert( 'test1' );
}
You should also change your javascript to the following to alert the value of the element with id nameown:
<script>
function test() {
var test1 = document.getElementById("nameown").value;
alert( test1 );
}
</script>
that is, change javascript.alert( 'test1' ) to alert( test1)
1 ) Your html is incorrect :
instead of
<onclick="test()" class="btn btn-success btn-large">
use
<button onclick="test()" class="btn btn-success btn-large">
2) Use alert() instead of javascript.alert().
3) Add an element with id as "nameown".
In addition Use browser developer tool to know more about javascript errors in console or use Firebug For firefox
http://getfirebug.com/
Related
I have a button that I want to attach a click listener to, but everytime the code runs, it throws a console error
jquery.js:4435 Uncaught TypeError: ((n.event.special[g.origType] || (intermediate value)).handle || g.handler).apply is not a function
Here's the js code that triggers the error, the first line runs fine, the second line is the one that causes the error
$toolbar.off('click', '.btn-save'); // $toolbar is assigned $("#toolbar") on init
$toolbar.on('click', '.btn-save', function(e){
saveData(0);
});
What confuses me is, if I run that bit of code manually through the console, I get no errors
Here's the HTML
<div class="row" id="toolbar">
<div class="col-lg-12">
<button type="button" class="btn btn-primary btn-save">Save</button>
<button type="button" id="btnCancel" class="btn btn-default btn-cancel">Cancel</button>
</div>
</div>
I have found the problem, below my listeners, there's an unrelated listener that I attached
$(document).on("click", "#btn-back", Views.Editor.close);
The problem here is that Views.Editor.close is the wrong method name.
When I changed the method name, the error disappears
I didn't realize that an unrelated listener can affect others
Ah. looks like you may have your JQuery params wrong if I've understood the question/ what you're trying to do.
DOM events should be appended to items on
html:
<div class="row">
<div class="col-lg-12">
<button id="save-btn-id" type="button" class="btn btn-primary btn-save">Save</button>
<button type="button" id="btnCancel" class="btn btn-default btn-cancel">Cancel</button>
</div>
</div>
js:
$(document).ready(function() {
$('#save-btn-id').click(function(evt) {
saveData(0);
});
});
From what I see at jQuery's API docs for their .off() function & in the code example above, it looks like the function isn't being passed as the 3rd parameter to the .off() function. So it's possible that the jQuery library is complaining that it can't find a function to remove it.
See: http://api.jquery.com/off/
Try this & see if it helps:
function clickListener(e){
saveData(0);
};
$toolbar.off('click', '.btn-save', clickListener);
$toolbar.on('click', '.btn-save', clickListener);
Try this: https://jsfiddle.net/jorge182/a1y9abcj/2/
toolbar = $("#toolbar")
$(toolbar).off('click', '.btn-save'); // $toolbar is assigned $("#toolbar") on init
$(toolbar).on('click', '.btn-save', function(e){
saveData();
});
function saveData(){
alert();
}
I am new to javascript and jQuery. I am writing the following code to edit a portion of my web page. It is working perfect when I click on #edit_case first time but after clicking #cancel that returns me back. The #edit_case does not work.. What is wrong with this piece of code?
$("#edit_case").click(function(){
var oldHTML = $("#editable").html();
var newHTML;
newHTML = "<div class='panel-body' id='edit_fields'></div> <div class='panel-footer' id='footer-bottons'></div>"
$("#editable").html(newHTML);
$('#footer-bottons').html('<div class="text-right"><button class="btn btn-primary btn-sm" id="save">Save</button> <button class="btn btn-default btn-sm" id="cancel">Cancel</button></div>');
$("#cancel").click(function(){
$("#editable").html(oldHTML);
});
});
My HTML markup is like:
<div class="panel panel-default" id="editable">
<div class="panel-body">
Drop-down code
<li><a id='edit_case'>Edit</a><li>
Panel-Body Code...
</div>
Panel footer
</div>
When I click on Edit, the same text input fields appear as that on stackoverflow.com. On first time, Edit link works fine but when I cancel Edit both Edit and Delete do not work. I think click event is not occurring as I also have tried a check on it by using alert('test') and it isn't appeared after clicking on #cancel. Is this a problem of unbinding event? If it is, how would I correct it?
since the cancel button was not in the dom at first and since you are removing the edit_case, you need to do it with an ".on" put this code in the loading, not in the click event. if you put it in the click event, you will have multiple event that will be registered.
with working fiddle:
https://jsfiddle.net/2hjr6g94/
$(document).on('click','#cancel',function(){
$("#editable").html(oldHTML);
});
var oldHTML = $("#editable").html();
$(document).on('click','#edit_case',function(){
var oldHTML = $("#editable").html();
var newHTML;
newHTML = "<div class='panel-body' id='edit_fields'></div> <div class='panel-footer' id='footer-bottons'></div>"
$("#editable").html(newHTML);
$('#footer-bottons').html('<div class="text-right"><button class="btn btn-primary btn-sm" id="save">Save</button> <button class="btn btn-default btn-sm" id="cancel">Cancel</button></div>');
});
After running it once, the new html is in the variable value of "oldHtml". You need to store the old HTML outside of this functionality, so it is preserved.
Here is the process you are doing right now:
Get html.
Load new html.
Get html (now new html).
load oldHtml (still new html).
oldHtml gets overridden and stored everytime this function is called.
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
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>
How would I go about making the button open in a new window, emulating "a href, target = _blank"?
I currently have:
<button class="button" onClick="window.location.href='http://www.example.com';">
<span class="icon">Open</span>
</button>
The button isn't in a form, I just want to make it open in a new window.
Opens a new window with the url you supplied :)
<button class="button" onClick="window.open('http://www.example.com');">
<span class="icon">Open</span>
</button>
I couldn't get your method to work #Damien-at-SF...
So I resorted to my old knowledge.
By encasing the input type="button" within a hyperlink element, you can simply declare the target property as so:
<a href="http://www.site.org" target="_blank">
<input type="button" class="button" value="Open" />
</a>
The 'target="_blank"' is the property which makes the browser open the link within a new tab. This attribute has other properties, See: http://www.w3schools.com/tags/att_a_target.asp for further details.
Since the 'value=""' attribute on buttons will write the contained string to the button, a span is not necessary.
Instead of writing:
<element></element>
for most HTML elements you can simply close them with a trailing slash, like so:
<element />
Oh, and finally... a 'button' element has a refresh trigger within it, so I use an 'input type[button]' to avoid triggering the form.
Good Luck Programmers.
Due to StackOverflow's policy I had to change the domain in the example:
https://meta.stackexchange.com/questions/208963/why-are-certain-example-urls-like-http-site-com-and-http-mysite-com-blocke
<input type="button" onclick="window.open(); return false;" value="click me" />
http://www.javascript-coder.com/window-popup/javascript-window-open.phtml
You can acheive this using window.open() method, passing _blank as one of the parameter. You can refer the below links which has more information on this.
http://www.w3schools.com/jsref/met_win_open.asp
http://msdn.microsoft.com/en-us/library/ms536651(v=vs.85).aspx
Hope this will help you.
If you strictly want to stick to using button,Then simply create an open window function as follows:
<script>
function myfunction() {
window.open("mynewpage.html");
}
</script>
Then in your html do the following with your button:
Join
So you would have something like this:
<body>
<script>
function joinfunction() {
window.open("mynewpage.html");
}
</script>
<button onclick="myfunction()" type="button" class="btn btn-default subs-btn">Join</button>