How to disable autofocus in WooCommerce forms? - javascript

I have added [woocommerce_order_tracking] shortcode into my website home page and since then every time I refresh or first visit in it, the whole page scrolls down to the first input of the form generated with [woocommerce_order_tracking].
I have researched online about and found it caused by the "autofocus" attribute. WordPress add it automatically, and I don't know how to disable it or make the page load on top.
I tried to plant some JS and Jquery codes inside the head tag and even at the body.. with no much success.
can anyone help me solve this issue? I like the form and how it look like, I only don't want that the page will scroll to it automatically...
website address: http://blackbmb.com/store
<input class="input-text" type="text" name="orderid" id="orderid" placeholder="Found in your order confirmation email." required="" autofocus="">
Thank you!
Yahav

I had to add this to my functions.php, to stop the same thing happening to the firstname field. Just amend with whatever fields apply to you:
//Disable autofocus and thus autoscroll
function disable_autofocus_firstname($fields) {
$fields['billing']['billing_first_name']['autofocus'] = false;
return $fields;
}
add_filter('woocommerce_checkout_fields','disable_autofocus_firstname');
Let me know if it works :)

Related

Responsive filemanager callback function input field text

I am trying to add the value selected from responsive filemanager to a input text field, but once I select the value noting happen, the value does not go to the input text field.
I am following the documentation
Here you are my code:
<script>
function BrowseServer(id){
alert(id); // configuration
fileBrowserlink = "../admin/ckeditor/filemanager/dialog.php?type=2&editor=ckeditor&fldr=&field_id=" + id;
window.open(fileBrowserlink,'pdwfilebrowser', 'width=1000,height=650,scrollbars=no,toolbar=no,location=no');
}
</script>
<input type="text" name="configuration" value="" onclick="BrowseServer('configuration');" id="configuration">
I appreciate any help.
Thank you.
You cannot open the filemanager in a window according to the documentation page "You can use normal pop-up, Bootstrap modal, iframe, FancyBox iframe, Lightbox iframe to open the FileManager..."
Try using the following:
<div class="input-append">
<input id="configuration" type="text" value="">
Select
</div>
Also take a look at the code behind the demo page here for more examples. I based the above code snippet on this code.
Good Luck!

[Javascript]Fill a textbox without ID and a name that changes on page reload using a bookmark

So I am trying to make a bookmark in chrome that would input a Javascript code that would fill up a textbox on my router home page. The goal is saving me the hassle of either remembering that silly password or having to open my textfile containing the said password.
I know, I know, ... I am lazy. (but not for learning some Javascript in the process)
The thing is the textbox doesn't have an ID and its name changes on reload so I cannot know its name in advance.
I have looked at a few pages on here that kind of guide me in the right direction but I can not make it work for the life of me as I have little to no experience in Javascript.
Here is what the html of the textbox looks like :
<input type="PASSWORD" style="WIDTH: 150px" name="password_random10digitnumber" value="" size="20" maxlength="64">
Here is what I ended up with as a link on my bookmark (the only thing I tried that doesn't give me an error).
javascript:document.getElementsByTagName("input")[0].value='myrouterpwd'
Currently, when I press my bookmark, it refreshes the page and shows a blank page with "myrouterpwd" on it.
(There is two other input html blocks on the page which are :
<input type="HIDDEN" name="md5_pass" value="">
<input type="HIDDEN" name="auth_key" value="numbersIamnotsureIshouldshowtheworld">
)
Thank you to anybody taking the time to answer!
I haven't worked much with bookmarks and am assuming that because it's a bookmark, you are navigating away from the page that you actually want to work with. So, I'm not sure that triggering this that way is a viable solution. Of course, you could just take advantage of the browser's ability to store passwords for you. ;)
But, to the main point of your question... Assuming that it's the only password field on the page, the use of element.querySelector() will find it:
// Get a reference to the right element based on its type attribute value
let passwordBox = document.querySelector("input[type='password']");
passwordBox.value = "MySecretPassword"; // Populate the field
console.log(passwordBox.value); // Confirmation
[type='password'] { background:yellow; } /* Just so you know which box is the password box */
<input type="hidden" name="doesntMatter">
<input name="someTextBox">
<input type="password" name="doesntMatter2">
<input name="someOtherTextbox">

Button didnt disable inside the form

