Javascript preventDefault not working, says event is undefined - javascript

My code is like this:
var search = document.getElementById("search");
var searchForm = document.getElementById("searchForm");
searchForm.onSubmit = function(event) {
event.preventDefault();
console.log("BLBLBL");
var contenders = [];
var searchValue = search.value;
for (var i = 0; i < cards.length; i++) {
for (var j = 0; j < searchValue.length; j++) {
if (searchValue[j] === cards[i][j]) {
contenders.push(cards[i]);
} else {
delete cards[i];
break;
}
}
}
console.log(contenders);
}
In an HTML file with this form:
<form id="searchForm">
<input id="search"></input>
</form>
When I run the code in an HTML page, it says:
buyPokemonCardSearch.html:30 Uncaught TypeError: Cannot read property 'preventDefault' of undefined
at HTMLFormElement.searchForm.onSubmit (buyPokemonCardSearch.html:30)
at <anonymous>:1:12
[It's a fake website, so don't judge]
Why doesn't it work? The console.log's are there because I wanted to detect where my code went wrong.

Related

localstorage is not working after window.location.href

I am setting a value checked using localstorage.setitem and using window.location.href to redirect to another page. When page loads and I am trying to acess the saved value using localstorage.getitem, it is not working.
Here is my code:
<input type="checkbox" name="names" onchange="submit(this)" />
function submit(element) {
var names = document.getElementsByName('names');
var selectedList = [];
for (var i = 0; i < names.length; i++) {
if (names[i].checked == true) {
window.localStorage.setItem(names[i].checked, "checked");
}
}
window.location.href = "/testpage.html";
}
$(document).ready(function () {
var names = document.getElementsByName('names');
for (var i = 0; i < names.length; i++) {
if (window.localStorage.getItem(names[i].checked) == "checked") {
names[i].setAttribute('checked', 'checked');
}
}
})
Let's say you're on page x.html and you're redirecting to another page from this page using this line
window.location.href = "/testpage.html";
So any code written in javascript of x.html after the redirecting will not execute, because the execution context of JS now moves to javascript written for testpage.html.
With that said, the solution to your problem will be, to set the localStorage from x.html's JS and when redirected to testpage.html the handle the getting from localStorage part there and then set the values gotten fro localStorage to the checkboxes.
Let's see example of what i've explained above.
Your x.html should look something like this:
function submit(element) {
var names = document.getElementsByName('names');
var selectedList = [];
for (var i = 0; i < names.length; i++) {
if (names[i].checked == true) {
window.localStorage.setItem(names[i].checked, "checked");
}
}
window.location.href = "/testpage.html";
}
<input type="checkbox" name="names" onchange="submit(this)" />
And javascript for testpage.html should look something like this:
$(document).ready(function () {
var names = document.getElementsByName('names');
for (var i = 0; i < names.length; i++) {
if (window.localStorage.getItem(names[i].checked) == "checked") {
names[i].setAttribute('checked', 'checked');
}
}
})

JavaScript - Checkbox onchange function is not executing the whole way through

I have an input of type checkbox with an onchange event as shown below:
<input type="checkbox" runat="server" id="cbWarehouse" onchange="disableAllButtons()"/>
<script>
function disableAllButtons()
{
// gvDetail
var gvDetail = document.getElementById("<%=gvDetail.ClientID %>");
var gvDetailControls = gvDetail.getElementsByTagName("input");
for (i = 0; i < gvDetailControls.length; i++)
{
gvDetailControls[i].disabled = true;
}
// gvSummary
var gvSummary = document.getElementById("<%=gvSummary.ClientID %>");
var gvSummaryControls = gvSummary.getElementsByTagName("input");
for (i = 0; i < gvSummaryControls.length; i++)
{
gvSummaryControls[i].disabled = true;
}
}
</script>
This function's purpose is to disable all buttons in two GridViews - gvSummary and gvDetail. However, it only disables the buttons in whichever GridView I mention first in the JS function. I.e. in the example above, the buttons in gvDetail will be disabled but not in gvSummary.
So it seems that the function stops halfway through..?
Anyone have any ideas where I am going wrong?
****EDIT (RESOLVED)****
Issue was resolved by checking that each GridView was defined and not null:
<script>
function disableAllButtons()
{
// gvSummary
var gvSummary = document.getElementById("<%=gvSummary.ClientID %>");
if (typeof (gvSummary) != 'undefined' && gvSummary != null)
{
var gvSummaryControls = gvSummary.getElementsByTagName("input");
for (var i = 0; i < gvSummaryControls.length; i++) {
gvSummaryControls[i].disabled = true;
gvSummaryControls[i].className = "btn-xs btn-secondary";
}
gvSummary.title = "You have unapplied filters. Pleae update table.";
}
// gvDetail
var gvDetail = document.getElementById("<%=gvDetail.ClientID %>");
if (typeof (gvDetail) != 'undefined' && gvDetail != null)
{
var gvDetailControls = gvDetail.getElementsByTagName("input");
for (var i = 0; i < gvDetailControls.length; i++) {
gvDetailControls[i].disabled = true;
gvDetailControls[i].className = "btn-xs btn-secondary";
}
gvDetail.title = "You have unapplied filters. Pleae update table.";
}
}
</script>

