i am developing chrome extension in google calendar.
The description of the meeting is updated through jquery as shown below,
<div class="ui-sch">
<textarea id=":24" name=":24" class="textinput" style="overflow: hidden; resize: vertical;" rows="3" aria-labelledby=":13.descript-label">
</textarea>
</div>
var el= document.getElementsByClassName("textinput");
for(i=0; i < el.length; i++)
{
if(el[i].type == "textarea")
{
el[i].value="sample description";
}
}
The content gets updated to the textarea as expected. but when we submit the form, the description is not submitted. Where as if we manually press enter after updating the content, the updated value from javascript is submitted.
I suspect, the data change in description box is binded to another variable. How to update the data change in desc to the form submission ?
update :
Steps to simulate
open calender.google.com
click create meeting paste the above
javascript in your console. (observe the value of description field)
Now click save
(the meeting description will not be saved if you open the meeting)
Now create a meeting and follow the above steps 1-3.
click on the description box and hit enter or any other character.
Save the meeting.
(The description is saved to the meeting)
In your example page, it seems as the Google API only recognizes changes when it listens a change event. You can simulate it by
el[i].dispatchEvent(new Event('change'));
not verified, just a suggestion:
if(el[i].type == "textarea")
{
el[i].value="sample description";
el[i].onchange();
}
Related
Using React/Bootstrap to create a web app and have noticed a bug where when I open the form, the required textarea will be highlighted in red before I click submit.
Imgur album to show the problem (first picture is when the form is opened, second is after clicking submit) - https://imgur.com/a/g3wwekt
I tried a couple different things, and the only one that worked was to remove the required tag (but this is obviously not acceptable).
Here is the code for the textarea:
<textarea
className="form-control"
name="ticketNewDetailedInfo"
rows="5"
value={this.state.ticketNewDetailedInfo}
onChange={this.handleInputChange}
required
/>
Obviously it should only be highlighted in red if it is empty when the user submits the form.
Remove the required attribute from the textarea and handle the form validation yourself. When the form is submitted check to make sure all the fields contain values. If it doesn't since you are using bootstrap you can give the field a class of is-invalid and it will turn the input field red as a visual queue for the user. Something quick and simple to get the idea would be:
validateFormValues( values ) {
var passed = true;
for( let i = 0; i < values.length; i++ ) {
if( values[i] === '' ) {
passed = false;
}
}
return passed;
}
Then in your textarea you could write
className={ `form-control ${ !this.state.passed ? 'is-invalid' : ''}` }
this.handleInputChange is what's checking that required field. You're calling this on the onchange event. This means as soon as you click into the textarea, it is checking those required fields.
Change your trigger event to something like onsubmit instead.
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.
I wanted to construct a form, When it loads, it should have data which is currently stored in back end DB. At the same time user should be able to change content and submit form to update DB.
For this purpose I have used input and textarea elements. textarea is used to show email. But after update data, data of input elements changed but not for textarea
Here is code:
In HTML Form this is textarea, Where text is echoed via PHP
<textarea placeholder="EMAIL" class="form-control" rows="2" cols="6" id="email" style="resize:none;"><?php echo $retention_config['email'] ?></textarea>
In browser I updated the email content of this
After that before submitting data, I wished to validate that this field should not be empty, for this used JS
Here is JS code:
var email_text = $('#email').text().trim();
if(email_text == "") {
alert("Email is Mandatory");
}
But, I was not getting this alert, after deleting whole content of email, Then I checked the value of this using javascript.
console.log('#email').text();
I got the text which, i initially loaded via PHP, When I updated text in form it should be updated then, Please help, as I ran into this problem for first time. Please forgive me if there is any error in this post as I am learning to post in stack overflow, earlier only I got ready made help from this platform only.
This is an input so you need to get the value of it, as you are using jQuery you can use val(), like so:
var email_text = $('#email').val().trim();
if(email_text == "") {
alert("Email is Mandatory");
}
and your console log would be:
console.log($('#email').val());
You need to use val instead of text
var email_text = $('#email').val().trim();
if(email_text == "") {
alert("Email is Mandatory")
}
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>
Basically my problem is that when i add an element from the javascript (using jquery) the element that i added shows up in the web inspector but doesn't display in the browser at all.
What i am trying to do is simulate something i liked about google+ when it first came out, which is when you want to the user to enter a list of item, you provide them with one text field and once they start to add something to that text field then instantly after the first character is typed a new text field with appear under that. So I'm my code, i have the user entering a series of goals they want to achieve, i provide them with a single text field (or multiple if the user is editing the list they previously made) and once the last text field has data then it will programmatically create a new text field.
HTML:
<div class="field-group clickToAddGroup">
<label>Goals: </label>
<div class="input">
<input type="text" name="goals" value="Goal1">
<input type="text" name="goals" value="Goal2">
<input type="text" name="goals" value="Goal3">
<input type="text" name="goals" value="Goal4">
<input type="text" name="goals" placeholder="Type to add Goal" class="clickToAdd">
</div>
</div>
Javascript:
$(".clickToAdd").live('keyup',function(){
console.log("key up triggered");
if( $(this).val() != '' )
{
console.log("cloning in process");
var theClone = $(this).clone().val(''); // Set the new element to null
theClone.appendTo( $(this).parent() ); // Clone Parent
$(this).removeClass('clickToAdd'); // Remove the click to add class
console.log("clone complete");
}
console.log("key up finished");
console.log("----");
});
$('.clickToAddGroup input').live('blur', function(){
if( $(this).val() == '' && !$(this).hasClass('clickToAdd') )
$(this).remove();
});
Now the code above actually works, however when the page first loads when i click (or tab to) the last text field (one that has the clickToAdd class) and begin typing, i see in the web inspector that the javascript ran correctly and created the new field and placed it where it should, but i don't actually see it on the screen. But when i take the content that i had just wrote in the text field, delete it, and lose focus (triggering 'blur') the text field is deleted and then i can see the textfield that was shown. From this point on when i add content to the last field (one with the clickToAdd class) it works 100% perfectly, it adds the element and is visible via both the web inspector AND is displayed on screen.
Edit: I copied the code to jsfiddle (included css i am using as well) and tried it there and it happens to work perfectly as intended without the issue i am having. http://jsfiddle.net/qz2QK/2/
Edit 2: Added "var" to the line "var theClone = $(this).clone().val('');" so that its not implicitly a global variable.