Users enter text string into FormControl, I want to put it back trimmed and lower-cased.
handleSubmit(event) {
event.preventDefault();
console.log("submitted: "+ this.vehicleReg.value.trim().toLowerCase());
this.refs.vehicleReg.value=this.vehicleReg.value.trim().toLowerCase();
}
render() {
return(
<form className="user-data" onSubmit={this.handleSubmit.bind(this)}>
<FormGroup label="Data">
<FormControl
inputRef={(input) => this.vehicleReg = input} type="text"
placeholder="Reg Number"
Add a name attribute to your FormControl then do the following in handleSubmit
document.querySelector('[name="regNum"]').value = document.querySelector('[name="regNum"]').value.trim().toLowerCase();
Related
I'm learning how to use meteor with react so forgive the basic question.
I want to create a form that populates when the page loads if the data has already been submitted. I've been trying to use getInitialState however I'm not getting anywhere. Some help would be really appreciated.
Path: MyResolutions.jsx
export default class MyResolutions extends Component {
getInitialState() {
return {
resolution: Resolutions.find().fetch(),
timeToComplete: Resolutions.find().fetch(),
};
}
render() {
return (
<form onSubmit={this.addResolutions.bind(this)}>
<input
type="text"
ref="resolution"
placeholder="Resolution title"
value={this.state.resolution} />
<input
type="text"
ref="timeToComplete"
placeholder="Time To Complete"
value={this.state.timeToComplete} />
<button type="submit">Submit</button>
</form>
)
}
}
This depends on the shape of your data coming from your initial state:
getInitialState() {
return {
resolution: Resolutions.find().fetch(),
timeToComplete: Resolutions.find().fetch(),
};
}
Assuming that this.state.resolution returns something like:
{
value: 'some string'
}
You would actually have to do something like this.state.resolution.value . So maybe try console.log(this.state.resolution) to get the shape of your data and then use dot notation to display the keys you need.
Although you don t need to look at the code below to understand the question, I added it in case you need to visualize the scenario. Whenever the form submits, addList method is called.
And the component updates itself. But I didn t expect this behaviour, that s why at first I did try to assign my lists to state, so that when the state changed the component would update itself as I wanted.
Anyway it already updates itself, but why ? Which way is more efficient ?
import React,{Component} from 'react';
import TrackerReact from 'meteor/ultimatejs:tracker-react';
import {Lists} from '../lib/collections/lists.js';
export default class App extends TrackerReact(Component) {
constructor(){
super();
// this.state = {lists : this.lists()}
}
lists(){
return Lists.find().fetch();
}
addList(e){
e.preventDefault();
//let text = this.refs.list.value ;
let text = this._inputList.value ;
console.log(this._inputList.value);
Lists.insert({
title : text
});
this._inputList.value = "";
//this.setState({lists : this.lists()});
}
render() {
return (
<div>
<h2>Lists</h2>
<ul>
{this.lists().map((a,b)=>(
<List key={a._id} title={a.title} />
))}
</ul>
<form onSubmit={this.addList.bind(this)}>
<input
type="text"
ref={(input)=>{
this._inputList = input ;
}}
placeholder="add list bro"
/>
</form>
</div>
)
}
}
So if we add a componentWillUpdate react life-cycle method to see if it rerenders ;
componentWillUpdate() {
console.log('will update');
}
When form submitted "will update" is logged on console as expected. However if we update addList as ;
addList(e){
e.preventDefault();
// nothing else.
}
We don t see the output "will update" on console. Which means method being called doesn t require the component to be rerendered. There is no such a rule. In this case , it is probably about TrackerReact. TrackerReact might force the component to rerender.
I am using Meteor with React. Consider this simple component below. There is a local mini-Mongo collection CommentsCollection. The component will insert a row in it when componentWillMount will be called. getMeteorData will return the first record in the collection and we'll be able to modify the title. Problem: if I place my cursor at the start of the title and start typing, after the first character update the cursor will jump to the end of the string and the rest of my typing will be placed there. How do I work around this?
CommentsCollection = new Meteor.Collection(null); // Local mini-mongo collection
EventTestComponent = React.createClass({
mixins : [ReactMeteorData],
componentWillMount(){
CommentsCollection.insert({title:"test title", message:"some test message"});
},
getMeteorData(){
return {
comment: CommentsCollection.findOne()
};
},
handleTitleChange(e){
CommentsCollection.update({_id: this.data.comment._id}, {$set:{title: e.target.value}});
},
render(){
if(this.data.comment) {
return (
<div>
<input type="text" value={this.data.comment.title} onChange={this.handleTitleChange}/>
</div>
);
}else{
return <div>Loading...</div>
}
}
});
I came up with this solution right after I posted the question:
<input type="text"
defaultValue={this.data.comment.title}
onKeyUp={this.handleTitleChange}/>
So: change value to defaultValue, and onChange to onKeyUp. Works like a charm!
I have a simple problem. I want to update my classes inside my inputs on form submit.
<div class="form-group">
<input class="form-control" ng-class="{'has-error': signup.$submitted && signup.name.$invalid}" type="text" name="name" ng-model="formData.name" required minlength="2" placeholder="Full Name">
</div>
Here's my app.js:
spinnrApp.controller('FormController', ['$scope', '$http', '$state', function (scope, http, state){
// get list of cities and store it to select
http.get('cities.json').success(function(data){
scope.cities = data;
})
// we will store all our form data in this object
scope.formData = {};
// function to process the form
scope.processForm = function(isValid) {
scope.$submitted = true;
if(isValid && state.$current=='registration.spinnrapp') {
state.go('registration.artist');
} else if(isValid && state.$current=='registration.artist') {
state.go('registration.share');
} else if(!isValid && state.$current=='registration.artist') {
alert('Please make sure you have selected an artist.');
} else if(!isValid && state.$current=='registration.spinnrapp') {
return;
}
};
}]);
When I execute my submit via ng-click calling this function, my signup.$submitted still stays as false. I also have a reference from this Plunker: http://plnkr.co/edit/xDIzC0A50cXxMpIHeP3C?p=preview
That Plunkr updates its class. Why isn't mine doing the same? Am I doing something wrong?
I have this form where the user can insert a quantity in an input field, and see the total in another input field. It works when you insert the numbers manually and I want it to work with buttons too, but i just can't get it to work.
Here's the code:
HTML
<form id="buyForm" method="post" action="cart.php">
<label>Choose quantity</label>
<div>
(+)increase
<input type="text" id="qty1" name="qty[]"/>
(-)decrease
</div>
<input type="text" id="cost1" value="50" style="display:none; visibility:hidden;" name="cost[]" />
<input type="text" id="price1" name="price[]" />
</form>
Js
// Calculate
function calc(idx) {
var price = parseFloat(document.getElementById("cost"+idx).value)*
parseFloat(document.getElementById("qty"+idx).value);
// alert(idx+":"+price);
document.getElementById("price"+idx).value= isNaN(price)?"0.00":price.toFixed(2);
}
window.onload=function() {
document.getElementsByName("qty[]")[0].onkeyup=function() {calc(1)};
document.getElementsByName("cost[]")[0].onkeyup=function() {calc(1)};
}
//Increase/decrease buttons
$(function() {
$(".button").click(function() {
var $button = $(this);
var oldValue = $button.parent().find("input").val();
if ($button.text() == "+") {
var newVal = parseFloat(oldValue) + 1;
// AJAX save would go here
} else {
// Don't allow decrementing below zero
if (oldValue >= 1) {
var newVal = parseFloat(oldValue) - 1;
// AJAX save would go here
}
}
$button.parent().find("input").val(newVal);
});
});
Here it is as jsfiddle: http://jsfiddle.net/rcheH/5/
Can someone please help me with this?
Thanks in advance!