How to add Name and ID attributes to React FlatPickr? - reactjs

Is there anyway to add a name and ID attribute to Flatpicker? When I add it in the code, it gets removed when rendered in the browser.
Code:
<Flatpickrdatetime type="monthSelect" id="startDate" name="startDate" onChange={this.handleChange} />
Rendered:
<input class="makeStyles-flatpickr-62 form-control input" placeholder="mm/yy" tabindex="0" type="text">
What I would like when rendered:
<input class="makeStyles-flatpickr-62 form-control input" placeholder="mm/yy" tabindex="0" type="text" name="startDate" id="startDate">

Related

Cannot enter text into input field React

I'm creating a signup model form with a react-responsive-modal library. I wrote my Modal like this
<Modal open={this.state.openCreateAlbum} onClose={this.onCloseModalCreate}>
<div className="modal-body">
<h2>Get Started Absolutely<span> Free!</span></h2>
<span className="subtitle">No credit card needed</span>
<form className="contact-form form-validate3" novalidate="novalidate">
<div className="form-group">
<input type="text" name="name" id="name" placeholder="First Name" required="" autocomplete="off" aria-required="true" />
</div>
<div className="form-group">
<input className="form-control" type="email" name="email" placeholder="E-mail" required="" autocomplete="off" aria-required="true" />
</div>
<div className="form-group">
<input type="password" name="pass" className="form-control" placeholder="Password" required="" autocomplete="off" aria-required="true" />
</div>
<input className="btn btn-md btn-primary btn-center" id="sign_up" type="button" value="Sign Up" />
</form>
</div>
</Modal>
Notice that for First Name field I'm not using className=form-control and for other fields, I'm using that className.
The problem I got is when I run that. I cannot enter text to email and password field but it's fine with the first name field. I don't know why and how to fix that. I followed a tutor video and he didn't have that issue. Here is the link to the video https://www.youtube.com/watch?v=YLQXEHDXnlU
Ps: Im using this library for Modal component https://www.npmjs.com/package/react-responsive-modal

How to create label with textfield to the right using Material UI React?

I am trying to figure out how to take either the TextField component or use the Input and InputLabel components to make it so that I have a label and the textfield is to the right of the label?
You can try this :
<div>
<form onSubmit={this.onSubmitHandler}>
<label htmlFor="name">Name : </label>
<input type="text" id="name" onChange={this.onChangeHandler}/>
<label htmlFor="age">Age : </label>
<input type="text" id="age" onChange={this.onChangeHandler}/>
<label htmlFor="hair">Hair : </label>
<input type="text" id="hair" onChange={this.onChangeHandler}/>
<button>Add New</button>
</form>
</div>
This will give you something like this :

salesforce web to lead with "notes"

I'm trying to use Web to Lead functionality of salesforce. I can create a lead, but the Notes field does not get the data I supplied in the form. Here's the form I'm sending:
<form action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
<input type=hidden name="oid" value="xxxxxxx">
<input type=hidden name="retURL" value="http://www.mycompany.com">
<label for="first_name">First Name</label><input id="first_name" maxlength="40" name="first_name" size="20" type="text" /><br>
<label for="last_name">Last Name</label><input id="last_name" maxlength="80" name="last_name" size="20" type="text" /><br>
<label for="email">Email</label><input id="email" maxlength="80" name="email" size="20" type="text" /><br>
<label for="company">Company</label><input id="company" maxlength="40" name="company" size="20" type="text" /><br>
Notes:<textarea id="00N6100000C5D5Z" name="00N6100000C5D5Z" type="text" wrap="soft"></textarea><br>
<label for="street">Street</label><textarea name="street"></textarea><br>
<input type="submit" name="submit">
</form>
Every field gets populated in the new lead entry, except Notes. Has anyone ran into this issue? How did you resolve it?
Thanks in advance!
I haven't got why you have specified type="text" with your textarea. Textarea itself is a type.
Can you replace
Notes:<textarea id="00N6100000C5D5Z" name="00N6100000C5D5Z" type="text" wrap="soft"></textarea><br>
With:
Notes:<textarea id="00N6100000C5D5Z" name="00N6100000C5D5Z" wrap="soft"></textarea><br>
Give it a try.

ng-required not working when submitting a form

I have the following code in an input text box with the required attribute, but when I tab off of the field or submit the form, it doesn't stop the form from submitting and informing the user the field is required.
<div class="col-sm-8">
<input type="text" ng-required="true" class="form-control"
placeholder="Enter Total Amount" id="txtTotalAmount"
ng-model="formCtrl.AddCheckDeposit.TotalAmount" />
</div>
What do I need to do to make the required directive to work?
For that you should fire ng-submit event when form is valid
ng-submit="myForm.$valid && submit()"
Seems like you have also missed the name attribute on your input field, also for showing an error you could use ng-show/ng-messages directive
<form name="myForm" ng-submit="myForm.$valid && submit()">
<div class="col-sm-8">
<input type="text" ng-required="true" class="form-control" placeholder="Enter Total Amount" name="txtTotalAmount"
id="txtTotalAmount" ng-model="formCtrl.AddCheckDeposit.TotalAmount" />
<span ng-show="myForm.txtTotalAmount.$error.required">Required</span>
</div>
</form>

Salesforce Web to Lead Form text area field not submitting

I have a salesforce web to lead form. Everything seems to be going through to salesforce except the comments textarea box. Any idea why just this field wouldn't work?
The code for the texarea field (there is an actual number in id and name)
  <form class="sf-form" id="contact-1"
action="https://www.salesforce.com/servlet/servlet.WebToLead?
encoding=UTF-8" method="POST">
<div class="sf-left">
<label class="sf-label">First Name</label><input class="sf-text"
id="first_name" type="text" maxlength="40" name="first_name"
size="20" />
<label class="sf-label" for="last_name">Last Name</label><input
class="sf-text" id="last_name" type="text" maxlength="80"
name="last_name" size="20" />
<label class="sf-label" for="email">Email</label><input class="sf-
text" id="email" type="text" maxlength="80" name="email" size="20"
/>
<label class="sf-label" for="phone">Phone</label><input
class="sf-text" id="phone" type="text" maxlength="40" name="phone"
size="20" />
<label class="sf-label" for="company">Company</label>
<input class="sf-text" id="company" type="text" maxlength="40"
name="company" size="20" />
</div>
<div class="sf-right">
Comments:<textarea name="000number here" id="same 000number here"
class="sf-textarea" rows="10" type="text" wrap="soft" ></textarea>
<br>
<input type="submit" name="submit" class="sf-submit">
</div>
<div class="clearfix"></div>
</form></div>
In debug mode I am getting the following for the textarea field
xxxxxxxx(some long number here): This is another test to get the debug code(long number here): Whatever I put in comments
I'm not sure if those long numbers have to do with their account, I'm not familiar with salesforce... are they debug codes?
Thanks!
Ahh. Well the client was showing the form to Salesforce (they wouldn't give me access) and I guess it is working now. That must've been the issue, because I haven't changed anything on my end. Thanks for your time! – Beth 2 mins ago

Resources