How to create a tabbed interface in Javascript

I'm trying to create a tabbed interface in Javascript which will allow a user to click on a button atop each interface in order to make the div under it become active while the other 'tabs'/divs recede to the background. I'm not quite sure I got that out right so attached is a screenshot of what I'm trying to make:
My code attaches one button -- beside the first div-- instead of all three and returns an error that says nodeChildren[j].getAttribute("data-tabname") is not a function although as far as I know, it seems it is.
I'll post my JavaScript code then add a link to fiddle where everything is.
function asTabs(node) {
var button = document.createElement("BUTTON");
var tempArray = [];
var nodeChildren = Array.prototype.slice.call(node.childNodes);
nodeChildren.filter(function(){
for (var i = 0; i < nodeChildren.length; i++) {
if (nodeChildren[i].nodeType === 1) {
tempArray += nodeChildren[i];
return tempArray;
}
}
});
nodeChildren.forEach(function (){
for (var j = 0; j < nodeChildren.length; j++) {
node.insertBefore(button, nodeChildren[j]);
var buttons = document.getElementsByTagName("button");
for (var k = 0; k < buttons.length; k++) {
buttons[k].innerHTML = nodeChildren[j].getAttribute("data-tabname").textContent;
}
}
});
var hide = nodeChildren.slice(1);
for (var l = 0; l < hide.length; l++) {
hide[l].className = "hide";
}
buttons[k].addEventListener("click", function (){
if (nodeChildren[j].className = "") {
nodeChildren[j].className = "hide";
}
else nodeChildren[j].className = "";
});
}
asTabs(document.querySelector("#wrapper"));
Then here's my fiddle containing comments explaining what is being tried to achieve on each line
https://jsfiddle.net/nmeri17/nmswdota/

Does not execute the code after a for within a function

Good! I have a problem and you do not run my code at the end of the loop, the above and what is inside the loop works fine, the problem is that after the loop is still not executing the code. Any idea why it can be?
This is my code:
var arrayp = new Array();
function botonAdelante(tabl, pasos)
{
var padreTabla = document.getElementById(tabl).rows;
var cont = 0;
for(var j = 0; j < padreTabla.length; j++)
{
var hijoTd = document.getElementById(pasos+ "-producto-" +j);
var childArray = hijoTd.children;
for(var i = 0; i < childArray.length; i++)
{
var check = document.getElementById(pasos+ "-CheckBox-" +j);
if(check.type == 'checkbox' && check.checked==true)
{
arrayp[cont] = check.value;
var algo = arrayp[cont];
alert(arrayp[cont]);
alert(arrayp);
cont++;
continue;
};
}
}
alert("It is in this part of the code does not work");
}
Clarification: "continue" found at the end of long and if it will not work either.
The continue is confusing used like this, but I have a feeling your code is probably throwing an error because the cont might exceed the array length. Regardless of whether this fixes it or not I'd at least add a check to ensure that it doesn't throw an exception.
Please check for exceptions being thrown through web dev tools (F12 in Chrome).
for(var i = 0; i < childArray.length; i++)
{
var check = document.getElementById(pasos+ "-CheckBox-" +j);
if(check.type == 'checkbox' && check.checked==true && arrayp.length <= cont)
{
arrayp[cont] = check.value;
var algo = arrayp[cont];
alert(arrayp[cont]);
alert(arrayp);
cont++;
continue;
};
}

Disable table using checkbox

I have this checkbox, how to disable a table (disable all the input fields in the table) whenever I check the checkbox?
<label><input type="checkbox" name="view" value="d">N/A</label>
Is it possible using purely JavaScript and not jQuery.
This is the code now
var elems = document.getElementById('table-id').querySelectorAll('input,select,textarea');
document.getElementById('check').onchange = function () {
if (document.getElementById('check').checked) {
for (var i = 0; i < elems.length; i++) {
elems[i].disabled = true;
}
} else {
for (var i = 0; i < elems.length; i++) {
elems[i].disabled = false;
}
}
}
and the table
<table id='table-id' border="1">
but it shows error like this:
Uncaught TypeError: Cannot read property 'querySelectorAll' of null
Using jQuery, it is easy:
$("#tableId").find(":input").prop("disabled", true);
Using Javascript, it is a little longer:
var elems = document.getElementById('tableId').querySelectorAll('input,select,textarea');
for (var i = 0; i < elems.length; i++) {
elems[i].disabled = true;
}
Fiddle: http://jsfiddle.net/abhitalks/6s7QL/2/
Update:
Added your checkbox code:
document.getElementById('checkboxId').onchange = function () {...
Here is the pure JavaScript version to do the trick you want:
var table = document.getElementById('tableId'),
inputs = table.getElementsByTagName('input'),
checkbox = document.getElementById('checkboxId');
checkbox.onchange = function(e) {
if(checkbox.checked) {
disableTable(true);
} else {
disableTable(false);
}
}
function disableTable(disableState) {
for (var i = 0, l = inputs.length; i < l; i++) {
inputs[i].disabled = disableState;
}
}
And here is the working example in JSFiddle.

Categories