We Keep Coding

preventDefault (javascript) not working in wordpress

I need help in javascript, my code in woocomerce (checkout) is:
<script type="text/javascript">
document.getElementById("billing_city").onkeyup = function validarDistrito(event){
// do stuff
var billinginfo = document.getElementsByName("billing_city")[0].value;
var distritoArray= ["Barranco","Breña","Jesús María","La Victoria","Lince","Miraflores","Pueblo Libre","San Borja","San Isidro","San Luis","San Miguel","Surco","Surquillo","Callao","La Molina","Lima Cercado","Magdalena", "Rimac", "Lima Metropolitana"];
console.log(billinginfo);
for (i = 0; i < distritoArray.length; i++) {
if(distritoArray[i].toUpperCase() == billinginfo.toUpperCase()){
document.getElementById('payment_method_bacs').disabled = false;
alert('igual');
}else{
document.getElementById('payment_method_bacs').disabled = true;
}
}
event.preventDefault();
}
</script>
The code work very good, but then a few seconds later it updated and returns to a previous state. And I use the method preventDefault (); but it does not work in wordpress.
PD: the same holds true using jquery.
Thanks!

You are using e.preventDefault(); when it must be event.preventDefault();
take a look at validarDistrito(event), you named event the variable
try this code
<script>
document.getElementById("billing_city").onkeyup = function validarDistrito(event){
// do stuff
var billinginfo = document.getElementsByName("billing_city")[0].value;
var distritoArray= ["Barranco","Breña","Jesús María","La Victoria","Lince","Miraflores","Pueblo Libre","San Borja","San Isidro","San Luis","San Miguel","Surco","Surquillo","Callao","La Molina","Lima Cercado","Magdalena", "Rimac", "Lima Metropolitana"];
console.log(billinginfo);
for (i = 0; i < distritoArray.length; i++) {
if(distritoArray[i].toUpperCase() == billinginfo.toUpperCase()){
document.getElementById('payment_method_bacs').disabled = false;
return;
}else{
document.getElementById('payment_method_bacs').disabled = true;
}
}
event.preventDefault();
}
</script>
the thing is that distroArray will keep validating the rest of it, so if the input value is equal to one of the values of the array, you need to stop validating

Javascript Dynamically invoke shortcut keys combination function to shortcutjs plugin

Am getting key Combination from the server. Based on that am assigning key Combination to function dynamically. The below code is working for last iteration in loop. how below code is work for all iterations.
In my page i have two buttons save and cancel the below code is working for last iteration in for loop, It means btnCanel button triggers if i press key for save function.Any suggestions. hope understand my question.
$(document).ready(function fn() {
var keyCombination = new Object();
keyCombination['btnAdd'] = "Alt+S";
keyCombination['btnCancel'] = "Alt+C";
for (var k in keyCombination) {
if (keyCombination.hasOwnProperty(k)) {
shortcut.add(String(keyCombination[k]), function () {
var btnAdd = document.getElementById(String(k));
btnAdd.focus();
btnAdd.click();
});
}
}
});
if i give like this means it is working
shortcut.add("Alt+S", function () {
var btnAdd = document.getElementById('btnAdd ');
btnAdd .focus();
btnAdd .click();
});
shortcut.add("Alt+C", function () {
var btnCancel = document.getElementById('btnCancel');
btnCancel.focus();
btnCancel.click();
});
but if i try to add dynamically its overriding help me this issue.
Thanks in Advance.

I created a separate function outside the document.ready function like this now its working fine.
$(document).ready(function fn() {
var keyCombination = new Object();
keyCombination['btnAdd'] = "Alt+S";
keyCombination['btnCancel'] = "Alt+C";
for (var k in keyCombination) {
if (keyCombination.hasOwnProperty(k)) {
Set_KeyCombinations(k, keyCombination);
}
}
});
function Set_KeyCombinations(k, keyCombination) {
shortcut.add(String(keyCombination[k]), function () {
var eleId = document.getElementById(String(k));
if (eleId) {
if ($('#' + String(k).trim()).css('display') !== 'none' && eleId.getAttribute("disabled") !== "disabled") {
eleId.click();
eleId.focus();
}
}
});
}

