I'm trying to fill a text input of email address in signup website
I got the input element (on the second step after selecting the plan) and set its value to whatever I need by:
document.getElementsByTagName("input")[0].value = "somemail1231"
the input was filled but when I press "Next" to continue, it says "Please enter mail address" as the input field was empty.
How can I fix this?
P.S: after some hours of trying I guess its because there is no keyboard button press event, but I'm not sure about that and a simulation of keyboard key press isn't working for me.
You should fire an event for changes
let input = document.getElementsByTagName("input")[0]
input.click() // better than focus for your case
input.value = "sadsad"
var ev = new Event('input')
input.dispatchEvent(ev)
Related
I have a text field that should be filled before custom saving through HTML custom button.
When a user fills this field and tries to save through custom button, the text inside this field is null even if the user fills it.
Any suggestions Please?
Many Thanks for replying to my query. Actually, I am calling the below function from custom HTML button and I saw the result from alert message as NULL value until I leave the text box. Once I click some other Field then I am getting right value and saving the record successfully. I have posted my code below please have a look and suggest me how I can achieve it. So how to get the text value if a user doesn't leave the text box and click on the Save button?
function createRecord() {
var oDescription = Xrm.Page.getAttribute("new_description").getValue();
if (oDescription != null) {
var callentity = {};
var activityId;
var currentUserId = Xrm.Page.context.getUserId();
var oLeadId = Xrm.Page.getAttribute("new_lead").getValue()[0].id;
callentity.Subject = "Call Activity";
callentity.Description = oDescription ;
XrmSvcToolkit.createRecord({....Some more functions here...
})
}
HTML Button code for calling above function
<input id="SaveCall" onclick="parent.createRecord()" type="button" value="Save Phonecall"></p>
Xrm.Page.getAttribute(arg).getValue(val) won't return a value until focus is lost from the arg attribute (as you've found out).
Some options you could try:
document.getElementById('new_description_i')[0].value
Removing focus from "new_description" on click of your button.
Javascript getting keypress "Enter" Event on Input Type Text
I have 3 text inputs, 1 dropdownlist and 10 rows.
Row 1 will have identifier of _1 for the 3 text input and dropdown follow by _2 for row 2.
What I wanted to achieve is:
Textfield1 ------> left_1
Textfield2 ------> center_1
Textfield3 ------> right_1
DropdownList ----> dd_1
When I press enter on left_1, I want to change the enter event as sort of "tab" to center_1, while if I do enter event at center_1, it will tab to right_1.
If I do enter event at right_1, it will go to the next row left_2.
Problem is normally if you press "tab" at right_1, it will focus to dd_1
The next key issue is, I got a submit button in the form, if I press enter at any of the form, it will just submit the form. I tried before disable the enter using checking the eventcode and prevent Default but doing so, I still unable change my enter to focus on the text field as mention above
JsFiddle on my Question
I need to able to go to row 2 at the last input for the first row upon enter.
For the first part, if the textboxes are all siblings in order, e.g.
<input>
<input>
<input>
<input>
With nothing inbetween, then you could just do something like this:
$("input[type=text]").keyup(function(e){
if(e.keyCode == "13")
{
$(this).next().focus();
}
})
JSFiddle
you can use keypress event
for expample :
var input = document.getElementById('test');
input.addEventListener('keypress', function(e) {
console.log(e.key);
if( e.key == 'Enter' ) {
...
}
});
I'm pretty new to Javascript, so I figured I'd start on a Text Based Game to start out. What I need to do, is to be able to detect when the game is waiting for a command, and when the game is waiting for an answer. Here's what I've got.
var textIn = document.getElementById('input-textbox');
var textOut = document.getElementById("output-textbox");
function process(input) {
var command = input.split(" ")[0];
if(command == "help") {
return "Help dialog";
}else{
return "Unknown command: " + input + ". Please type /help for a list of commands.";
}
}
function go() {
var input = textIn.value;
textIn.value = "";
output(process(input));
}
function output(text){
textOut.value += text + "\n";
}
function createPlayer(){
output("Please Type Your Name")
// Wait for player response and set it as a variable.
}
createPlayer();
What would be the best way to implement this?
You have a few options, you could use onclick and have a button that the user clicks and then call your functionality to fill in the answer for your HTML answer (id="output-textbox" in your example)<-- My vote *.
... or you could choose to check on which element is focused or if tab/enter is hit while in the input box and then put your answer field after the tab/enter is hit. I think the latter method, you should have a HTML5 placeholder attribute to say "hit tab{enter} when finished" or something along those lines and then check for the tab while focused on the element -- this could be accomplished with jQuery selectors or override the current focus method for that input element or potentially use document.activeElement to see what is focused on and then if it is the answer that is focused on and the input isn't blank fill it in, etc, etc, etc.
*If you are new to Javascript, I say have two buttons (one labeled 'answer' and one labeled 'clear'), and then use the onclick attribute for HTML button elements to call a Javascript method easily. This will get you started and be more straightforward, double check what you have works for DOM manipulation and move forward to having less buttons and more sleek DOM manipulation.
Good luck!
A very simple implementation is to use a form with a submit listener that cancels submission if all goes to plan. A user can enter text into the input and see the result in the textarea.
The textarea is disabled so users can't enter text into it but script can. Users can enter input then just press enter, or tab to the submit button and press enter, or click the submit button. The script runs on submit, and cancels it so they stay on the same page.
If scripting is disabled, the form will submit and you can handle things at the server.
<form onsubmit="go(); return false;">
<input id="input-textbox">
<textarea id="output-textbox" rows="20" cols="50" disabled></textarea>
<input type="submit" value="Ask question">
</form>
I have a simple form with a qty textbox. I implemented some validation for minimum qty. If a user enters a number below min qty they get a dialog box stating they are under the minimum and I set the value back to min via an onchange event in the textbox.
If you use the mouse it works. The issue is when you hit the enter key to close the box it also submits the form. I am thinking because the cursor was in the textbox before validation.
I used a check in the form with an onkeypress event to check for the enter button so you can close the box and not submit the form, but I am thinking I may want this functionality for valid quantities or higher, less I force everyone to use the submit button. Is it possible to take the focus off of the text box when the dialog box fires so a user can press enter and not submit the form but then with a good value use the enter key?
function textQuantDown() {
//Set min qauntity variable
var min_quant = document.getElementById("min_quant");
//set text box value varaible
var elProd_quant = document.getElementById("prod_quant");
var intProd_quant = (isNaN(elProd_quant.value) || elProd_quant.value.length < 1) ? 2 : elProd_quant.value;
if( parseInt(intProd_quant) < parseInt(min_quant.value)){
alert( "Minimum quantity not reached");
elProd_quant.value = min_quant.value;
}else{
elProd_quant.value = intProd_quant;}
return false;
}
<input style="border:1px solid; font-size:14px; text-align:left;width:30px;" onchange="return textQuantDown();" name="add_id[1]" id="prod_quant" size="3" type="text" value="#thisclickquant#" class="popinp" maxlength="3" />
Without being able to see the rest of your code, you could have an event listener on submit, do e.preventDefault() and sub in whatever you want for the input values before manually submitting the form via JS.
I am trying to implement a simple input mask js which will replace asterisks for any sensitive user data on the form like the social#. However, this might sound like a very stupid question, when i want to submit the form, i want to send the actual value of the textfield, the user entered. How do i go about doing that? I want to avoid submitting asterisks as the textfield value
function mask(str) {
if(str.value!=null || str.value!="") {
num = str.value.length;
var masked = "";
for(i=0; i<num; i++) {
masked = masked + "*";
}
document.getElementById(str.id).value = masked;
}
}
<input type="password" /> will do this for you automatically, no need to reinvent the wheel
Given your feedback, what about a middle-road? Keep the input box visible until text has been entered, then hide the input box when it loses focus and show a UI element to allow the user to bring the box back if needed.
Here's a quick proof-of-concept