I'm trying to save in local storage the information from input. But when I press on "Save" or "Load", it enters in the "if" but not in the functions $('#save').on('click',...) and $('#load')...
if (typeof (Storage) !== "undefined") {
$('#save').on('click', function() {
window.alert("storagecomp");
$('input[type="text"]').each(function() {
var id = $(this).attr('id');
var value = $(this).val();
localStorage.setItem(id, value);
});
});
$('#load').on('click', function () {
window.alert("warnigclick");
$('input[type="text"]').each(function () {
var id = $(this).attr('id');
var value = localStorage.getItem(id);
$(this).val(value);
});
});
} else {
window.alert("Não suporte do browser para o LocalStorage");
}
Here's the code that calls the javascript code above.
<div id="buttonsL">
<button type="submit" id="buttonL" name="submit">Registar Oferta</button>
<button id="save" name="submitG">Save</button>
<button id="load" name="fg" >Load</button>
<script src="../JSFiles/LocalStorageStuff.js" language="Javascript"></script>
</div>
I've been searching all over but I can't figure out what I am doing wrong. Why isn't it accessing those two functions?
Typos:
$('input[type=text"]').each(function() {
^---what's this for?
in both of your click handlers.
Related
This is the way I approached it. Please help:
Search
<script type="text/javascript">
var criteria = document.getElementById("search").val().toLowerCase();
if (criteria == "crosshatching") {
document.getElementById("searchBtn").onclick = function() {
window.location.href = "https://www.youtube.com/watch?v=117AN3MQuVs";
}
}
</script>
There was no scope for the variable criteria inside the function.
Also .val() is for jQuery, instead use Javascript's .value.
I've modified your code.
Please check the working code below :
document.getElementById("searchBtn").onclick = function() {
var criteria = document.getElementById("search").value.toLowerCase();
if (criteria == "crosshatching") {
alert("Matching");
window.location.href = "https://www.youtube.com/watch?v=117AN3MQuVs";
} else {
alert("NOT Matching");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="search" id="search"></textarea>
<button id="searchBtn">Search</button>
You need to check the value of your input inside the event handler. In addition, as pointed out in the comments, use value instead of val().
document.getElementById('searchBtn').addEventListener('click', function() {
var criteria = document.getElementById('search').value.toLowerCase();
if (criteria === "crosshatching") {
console.log('You would be redirected here!')
location.href = 'https://www.youtube.com/watch?v=117AN3MQuVs'
} else {
console.log('No redirect. You wrote: ' + criteria)
}
})
<input id="search" type="text"/>
<button id="searchBtn">Search</button>
I am trying to make a button which will change text from kilometres to miles upon click. So far after reading other answers this is my code:
$("#change").on('click', function(){
var elem = $(this);
if (elem.value == "Change to miles") {
elem.value = "Change to kilometres";
} else {
elem.value = "Change to miles";
}
However it does not work, the problem seems to be the line "var elem = $(this)".
I also tried with getElementById, with no success. Could anyone help me find the bug?
My HTML code is:
<input type = "button" id = "change" value = 'Change to miles'> </button>
$("#change").on('click', function() {
var elem = $(this);
if (elem.val() == "Change to miles") {
elem.val("Change to kilometres");
} else {
elem.val("Change to miles");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="change" value='Change to miles' />
Close html properly.
Use .val() to set and get data.
You have mixed javascript and jquery. $(this) is jQuery element so you need to use .val() method for getting/setting value. Not .value
If you want to use .value you need to pick the element instance using javascript. something like this :
$("#change").on('click', function() {
var elem = document.getElementById("change");
if (elem.value == "Change to miles") {
elem.value = "Change to kilometres";
} else {
elem.value = "Change to miles";
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="change" value='Change to miles'/>
I generally use data attrib to identify the state of the element not the text on it, you can also use it this way :
$("#change").click(function(){
var elem = $(this);
if(elem.data("type") === "km"){
elem.val("Change to kilometers").data("type", "mil");
} else if(elem.data("type") === "mil"){
elem.val("Change to miles").data("type", "km");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type = "button" id = "change" value = 'Change to miles' data-type="km"/>
I've got a while loop with multiple buttons, they are like this:
<button onclick="confirmDelete()" value="<?php echo $game['id'];?>" name="deleteButton">Delete </button>
It is followed by the following confirm message:
<script>
function confirmDelete() {
var r = confirm(" **HERE I WANT THE ID TO START WITH** ");
if (r == true) {
// delete
} else {
// cancel
}
}
</script>
Each button has his own value, but now i want that value in my javascript when i click on that button. I tried multiple things but cant make it work.
EDIT:
If someone can tell me an better/easier way to do this, you're welcome to tell me
Use your function with this argument, i.e.:
<button onclick="confirmDelete(this)" id="myButton" value="someId" name="deleteButton">Delete </button>
<script>
function confirmDelete(elem) {
var r = confirm(" **HERE I WANT THE ID TO START WITH** ");
var theValue = elem.value; //someId
var theId = elem.id; //myButton
if (theValue == "True") {
alert("True")
} else {
alert("False")
}
}
</script>
LIVE DEMO:
http://codepen.io/anon/pen/QyZgqO
Pass the game ID into the confirmDelete function as a parameter
<button onclick="confirmDelete(<?php echo $game['id'];?>)" name="deleteButton">Delete </button>
<script>
function confirmDelete(id) {
var r = confirm(id);
if (r == true) {
// delete
} else {
// cancel
}
}
</script>
I have a series of buttons created from a database, they are set to active or disabled based on a value in the database.
I am trying to create a script that sees what value the button has and changes it to the other state.
My buttons
<input type='button'
name='activebutton'
id='actbutton11'
value='Active'
class='activebutton'
/>
My script currently looks like this, it is currently unable to differentiated between active and disabled buttons.
I can also get it to change the buttons value but it doesn't change the value of C if the method is called again.
I want the user to be able to call the new appropriate method once a button has changed state.
$(document).ready(function(){
$(".activebutton").click(function(){
var c = $(this).val();
// alert(c)
if(c = "Active")
{
var answer = confirm("Disable button?")
if (answer)
{
var $inputElement = $(this),
$("activebutton").val("Disabled");
}
}
else
{
var answer = confirm("Activate button?")
var $inputElement = $(this),
{
$("activebutton").val("Active");
}
}
});
});
You can do this:
$(document).ready(function () {
$(".activebutton").click(function () {
var $inputElement = $(this),
c = $(this).val();
if (c === "Active") {
var answer = confirm("Disable button?");
if (answer) $inputElement.val("Disabled");
} else {
var answer = confirm("Activate button?");
if (answer) $inputElement.val("Active");
}
});
});
FIDDLE DEMO
Here is the working code,
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script>
$(document).ready(function () {
$(".activebutton").click(function(){
var answer;
var c = $(this).val();
if(c == "Active")
{
answer = confirm("Disable button?")
if (answer) {
$(".activebutton").val("Disabled");
}
} else if (c == "Disabled"){
answer = confirm("Activate button?");
if (answer) {
$(".activebutton").val("Active");
}
}
});
});
</script>
</head>
<body>
<input type='button'
name='activebutton'
id='actbutton11'
value='Active'
class='activebutton'
/>
</body>
</html>
Because I have multiple textareas in HTML code, I pass the id value through Javascript to retrieve the data in each textareas. However, in the JS function, the "CKEDITOR.instances.id" doesn't represent as expected such as CKEDITOR.instances.editor_1, CKEDITOR.instances.editor_2, or CKEDITOR.instances.editor_4, therefore, I don't have any data retrieved. Anyone knows how to fix this please let me. Heaps of thanks.
HTML code:
<textarea name="edit_1"></textarea>
<input type="button" value="submit" onClick="getValue('edit_1')" />
<textarea name="edit_2"></textarea>
<input type="button" value="submit" onClick="getValue('edit_2')" />
<textarea name="edit_2"></textarea>
<input type="button" value="submit" onClick="getValue('edit_3')" />
JS code:
var getValue = function(id) {
var content = CKEDITOR.instances.id.getData();
alert(content);
};
Try adding [] between id
var getValue = function(id) {
var content = CKEDITOR.instances[id].getData();
alert(content);
};
i had to do something like this as i was binding events to actions with multiple instances.
and trying to get the data but it would always return null for any one but the last... using the event (e.editor) worked though.
var editors = CKEDITOR.instances;
for (var x in editors) {
if (editors[x]) {
var thisName = editors[x].name;
if (editors[thisName]) {
editors[thisName].on('focus', function (e) {
socket.emit('ckeditor_field_type_edit', user, e.editor.name);
});
editors[thisName].on('key', function (e) {
var data = e.editor.getData();
socket.emit('ckeditor_field_type_typing', user, e.editor.name, data);
});
editors[thisName].on('blur', function (e) {
var data = e.editor.getData();
setTimeout(function () {
socket.emit('ckeditor_field_type_edit_finish', user, e.editor.name, data);
}, 1000);
});
}
}
}