Try this:
var keyCombinations = [ "Ctrl+Shift+X" , "Ctrl+Shift+Y" ];
for(var i=0; i<keyCombinations.length; i++){
(function(shorcutCombination){
shortcut.add(shorcutCombination,function() {
alert("i am " + shorcutCombination);
});
})(keyCombinations[i]);
}
The idea is that you need to preserve the value of keyCombinations[i]
as i increases in the loop. Tested this here: Openjs

unexpected token < in js

I was trying to implement a javascript code in my django admin, I have two fields hard_drives(id is: id_hard_drives) and no_of_drives(id is: id_no_of_drives). So, I want no_of_drives to appear only if hard_drives has particular value, like in the example:
<script type="text/javascript">
$("#id_hard_drives").change(function () {
if($("#id_hard_drives").val()=="125"){
document.getElementById("#id_no_of_drives").type=text
} else {
document.getElementById("#id_no_of_drives").type=hidden
}
});
</script>
But, I get an error:
Unexpected token <
Update :
As per GSWV, i have updated the code, but it still used to show same error, so i removed <script> tags. The new code looks something like this :
(function($) {
$(document).ready(function() {
var hardDriveSelector = $("#id_hard_drives");
hardDriveSelector.on("change", function(){
if (hardDriveSelector.val() == "H") {
document.getElementById("id_no_of_drives").type = text;
} else {
document.getElementById("id_no_of_drives").type = hidden;
}
});
});
})(django.jQuery);
But the code is not being implemented on fly, the script dosen't do anything, do i need to use key up or something on id_hard_drives?

I have re-written the code for you. Hope this helps! :)
$(document).ready(function() {
$('#id_no_of_drives').hide();
$("#id_hard_drives").change(function() {
var driveID = $(this).val();
if (driveID == '125') {
$('#id_no_of_drives').show();
} else {
$('#id_no_of_drives').hide();
}
});
});

Below is your fixed code
1) $("#id_hard_drives") - no dot before #id_hard_drives
2) document.getElementById('id_no_of_drives') - no # before id_no_of_drives
<script type="text/javascript">
$("#id_hard_drives").change(function() {
if ($("#id_hard_drives").val() === '125') {
document.getElementById('id_no_of_drives').type = text;
} else {
document.getElementById('id_no_of_drives').type = hidden;
}
});
</script>

How to select a element with a Javascript library

I am working on a javascript library, The library syntax will go as follows: tex(selector).function(specifier). Here is what I have so far:
(function(){
var tex = function(selector,context){
//code
},
tex.prototype = {
show: function () {
this.style.display = "inherit";
return this
}
};
window.tex = tex
})();
The problem I am having is how do I set this to the element. Does anyone know how I can do that the jQuery way?
Thank you all for your help.

Maybe try :
if (document.querySelectorAll(selector==null || undefined) {
//nothing there
} else {
tex = document.querySelectorAll(selector);
}

Document.myform alternative js

I have got a fully working js, but my problem is. I have do include it into a php file that generated by another programmer. The file is very huge and I can't rewrite everything.
In my js I use this: document.myform1.cid.options[i].selected = true;
But my problem that is the id of form is createquestion-form. And it has no name.
How could I replace myform1 to createquestion-form?
This is my full script:
function Search()
{
var SearchKeyWord=document.getElementById("SearchText").value;
var SelLength=document.myform1.cid.length;
for(var i=0; i<SelLength;i++)
{
var searched_text = document.myform1.cid.options[i].text;
var IsMatch = searched_text.search(SearchKeyWord);
if(IsMatch != -1)
{
document.myform1.cid.options[i].selected = true;
document.myform1.cid.options[i].style.color = 'red';
}
else
{
document.myform1.cid.options[i].style.color = 'black';
}
}
}

Just use document.getElementById
form = document.getElementById('createquestion-form');