Develop Reference

function running before call [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 months ago.
Improve this question
Can someone explain why the following code is displaying "library empty"? I'm not changing the input nor clicking on it, I don't understand why the function is being run.
import './App.css';
import {useState} from 'react'
function App() {
const [library, setLibrary] = useState()
const handleFile = () => {
if (library) console.log('library full')
console.log('library empty')
}
return (
<form>
<label>
<div className='btn-three'>
Select Directory:
<input type="file" onClick={handleFile()}/>
</div>
</label>
</form>
);
}
export default App;

In JSX function was directly called(handleFile()), instead of providing function reference(handleFile), so function got executed when browser loads scripts.
<input type="file" onClick={handleFile()}/>
Change above code to below
<input type="file" onClick={handleFile}/>

Change the function called
<input type="file" onClick={handleFile}/>

example on how and when to use focus in react [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
I see many questions on how to use focus() on a ref in react, but I seem to miss the general understanding of how and when exactly should I use focus.
can anyone offer an example?
I read https://reactjs.org/docs/refs-and-the-dom.html and still missing the point
thanks!

Sure.
ref are used to reference an element's DOM, therefore you must have the ref attribute for that element set, since we are going to be accessing it outside of the render method.
Ref is created using React.createRef() method provided by the react library.
Let's suppose that you want to focus on email address of a form when you load your login page, the page has render method as
render() {
return (
<form>
<input id="email" type="email" />
<input id="password" type="password" />
<button type="submit">Login</button>
</form>
);
}
and since you want to set the focus on the email field when the page loads, therefore you are going to use the componentDidMount() lifecycle hook.
But before that we need to create a ref
constructor() {
super();
this.inputElement = React.createRef();
}
and then assign the reference to the email input
<input id="email" type="email" ref={this.inputElement} />
finally we would focus the email when the page loads
componentDidMount() {
this.inputElement.current.focus();
}

Why I can't get this element identified by an id attribute? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I have this element, it is auto generated by mcssl checkout form. It is a custom field. I'm trying to select it using javascript like so:
var form_field_gclid = document.getElementById("#ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox");;
console.log(form_field_gclid);
<input name="ctl00$ctl00$mainContent$scPageContent$customFieldsControl$customFieldsRepeater$ctl00$customFieldTextBox" type="text" maxlength="200" size="50" id="ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox" class="text">
But I'm getting null as a result. I've tried also, document.querySelectorAll(...); but the same result. It's working when I tried it from console but I'm wondering why it won't work if it's on page javascript. Any ideas would be appreciated. Thank you.
I tried getting rid of the # sign but same result.
<script type="text/javascript">
(function() {
var form_field_test = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox");;
console.log(form_field_test);
}());
</script>
This is the full script I'm using.

You do not need the # in your call to document.getElementById. Simply remove it.
var form_field_gclid = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox");
If you were using jQuery, however, you would need it:
var myElement = $('#myElementId');
But since you are using vanilla JS, simply pass in the element's id as a string.

You have to put the script below the html of the input you are trying to hook.
If the form is not rendered the script will return null.
In your webpage you run the script before the input form is rendered.

I think you are looking for the input value. Right?
Also i added a button for you to give you an example about how to add more functionality. For example, how to add a background color to your input
var form_field_gclid = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox").value;
console.log(form_field_gclid);
// add color to your input
function addColor(){
form_field_gclid = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox").style.backgroundColor = "green";
}
If you mean to get the value of the input, i think you are looking for this:
<input name="ctl00$ctl00$mainContent$scPageContent$customFieldsControl$customFieldsRepeater$ctl00$customFieldTextBox" type="text" maxlength="200" size="50" id="ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox" class="text" value="1">
<button onclick="addColor();">change color</button>

You could try this old school vanilla ::
var form_field_gclid = ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox;
console.log( form_field_gclid );
<input type="text" maxlength="200" size="50" id="ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox" class="text">

Click on <div> to focus <input> (React) [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
The community reviewed whether to reopen this question last year and left it closed:
Original close reason(s) were not resolved
Improve this question
I know how to do this with jquery. But I am stuck with React: How would I focus an input field, whenever the user clicks on a div?

You need to have an onClick event on the div and the call the focus() function on the input element that you can access by refs in react
class App extends React.Component {
render() {
return (
<div>
<div onClick={() => {this.myInp.focus()}}>Focus Input</div>
<input type="text" ref={(ip) => this.myInp = ip} />
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
In the above snippet ref={(ip) => this.myInp = ip} is a callback approach of declaring refs which is recommended by react-docs

Check this https://facebook.github.io/react/docs/refs-and-the-dom.html
Via ref you can anything jquery-like.

How to save text input as a variable and then submit to server (ajax and javascript) [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I want to save 'gender' and 'age' input as a variable and then submit it to the server using ajax. When I requested it output to the console, however, the gender variable worked but the age variable did not. (This is part of a longer html code)
<div id="page1" class="instDiv">
<h2>Please select your gender</h2><br>
<input type="radio" name="gender" id="gender" value="female">female<br>
<input type="radio" name="gender" id="gender" value="male" >male<br>
<h2>Please provide your age:</h2> <input type="text" name="age" id="age"><br>
</div>
And then later in the code, I ask it to print to the console. The console outputs gender correctly but puts age as 'undefined'.
subjgender= $("#gender").val();
subjage= $("age").val();
console.log(subjgender);
console.log(subjage); }
My question is first, why doesn't it correctly output the age, and second, how do I get it to save to the server as actual data?

replace this it will work you missed the #.
subjage= $("#age").val();

As said by SRK, you forgot the identifier for Ids in your jQuery selector (#).
About the POST:
To post to the server, you can either wrap that code with a form tag and use a standard input of type submit, or use a normal ajax post (as you asked), such as:
$.ajax({
url: "/YourPostUrlHere",
type: "POST",
data: { 'age': $("#age").val(), 'gender': $("#gender").val() },
success: function (result) {
//Do whatever you want with the result.
}
});
More info here: http://api.jquery.com/jquery.post/