greeting developers. i am doing project for university related to Javascript. i create one page got button add and unfriend button which is disable.once user click add button the prompt box appear and after they click Ok for promp, the unfriend button will able to click while add button become disable. if click unfriend, add button will able to click. i don't know how explain it. may be read my question can be headache. sorry for that. my problem is button does not disable,if i never put inside form it work but since i put inside form doesnt work. guys is there any solution please help me
function myFunction(add){
var subject = prompt("Please enter Subject that want to study");
if (subject != null){
document.getElementById("subject").value = subject;
document.getElementById("btn").disabled=false;
document.getElementById("add").disabled=true;
document.getElementById("add").value="request sent";
}
}
function disableButton(btn){
document.getElementById("add").disabled=false;
document.getElementById("btn").disabled=true;
document.getElementById("add").value="Add friend";
form.submit();
}
<form method="post" id="form" enctype="multipart/form-data" autocomplete="off" >
<input type="submit" value="unfriend" id="btn" onClick="disableButton(btn)" disabled/>
<input type="hidden" id="subject" name="subject"/>
<input type="submit" value="add" id="add" onclick="myFunction(add)" /></form>
The "add" and "unfriend" buttons both submit a POST request which is refreshing the page since there is no form action specified. Perhaps you need to read up on HTTP methods. https://www.w3schools.com/tags/ref_httpmethods.asp is a good resource.
If your plan is to add a server side page to handle the request at a later time you can temporarily add the following to the form tag onsubmit="return false".
If you simply want to use the form inputs without submitting the form you should remove form.submit() from the disableButton function and change the types of the add and unfriend buttons from type="submit" to type="button". You can also remove the method and enctype of the form.
Personally I don’t really use forms unless its more than 3 fields.
Two things to think about:
You got the right written idea, you are however missing event.preventDefault(), which will make your website refresh itself, which will then force out everything to refresh.
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
The other is that try between the both buttons as they are both i suggest one myfunction to be onclick in a button tag. just to avoid two inputs types.
Additional:
I suggest you add jquery to make things easier with the toggle function.

Can't assign a new value to my autocomplete box

I've created a search page that can be toggled between french and english. So when the user searches a record and toggles to french it displays the same record they were viewing on the english page.
What I want to do is display the record name in the search box when the page is toggled.I assumed it was as simple as doing a $('#inputID').val(record); but it doesn't seem to be working. I've alerted the record name and it works fine, so I'm stumped. All the scripts are linked correctly as well so that's not the problem.
Autocomplete Box Code
<div id="ui-widgit">
<label for="searchParams">
<h1>Search All Programs (By Screen Number or By Error Code):</h1>
</label>
<input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" />
<input type="button" value="Search" name="searchBtn" class="btn_Design" onclick="showSearch(inputID.value)"/>
</div>
Try to change the value of inputID with this
$('#inputID').val(recordToggle);
also have tried this:
$('#inputID input').val(recordToggle);
It is hard to tell with your presented markup but I am assuming you are trying to change the value of $('#inputID') after the page refreshed. It is important where you put this code. If it is placed before <input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" /> you will not return anything with $('#inputID') so you will change the value of nothing to your text. It will give no error. To fix this you can use:
$( document ).ready(function(){
$('#inputID').val(recordToggle);
});
Be sure to read about jQuery's ready function because load may be the better choice.
If this doesn't fix your problem let me know. I will update my answer.

Long form validation in JavaScript / jQuery

I have a long long long form. It has about 200 fields. Now, about 50 fields need to be validated through JavaScript / jQuery. How can I easily validate them without a huge amount of code. I want to avoid doing this:
field1 = document.getElementById("field1").value;
if (field1 == '') {
alert ("Please enter a value for Field1");
return false
}
Is there an easier way? Thanks a lot.
Use the jquery Form validation plugin and assign the correct classes to the fields.
It's as simple as class="required" in most cases!
If you just want to check if the field is empty or not you could do something like this using jQuery:
HTML:
<form>
<input class="validate" type="text" />
<input type="text" />
<input class="validate" type="text" />
<input type="text" />
<input class="validate" type="text" />
</form>
SCRIPT:
$('.validate').each(function() { //this will get every input marked with class "validate"
if ($(this).val() == '')
return false;
});
Using JQuery validate plugin can be much help. You can control the way plugin works from your HTML code and even not write any javascript! If you need more complex validatio, you can extend it by adding specific validation functions. It allows you to localize the application as well.
This page gives a good example on how to use the plugin: http://jquery.bassistance.de/validate/demo/milk/ (click the "Show script used on this page" link).
Here is a rudimentary fiddle, that you can use to validate your form, Just add a span after each of the fields that you need to validate.
http://jsfiddle.net/refhat/h2S6G/35/
I thought about this too, but the plugin can be a bit difficult to
use. Do you know if it allows to display an alert box when an error is
found, instead of the actual displaying on the page? That's a bit too
much for this form. Thanks a lot
Here's a validator I wrote that uses a pop-up style alert box for error messages. Is that the sort of thing you are after?
http://validator.codeplex.com/
Do you want default error messages like for required validator? Regarding jquery validate plugin was it the syntax it offers to place validation information in the method call you found difficult since for a large form having validation information located separately from the text boxes makes it harder to go through and verify all fields have the right validators and messages?

Categories