Document.myform alternative js - javascript

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');

Related

Why can't I use a script function to affect variables in html written out by a JSON file?

Hopefully a quick question.
I'm using a JSON file to write out some html and populate with variables from the JSON and append it to part of my html file. This works and is fine. However, I now want to use a different script to apply show and hide filters based on class attributes to the html that has been printed. For some reason, this isn't working. If I just copy and paste the html with variables back into the original document after its been printed out, then the script works though. Is this an issues of synchronicity?
Here's the second script I'm looking to execute if it helps:
$(document).ready(function(){
var targets = $('.filter'),
buttons = $('.filter-button');
buttons.click(function(){
var value = $(this).data('filter');
if(value == "all")
{
buttons.removeClass('checked');
targets.show();
}
else
{
if($(this).hasClass('checked'))
{
$(this).removeClass('checked');
var checkedClasses = buttons.filter('.checked').toArray().map(function(btn){return $(btn).data('filter');});
if(checkedClasses.length == 0)
{
buttons.removeClass('checked');
targets.show();
}
else
{
checkedClasses = $.grep(checkedClasses, function(n, i){ return n != value }),
selector = '.' + checkedClasses.join('.'),
show = targets.filter(selector);
targets.not(show).hide();
show.show();
}
}
else
{
$(this).addClass('checked');
var checkedClasses = buttons.filter('.checked').toArray().map(function(btn){return $(btn).data('filter');}),
selector = '.' + checkedClasses.join('.'),
show = targets.filter(selector);
targets.not(show).hide();
show.show();
}
}
});
});

Liferay/AlloyUI: Overriding util.js or disabling scrolling on form focus

How can I override (or hook) the function Liferay.Util.focusFormField in Liferay 7.0?
The method is defined in frontend-js-aui-web (portal-src\modules\apps\foundation\frontend-js\frontend-js-aui-web\src\main\resources\META-INF\resources\liferay\util.js).
The only way I could think of is to just overwrite it somewhere in a js-file, like so:
Liferay.Util.focusFormField = function(el) {
var doc = $(document);
var interacting = false;
el = Util.getDOM(el);
el = $(el);
doc.on(
'click.focusFormField',
function (event) {
interacting = true;
doc.off('click.focusFormField');
}
);
if (!interacting && Util.inBrowserView(el)) {
var form = el.closest('form');
var focusable = !el.is(':disabled') && !el.is(':hidden') && !el.parents(':disabled').length;
if (!form.length || focusable) {
el.focus(false); // modified
}
else {
var portletName = form.data('fm-namespace');
Liferay.once(
portletName + 'formReady',
function () {
el.focus(false); // modified
}
);
}
}
}
All I actually want is to disable the scrolling that happens whenever a form is submitted.
Does someone know what to do best to achieve this?
Another thing I found on the web is this: https://alloyui.com/api/files/alloy-ui_src_aui-form-validator_js_aui-form-validator.js.html#l216
But I cannot find it in liferay-7.0-source-files and no explanation how to override it.

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

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);
}

JavaScript help required

I am using the following code snippet to fetch a <div> element with a particular id, but it kind of messes up at times. Does anyone have a better code, or fix for this?
function getData(html,id){
var curSectionId = id;
var subStr=html.substring(html.indexOf("id=\""+curSectionId+"\""),html.length-1);
var divsStrs=subStr.split("<div");
var divSec="";
var opeDiv=0;
for(var count=0;count<divsStrs.length;count++)
{
if(divsStrs[count].indexOf("</div>")!=-1 && divsStrs[count].indexOf("</div>")!=(divsStrs[count].lastIndexOf("</div>")))
{
opeDiv++;
var lDiv=divsStrs[count].split("</div>");
var lString="";
var totalJcount;
for(var jcount=0;jcount<=opeDiv;jcount++)
{
lString=lString+lDiv[jcount]+"</div>";
opeDiv--;
}
divSec=divSec+"<div "+lString;
break;
} else if (divsStrs[count].indexOf("</div>")!=-1 )
{
divSec=divSec+"<div "+divsStrs[count];
opeDiv++;
if(opeDiv==0)
{
break;
}else
{
opeDiv--;
continue;
}
}
divSec=divSec+"<div "+divsStrs[count];
opeDiv++;
}
return divSec;
}

Try document.getElementById

You should really consider using jQuery or something similar. Would make the code much ligther.

Categories