I am trying to understand what exactly the combination
... value id= ...
in
<input type="text" name="session_key" value id="session-key-login">
does. Note, that the value is immediately followed by id.
My problem is whenever such a combination occurs in an input field (for example in Facebook login page "email or phone" field (only) and everywhere in the LinkedIn login page), the
document.getElementById(..).focus()
method fails. I am sure the "value id" combination does something non-trivial, since Facebook uses it only for one field, while all other fields come without that empty value field preceeding id.
Thanks in advance.
They are two totally different attributes. Note that attributes are separated by spaces, so even when specified with no = afterwards, as in your example, it's a distinct attribute, and not combined with the following one.
value defines the value of the input (the value that will be prefilled when the page is rendered). If left empty (as in your example), it does nothing. If you did, say, value="hi", however, the text box would be prefilled with "hi"
id specifies the unique identifying name of the input. It is used to access the element in the DOM, using JavaScript, e.g. document.getElementById('session-key-login')
I think I found the answer to my focus() problem.
What I found was on a page, invoking focus() once focuses on the required element. However, a second invocation on the same element fails, unless one make the page lose the previous focus explicitly, for e.g. by invoking the blur() method on the same element.
I might be wrong, but my guess is that Facebook focuses on the "email" field implicitly/automatically on load and thus my second focus does not do anything. Though it works on other fields.
So, explanation by Steven Moseley holds tight :)
Thanks,
Nikhil
Related
I'm using the jQuery Validator plugin 1.19.5 on a slightly large (but simple) form generated from a PDF by an online converter to html5
The form has a Submit button implemented as a button with onclick to a javascript function within the formviewer.js file that is part of the conversion to html5. If I open the form in Chrome 107.0.5304.107 Developer Tools, I can see that the Submit button goes to the following code that I added to the success branch of the function that handles the submit in formviewer.js:
success: function() {
const OSHform=$("form").eq(0);
if (OSHform.valid()) {
top.document.location.href = "/Adsentry/completed";
}
else {
alert("Fields did not validate, please fix errors and try again");
}
},
failure: function() {
alert("Form failed to submit, please try again")
}
In a separate script, I invoked validate() on the form element, passing it rules for the fields to validate.
var $j = jQuery;
var OSHform = $j("form");
OSHform.validate({
rules: {
"NAME OF DRIVER": "required",
"EMAIL": "required",
"EMAIL": "email",
"ADDRESS": "required"
}
});
If I omit required fields, or enter an invalid email address in an email field, the call to valid() returns false. And in fact, if I look at the input elements in the Elements tab, I can see that class="error" gets added, and if I correct the error it changes to class="valid". Additionally, with class="error", a label gets added for that element, also with class="error", and correcting the problem adds style="display:none;" to the label.
So everything is great, except that there is no text or message that goes with the label, so its presence/absence, or the presence/absence of display:none on it, has no effect on the normal display of the page.
I have tried stepping through the code in the debugger, but I'm afraid my javascript is so weak I can't really figure out what's going on to the extent of understanding why the messages are not being displayed.
You can play with it live here for the time being, but I can't promise to stop fiddling with it! There are currently only 3 required fields: Name of driver, Address, and Email. If they are all correct, the form submits as intended.
A little disappointed that this didn't even get any comments, let alone answers. On the other hand, it turned out the answer was exactly as anyone even slightly more experienced than me would likely have guessed: errors were being reported in HTML elements, but there was no CSS to put them in the right location on the page. The plugin seemed to be buggy in failing to produce default message text describing the errors; instead, it just produced message text that was simply the name attribute of the erroneous input element. But without appropriate CSS, that name attribute was output in the black strip at the bottom of the page, making it essentially invisible. It took a sharp eye to notice the sudden appearance of "fly specs" at the bottom of the page when clicking the submit button.
The plugin just inserts an HTML element into the DOM immediately following the bad input element. But the files generated from the PDF include a style sheet with selectors using the ID of each input element to give the input element absolute placement on the page. And simply inserting an element into the DOM as the next sibling of the input element, without a style, results in having it rendered at the bottom of the page. Even when I figured out that the lack of CSS was the problem, it took me a while to get something that worked: good old selector specificity in action. All of the input elements were placed using ID selectors with absolute position, and I could find no way to have the simple next-sibling relationship of the message to the input element cause the message to be rendered immediately after the input element. Although it made me feel "icky" to do it, the solution I came up with was to use jQuery to iterate over all the message elements with the "error" class, get the ID of the input element it was reporting, and then use $.css() to get the input element's effective top, left, and width style attributes. Then strip off the trailing "px", multiply by 1 to get a numeric value, add the width to the left numeric value, and specify new top and left attributes using $.css() on the message elements. This put the messages I defined in the messages sub-object of the object passed to the validate constructor appear in the right locations. It only remains a mystery why the default messages didn't appear instead of the names of the input elements for elements that were invalid.
How can I achieve an event-call in JavaScript by the PDF when you hit enter on a specific TextField? (alternatively: on every key stroke in that specific TextField)
I've tried
this.getField("field1").addEventListener('input', myMethod);
and
this.getField("field1").events.add(
{
onEveryEvent: function()
{
myMethod();
}
});
but they both do not work.
I found the solution (as described here):
First you have to set a partial name for the field with the PDField.setPartialName(String name)-method, for example myField.setPartialName("myField1");. Then you can access the field via JavaScript in the PDF.
Now use the setAction(..., ...)-method to set your action/event/listener. For example: this.getField("myField1").setAction("Validate", "myMethod()");
Please notice how the second argument is indeed a string and not a method. Also: "Validate" is not just a name and probably only one of many action/event-strings. Unfortunately I do not know what those other strings are. "Validate" is from the docs example and triggers (at least) when
the field loses focus and has changed value in the last focus
you change its value and press enter
I am using some JQuery Combobox that you can check out here: https://simpletutorials.com/uploads/1860/demo/index.html
As you can see, you can start typing and get the results filtered.
However, once you have selected a value, when clicking on the arrow to open the list, no other values are shown anymore. So, if I want to change college/state, I need to manually clear the input value. I don't like this, so I want to modify it.
I changed that code and added this JS on the click event of the list:
onclick="document.getElementById('statesCombo-ddi').value='';"
This line basically finds the input by id and sets its value to an empty string.
You can try out by looking for the td element having class "stc-button" (with Chrome, just focus on the arrow of the second combo box) and add my code to the tag.
===EDIT===
You can obtain the same results by adding this code directly to the input:
onclick="this.value=''"
===END EDIT===
This has a weird behavior:
If I SELECT an element from the list, it clears the value and everything works correctly.
If I TYPE some letters and then select a value from the list, no item is shown in the list after clicking.
What's wrong with it?
You can override one of the combo box methods to accomplish this:
STComboBox.prototype.filterAndResetSelected = function() {
this.$('ddi').val('');
this.filterList('');
this.selectRow(0);
this.$('ddl').scrollTop(0);
};
Does this help?
The unminified code is provided, is relatively small (12kb) and is fairly well commented, so you could make this modification directly to the source if you'd like.
Edit: Fixed to clear the input value (as indicated in the comment below)
By reading the source and doing a little debugging with Chrome's inspector (Control+Shift+i), you can find the particular ID of the element you need to clear (#collegesCombo-ddi) in order to clear the input box. Once you've found the element's ID you need to clear (and being very careful with plugins that assign multiple elements with the same ID, which is not allowed in the standard, and an indicator of poorly-written code):
$('#collegesCombo-ddi').val('');
I want to change the input of a text field that stores the subject line in the Outlook Web App using JavaScript:
This subject text field is defined as:
<input tabindex="0" class="_f_ql _f_rl textbox allowTextSelection placeholderText" role="textbox" aria-labelledby="MailCompose.SubjectWellLabel" autoid="_f_B2">
I have tried the following using my JavaScript code:
textFieldElement.value = "Example";
textFieldElement.innerHTML = "Example";
textFieldElement.innerText = "Example";
These work to set the value as far as the user interface is concerned:
But they don't modify the "real" value of the subject that gets posted when you hit Send. Once you hit the Send button, the subject takes on no value (and shows up as (no subject) in an email). I can see from the POST request that unless I manually click on the element, focus it, and manually type in what I want it to display, physically with the keyboard, it won't send the subject argument in its JSON object.
How can I modify the "real" subject value that this control is expected to handle? I'm guessing this is an MVC control or some other type of ASP.NET control...and I am trying to modify the .aspx page, with JavaScript, to edit this value.
------------------------------------------------------------------------------------------------------------------------------------------------
Edit: I have only been able to set the subject line in one specific case. First, I need to physically click on the subject element. I've noticed this has a strange behavior of setting the class on this element from this:
<input class="_f_ql _f_rl textbox allowTextSelection placeholderText" autoid="_f_B2" role="textbox" tabindex="0" aria-labelledby="MailCompose.SubjectWellLabel">
To this:
<input class="_f_ql _f_rl textbox allowTextSelection" autoid="_f_B2" role="textbox" tabindex="0" aria-labelledby="MailCompose.SubjectWellLabel" maxlength="255">
Once it is in the non-placeholderText state with maxlength = "255", I am able to successfully change the innerText on it using textFieldElement.innerText = "Example";, and on submit, this gets sent correctly.
However, I cannot assume that the Subject element will ever be clicked, so I must work with the placeholderText version of the subject element first and somehow get it to reproduce this behavior where it goes into the other state. So far, I have tried the following without success:
Focusing the placeholderText subject element, then setting its innerText.
Changing the placeholderText subject element's attributes to match the non-placeholderText version of it, then setting its innerText.
http://msdn.microsoft.com/en-us/library/office/fp161027(v=office.1501401).aspx
Looks like you need to use
Office.context.mailbox.item.subject to set the subject. Outlook uses an API, so you need to use the API methods.
Can I get the value of a text field in html without a form and without submit?
I currently have a form on my website and inside this form I have a textfield. Unfortunately I can't have 2 forms at the same time (but I actually need two seperate actions), so I am looking for a way to get the value of the textfield without a submit.
All help is appreciated!
Try document.getElementById("textfield-id").value
document.getElementById('my_txt_box_id').value
where your text box 's id is "my_txt_box_id"
Does that fit your need ?
You can get a reference to the text field element (via getElementById or any of several other DOM mechanisms), and then look at its value property.
Separately, if your form element has a name, and your input element has a name, you can access them via window: window.formName.textFieldName.value I don't think this is covered by an active spec (yet), but it probably will be at some stage (probably by an evolution of this draft spec or a replacement of it) as it's nearly universally supported.
References:
DOM2 Core
DOM2 HTML Bindings
DOM3 Core
HTML5 APIs
Alternately:
...I can't have 2 forms at the same time (but I actually need two seperate actions).
You can have two submit buttons with the same name but different values, and differentiate between which one was clicked on the server (the value for the one that was clicked will be sent). So if you have two submits called "command" and one has the value "Foo" and the other "Bar", clicking the "Foo" button sends command=Foo to the server along with the various form fields, whereas clicking the "Bar" button sends command=Bar to the server with the other fields.
Maybe you can use this jQuery / AJAX to submit the form without refreshing te page?
http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/
else you can use javascript:
document.getElementById('id').value