I am using react-final-form and TextareaAutosizein my example .I am trying to get the value of text-area but not able to do that.
I am able to get value of input field but not textarea
here is my code
https://codesandbox.io/s/react-final-form-simple-example-rd3rc
<div>
<label>Text area Name</label>
<Field
component={TextareaAutosize}
type="textarea"
name="operatingPinCode"
placeholder="Notes"
label="About"
/>
</div>
API link
https://final-form.org/docs/react-final-form/examples/simple
https://www.npmjs.com/package/react-textarea-autosize
Your final-form code is working fine. The problem I think lies with TextAreaAutosize, since it doesn't know how to pass data directly to your form. So you might need to add a handler on that field for the onChange event.
Based on the final form documentation, this code sample below seems to work just fine:sandbox-code Just checkout the second attempt section.
You can get value by this pop:
`onChange={(event) => {
console.log(event.target.value)
}}`
I have used google place API following this tutorial but I am getting this error below:
Cannot find control with unspecified name attribute
I have tried also this all hint stackoverflow link
Code
<div class="form-group">
<input #search
type="text"
placeholder="search for location"
autocorrect="off"
autocapitalize="off"
spellcheck="off"
class="form-control"
[formControl]="searchControl"
name="searchControl">
</div>
You should post some code, we're not mediums !
But seeing your error, I would say you're using reactive forms, and you forgot to create your reactive forms.
This means on your input, you have [formControl]="" or formControlName="" attribute, which can't find the corresponding variable.
Could you post the related code of that please ?
Your HTML code looks fine for me, I think this has occurred because you have not initialized searchControl variable in the corresponding JavaScript/TypeScript file.
Add this line into your class in JavaScript/TypeScript file
searchControl = new FormControl();
Materialize.css input tags onblur throw a console error.
I am building a Rails 5 app and using materialize css. When I add an input element like this:
<div class="input-field">
<label for="name">Email</label>
<input id="name" name="project[name]" type="text">
</div>
I get the following error.
jquery.js:4411 Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: required
at Function.a.error (jquery.js:4411)
at PSEUDO (jquery.js:4757)
at y (jquery.js:5275)
at a.compile (jquery.js:5414)
at x (jquery.js:5491)
at a (jquery.js:3984)
at Function.a.matchesSelector (jquery.js:4377)
at Function.filter (jquery.js:5734)
at init.is (jquery.js:5591)
at window.validate_field (materialize.min.js:6)
If I remove type="text" then the error goes away BUT the input label text stays in the way of my user input. If I put it back in, the label text will move out of the way on focus, but I get console errors which affects the rest of my js. Does anyone know how to resolve this issue?
I'm trying to pass the entered text to the controller using an ajax request. But i'm getting athe error "Uncaught TypeError: Cannot set property 'value' of null " when I tried to execute JS file..
Here is the HTMLcode:
<form action="">
<input type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item..." value="text" />
<input type="button" class="searchbox_submit1" name="submit" value="text" onClick="javascript:getSearchText();">
</form>
Here is the JS code:
function getSearchText() {
var searchText = document.getElementByName("search").value;
h_url=document.getElementById("u").value;
var theURL = h_url+'search_all/' + deptid + '/' + searchText + '/1';
$.ajax({
url : theURL,
fail: function(){
},
success : function() {
},
error:function(){
}
});
}
Please help me to fix this.
You don't have an element with the id u.That's why the error occurs.
Note that you are trying to get the value of the input element with the name 'u' and it's not defined in your code.
The problem may where the code is being executed. If you are in the head of a document executing JavaScript, even when you have an element with id="u" in your web page, the code gets executed before the DOM is finished loading, and so none of the HTML really exists yet... You can fix this by moving your code to the end of the page just above the closing html tag. This is one good reason to use jQuery.
In case anyone landed on this page for a similar issue, I found that this error can happen if your JavaScript is running in the HEAD before your form is ready. Moving your JavaScript to the bottom of the page fixed it for my situation.
The problem is that you haven't got any element with the id u so that you are calling something that doesn't exist.
To fix that you have to add an id to the element.
<input id="u" type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item..." value="text" />
And I've seen too you have added a value for the input, so it means the input is not empty and it will contain text. As result placeholder won't be displayed.
Finally there is a warning that W3Validator will say because of the "/" in the end. :
For the current document, the validator interprets strings like according to legacy rules that break the expectations of most authors and thus cause confusing warnings and error messages from the validator. This interpretation is triggered by HTML 4 documents or other SGML-based HTML documents. To avoid the messages, simply remove the "/" character in such contexts. NB: If you expect <FOO /> to be interpreted as an XML-compatible "self-closing" tag, then you need to use XHTML or HTML5.
In conclusion it says you have to remove the slash. Simply write this:
<input id="u" type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item...">
I knew that i am too late for this answer, but i hope this will help to other who are facing and who will face.
As you have written h_url is global var like var = h_url; so you can use that variable anywhere in your file.
h_url=document.getElementById("u").value;
Here h_url contain value of your search box text value whatever user has typed.
document.getElementById("u");
This is the identifier of your form field with some specific ID.
Your Search Field without id
<input type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item..." value="text" />
Alter Search Field with id
<input id="u" type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item..." value="text" />
When you click on submit that will try to fetch value from document.getElementById("u").value; which is syntactically right but you haven't define id so that will return null.
So, Just make sure while you use form fields first define that ID and do other task letter.
I hope this helps you and never get Cannot set property 'value' of null Error.
guys This error because of Element Id not Visible from js Try to inspect element from UI and paste it on javascript file:
before :
document.getElementById('form:salesoverviewform:ticketstatusid').value =topping;
After :
document.getElementById('form:salesoverviewform:j_idt190:ticketstatusid').value =topping;
Credits to Divya Akka .... :)
It seems to be this function
h_url=document.getElementById("u").value;
You can help yourself using some 'console.log' to see what object is Null.
h_url=document.getElementById("u") is null here
There is no element exist with id as u
Add defer to your script tag, if it's in header. It will allow your script to execute after the DOM is loaded.
<script src="script.js type="text/javascript"></script>
It should look like this:
<script src="script.js type="text/javascript" defer></script>
I've not used Knockout Validation and I'm trying to get a feel for what can be done with it.
I'm trying to figure out if it is possible to display an icon rather than an error message to the right of an input tag when there is an error. And, if the user hovers over the icon, the error message is displayed.
Has anyone done this or have an idea of how to accomplish this?
Thanks.
EDIT: (more detailed example of what I'm trying to do)
Say I have the following in my view model:
var firstName = ko.observable().extend({required: true});
My HTML:
<input data-bind="value: firstName" />
My understanding is that if the first name textbox were left blank, then (by default) some text would be displayed to the right of the textbox stating that this field is required.
What I'm trying to understand is how to change the default behavior of displaying error text on the right to displaying an icon on the right which, when hovered over, will popup the error message.
So, a start would be something like:
<div data-bind="validationOptions: {messageTemplate: 'myCustomTemplate'}">
<input data-bind="value: firstName" />
<input data-bind="value: lastName" /> //also required
</div>
<div id='myCustomTemplate'>
//This icon should only display when there is an error
<span class="ui-icon ui-icon-alert" style="display: inline-block"/>
//css/javascript would display this when user hovers over the above icon
<span data-bind="validationMessage: field" />
</div>
I have no clue if I'm using the messageTemplate feature correctly. I also wouldn't know what to bind the text to in the customTemplate in order to display the correct error message for each error. IOW, firstname and lastname could have custom error messages. If they are both using the same template, how does the template accomodate the custom error message?
I hope that makes sense.
It is possible to show an icon and to display the error message on hovering.
In one project we are doing something similar. We show a badge with a error number, but we use decorateElement to highlight the fields and errorsAsTitleOnModified to show the errors when hovering over the input.
To create a error messageTemplate you should wrap your template in a script tag. It works like templates of the ko template binding.
Inside the template you can access the validated observable by referring to 'field'. The error message is stored in the property 'error' of your observable.
<script type="text/html" id="myCustomTemplate">
<span data-bind="if: field.isModified() && !field.isValid(),
attr: { title: field.error }">X</span>
</script>
I have created a fiddle to show this in action: http://jsfiddle.net/nuDJ3/180/