How to add multiple lines react native web app - reactjs

How to add multiple lines. I am only getting a field for one line.
<label htmlFor="materialrequired">Material Required</label>
<input
type="text"
id="materialrequired"
name="materialrequired"
placeHolder="Material Required..."
value={materialrequired || ""}
onChange={handleInputChange}
/>

Example of creating a multi-line input field:
<textarea rows="5" cols="60" name="text" placeholder="Enter text"></textarea>

Related

how to check if an html form has been rendered on the page using nextjs

Is it possible to check if an html element(form) has been rendered?
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Using React and Nextjs.
I think you can check it using window object.
Just check it like a vanilla javascript using window.document.getElementBy....

Custom validation for two date input

I'm using Angular to create a web app. I have a form with two date inputs:
<label for="date-from">From: </label>
<input class="range-data" type="date" name="date-from" id="date-from" value="">
<label for="date-to">To: </label>
<input class="range-data" type="date" name="date-to" id="date-to" value="">
How to check if two date ranges overlap?
Searching here on SO i have found this answer
<input name="min" type="number" ng-model="field.min"/>
<input name="max" type="number" ng-model="field.max" min=" {{ field.min }}"/>
Do you have any other recommendation?
First, there is not ng-model in your inputs, that is required for the "angular way" of using forms. After that, HTML5 support min and max for dates, when the date need to be supplied in the format of "YYYY-MM-DD". Notice that not all browsers support "date" input.
An optional implementation:
<label for="date-from">From: </label>
<input class="range-data" ng-model="fromDate" type="date" name="date-from" id="date-from" max="{{toDate|date:'yyyy-MM-dd'}}">
<label for="date-to">To: </label>
<input class="range-data" ng-model="toDate" type="date" name="date-to" id="date-to" min="{{fromDate|date:'yyyy-MM-dd'}}">

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.

How to set value to multiple elements by name attribute at once (ExtJs 4)

In JQuery I can set value for multiple elements at once in this way:
<form action="" id="mainForm">
<input type="text" name="Phone" class="deftext" value="" >
<input type="text" name="Number" class="deftext" value="" >
<input type="text" name="Name" class="deftext" value="" >
<input type="text" name="Lastname" class="deftext" value="" >
<input type="text" name="Middlename" class="deftext" value="" >
<input type="text" name="Age" class="deftext" value="" >
<input type="text" name="Email" class="deftext" value="" >
<input type="text" name="Occupation" class="deftext" value="" >
</form>
$('#mainForm .deftext').val("hello");
// OR
$('#mainForm input:text').val("");
Are there similar approach in ExtJS 4 to modify the following code into single line?
Ext.getCmp('mainForm').down('[name=Phone]').setValue('');
Ext.getCmp('mainForm').down('[name=Number]').setValue('');
Ext.getCmp('mainForm').down('[name=Name]').setValue('');
....
Your JQuery code is not really readable, because when looking at the function you can't see that there are multiple fields affected. This is why ExtJS does not support such a syntax. Either you use
Ext.getCmp('mainForm').down('[name=Phone]').setValue('');
Ext.getCmp('mainForm').down('[name=Number]').setValue('');
or you use
Ext.getCmp('mainForm').getForm().setValues({
Phone: '',
Number: ''
});
Unlike your JQuery example, both of these are readable, because I don't have to know which classes have been applied to which fields.
If you want to reset all fields to the value that was set during the last form.loadRecord operation, or the initial value if no form.loadRecord operation has been performed, use form.reset:
Ext.getCmp('mainForm').getForm().reset();
Well, if child components get something in common (xtype for example) you can do something like
Ext.getCmp('mainForm').query('textfield').each(function(component){component.setValue('')});
but no, you cant use component methods on array of components.

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