I am looking to make it so that my HTML form will only accept characters from the Latin alphabet. The site is frequented by potential clients in the Middle East but they often type in Arabic or with characters from East Asian languages. I have tried to use code found elsewhere on the web but to no avail. I have pasted my form code below. How can I make this so? It is pasted within an iFrame on a Wix website.
Thanks in advance.
<font face="helvetica" <META HTTPS-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
<!-- ---------------------------------------------------------------------- -->
<!-- NOTE: Please add the following <FORM> element to your page. -->
<!-- ---------------------------------------------------------------------- -->
<form action="https://example.example.com/servlet/servlet.example?encoding=UTF-8" method="POST" target='_parent'>
<input type=hidden name="oid" value="00D0Y0000034cvq">
<input type=hidden name="retURL" value="https://example.com/successful-registration">
<!-- ---------------------------------------------------------------------- -->
<!-- NOTE: These fields are optional debugging elements. Please uncomment -->
<!-- these lines if you wish to test in debug mode. -->
<!-- <input type="hidden" name="debug" value=1> -->
<!-- <input type="hidden" name="debugEmail" -->
<!-- value="example.example#example.com"> -->
<!-- ---------------------------------------------------------------------- -->
<label for="first_name">First Name</label> <input id="first_name" maxlength="40" name="first_name" size="20" type="text" required=true/><br><br>
<label for="middle_name">Middle Name</label> <input id="middle_name" maxlength="80" name="middle_name" size="20" type="text" /><br><br>
<label for="last_name">Last Name</label> <input id="last_name" maxlength="80" name="last_name" size="20" type="text" required=true /><br><br> Date of Birth: <span class="dateInput dateOnlyInput"> <input id="00N0Y00000RWiNa" name="00N0Y00000RWiNa" size="12" type="text" name="inputBox" placeholder=" DD/MM/YYY" /></span><br><br>
<label for="city">City</label> <input id="city" maxlength="40" name="city" size="20" type="text" /><br><br>
<label for="country_code">Country</label> <select id="country_code" name="country_code"><option value="">--None--</option><option value="BH">Bahrain</option>
<option value="EG">Egypt</option>
<option value="JO">Jordan</option>
<option value="KW">Kuwait</option>
<option value="LB">Lebanon</option>
<option value="MA">Morocco</option>
<option value="OM">Oman</option>
<option value="OTHER">Other</option>
<option value="QA">Qatar</option>
<option value="SA">Saudi Arabia</option>
<option value="SY">Syria</option>
<option value="AE">United Arab Emirates</option>
<option value="GB">United Kingdom</option>
</select><br><br>
<label for="mobile">Mobile</label> <input id="mobile" maxlength="40" name="mobile" size="20" type="text" required=true/><br><br>
<label for="email">Email</label> <input id="email" pattern="[^ #]*#[^ #]*" maxlength="80" name="email" size="20" type="text" required=true /><br><br> Current/Previous School/University: <input id="00N0Y00000RWiNZ" maxlength="100"
name="00N0Y00000RWiNZ" size="20" type="text" /><br><br> Course you would like to study: <input id="00N0Y00000RWiNi" maxlength="255" name="00N0Y00000RWiNi" size="20" type="text" /><br><br>
<label for="lead_source">Where did you hear about us?</label> <select id="lead_source" name="lead_source"><option value="">--None--</option>
<option value="Instagram">Instagram</option>
<option value="Facebook">Facebook</option>
<option value="Twitter">Twitter</option>
<option value="Google">Google</option>
<option value="School Counsellor_(Please specify)">School Counsellor_(Please specify)</option>
<option value="University Website_(Please specify)">University Website_(Please specify)</option>
<option value="Web">Web</option>
</select><br><br>
<input type=hidden id="00N0Y00000RWvPA" name="00N0Y00000RWvPA" type="checkbox" value="1" />
<center><input type="submit" name="submit"></center>
</form>
Check this code snippet. I have added the following change in the form element as an attribute.
accept-charset="ISO-8859-1"
ISO-8859-1 - Character encoding for the Latin alphabet.
Reference:
https://www.w3schools.com/charsets/ref_html_8859.asp
<font face="helvetica" <META HTTPS-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
<!-- ---------------------------------------------------------------------- -->
<!-- NOTE: Please add the following <FORM> element to your page. -->
<!-- ---------------------------------------------------------------------- -->
<form action="https://example.example.com/servlet/servlet.example?encoding=UTF-8" method="POST" target='_parent' accept-charset="ISO-8859-1">
<input type=hidden name="oid" value="00D0Y0000034cvq">
<input type=hidden name="retURL" value="https://example.com/successful-registration">
<!-- ---------------------------------------------------------------------- -->
<!-- NOTE: These fields are optional debugging elements. Please uncomment -->
<!-- these lines if you wish to test in debug mode. -->
<!-- <input type="hidden" name="debug" value=1> -->
<!-- <input type="hidden" name="debugEmail" -->
<!-- value="example.example#example.com"> -->
<!-- ---------------------------------------------------------------------- -->
<label for="first_name">First Name</label> <input id="first_name" maxlength="40" name="first_name" size="20" type="text" required=true/><br><br>
<label for="middle_name">Middle Name</label> <input id="middle_name" maxlength="80" name="middle_name" size="20" type="text" /><br><br>
<label for="last_name">Last Name</label> <input id="last_name" maxlength="80" name="last_name" size="20" type="text" required=true /><br><br> Date of Birth: <span class="dateInput dateOnlyInput"> <input id="00N0Y00000RWiNa" name="00N0Y00000RWiNa" size="12" type="text" name="inputBox" placeholder=" DD/MM/YYY" /></span><br><br>
<label for="city">City</label> <input id="city" maxlength="40" name="city" size="20" type="text" /><br><br>
<label for="country_code">Country</label> <select id="country_code" name="country_code"><option value="">--None--</option><option value="BH">Bahrain</option>
<option value="EG">Egypt</option>
<option value="JO">Jordan</option>
<option value="KW">Kuwait</option>
<option value="LB">Lebanon</option>
<option value="MA">Morocco</option>
<option value="OM">Oman</option>
<option value="OTHER">Other</option>
<option value="QA">Qatar</option>
<option value="SA">Saudi Arabia</option>
<option value="SY">Syria</option>
<option value="AE">United Arab Emirates</option>
<option value="GB">United Kingdom</option>
</select><br><br>
<label for="mobile">Mobile</label> <input id="mobile" maxlength="40" name="mobile" size="20" type="text" required=true/><br><br>
<label for="email">Email</label> <input id="email" pattern="[^ #]*#[^ #]*" maxlength="80" name="email" size="20" type="text" required=true /><br><br> Current/Previous School/University: <input id="00N0Y00000RWiNZ" maxlength="100"
name="00N0Y00000RWiNZ" size="20" type="text" /><br><br> Course you would like to study: <input id="00N0Y00000RWiNi" maxlength="255" name="00N0Y00000RWiNi" size="20" type="text" /><br><br>
<label for="lead_source">Where did you hear about us?</label> <select id="lead_source" name="lead_source"><option value="">--None--</option>
<option value="Instagram">Instagram</option>
<option value="Facebook">Facebook</option>
<option value="Twitter">Twitter</option>
<option value="Google">Google</option>
<option value="School Counsellor_(Please specify)">School Counsellor_(Please specify)</option>
<option value="University Website_(Please specify)">University Website_(Please specify)</option>
<option value="Web">Web</option>
</select><br><br>
<input type=hidden id="00N0Y00000RWvPA" name="00N0Y00000RWvPA" type="checkbox" value="1" />
<center><input type="submit" name="submit"></center>
</form>
Related
I have this code and in this form I want the first name & last name next to each other how can I do that? I saw some tutorials but in that they are showing to make the whole form inline. But I want only first name & last name fields next to each other.
<form action="https://test.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
<input type=hidden name="oid" value="00D0E000000DlzH">
<input type=hidden name="recordType" value="01224000000B8m0">
<input type=hidden name="00N1o00000Jsr1R" value="-">
<input type=hidden name="retURL" value="https://www.maximo.ae/">
<label for="salutation">Salutation</label>
<select id="salutation" name="salutation" required>
<option value="">--None--</option>
<option value="Mr.">Mr.</option>
<option value="Ms.">Ms.</option>
<option value="Mrs.">Mrs.</option>
<option value="Dr.">Dr.</option>
<option value="Prof.">Prof.</option>
</select><br>
<label for="first_name">First Name</label><input placeholder="First Name" id="first_name" maxlength="40" name="first_name" size="20" type="text" required /><br>
<label for="last_name">Last Name</label><input placeholder="Last Name" id="last_name" maxlength="80" name="last_name" size="20" type="text" required /><br>
<label for="company">Company</label><input placeholder="Company" id="company" maxlength="40" name="company" size="20" type="text" required /><br>
<label for="phone">Phone Number</label><input placeholder="Phone No" id="phone" maxlength="40" name="phone" size="20" type="text" required /><br>
<label for="email">Work mail</label><input placeholder="Email" id="email" maxlength="80" name="email" size="20" type="text" required /><br> Kindly identify your area of interest?
<select id="00N0E00000HLPfA" name="00N0E00000HLPfA" title="Area of interest" required>
<option value="">--None--</option>
<option value="Job Opportunities">Job Opportunities</option>
<option value="Solutions/Services">Solutions/Services</option>
<option value="Vendor Partnership">Vendor Partnership</option>
</select><br>
<label for="lead_source">How did you hear about us?</label>
<select id="lead_source" name="lead_source" required>
<option value="">--None--</option>
<option value="Advertisements / Marketing Campaigns">Advertisements / Marketing Campaigns</option>
<option value="Events and Conferences">Events and Conferences</option>
<option value="Magazines / Publications">Magazines / Publications</option>
<option value="Referrals / Word-of-mouth">Referrals / Word-of-mouth</option>
<option value="Telemarketing">Telemarketing</option>
<option value="Web search (Google, Yahoo, etc)">Web search (Google, Yahoo, etc)</option>
<option value="Social Media (LinkedIn, Facebook, etc.)">Social Media (LinkedIn, Facebook, etc.)</option>
</select><br>
<label for="description">Your Message</label><textarea name="description"></textarea><br>
<input type="submit" name="submit">
</form>
I am attaching an image below, I want these 2 next to each other enter image description here
If you notice in the code, the <br> tag stands for line break. Kindly remove it. I would suggest you to learn the basics of HTML before asking these questions, though.
<label for="first_name">First Name</label><input placeholder="First Name" id="first_name" maxlength="40" name="first_name" size="20" type="text" required /><!-- br -->
<!-- -------------------------------------------------------------------------------------------------------------------------------------------------------^^^^^^^^^^^ -->
<label for="last_name">Last Name</label><input placeholder="Last Name" id="last_name" maxlength="80" name="last_name" size="20" type="text" required /><br>
So I have already attempted to do this project by myself but the program I'm using as a sandbox seems incredibly picky at how one is to do it. Despite using examples and other aids to help get this done, nothing has worked. I'm having three separate issues that I think I have done correctly but, apparently, had not done correctly. The issues are as followed:
Script & Form Elements
The Regex
The Submit Button
The program will not tell me what's being done wrong either. Might I get some aid?
<section>
<h1>Conference Registration Form</h1>
<p>Required Item (*)</p>
<form action="http://www.example/cg/register" method="post">
<!-- title -->
<div>
<label for="title">Title</label>
<input type="text" name="title" id="titleBox" list="titleList">
<datalist id="titleList">
<option value="Mr."></option>
<option value="Mrs."></option>
<option value="Ms."></option>
<option value="Prof."></option>
<option value="Dr."></option>
<option value="Assist. Prof."></option>
<option value="Assoc. Prof."></option>
</datalist>
</div>
<!-- firstName -->
<label for="firstName">First Name*</label>
<input type="text" name="firstName" id="fnBox" required>
<!-- LastName -->
<label for="lastName">Last Name*</label>
<input type="text" name="lastName" id="lnBox" required>
<!-- address -->
<label for="address">Address*</label>
<textarea name="address" id="addBox"></textarea>
<!-- Company or University -->
<label for="group">Company or University</label>
<input type="text" name="group" id="groupBox">
<!-- E-mail -->
<label for="email">E-mail*</label>
<input type="email" name="email" id="mailBox" required>
<!-- Phone Number -->
<label for="phoneNumber">Phone Number*</label>
<input type="tel" name="phoneNumber" id="phoneNumber" required pattern="^\d{10}$|^(\(\d{3}\)\s*)?\d{3}[\s-]?\d{4}$" placeholder="(nnn) nnn-nnnn">
<!-- ACGIP Membership -->
<label for="acgipID">ACGIP Membership Number</label>
<input type="text" name="acgipID" id="idBox" placeholder="acgip-nnnnnn" pattern="^acgip\-\d{6}$">
<!-- Registration Category -->
<label for="regList">Registration Category</label>
<select id="regList" name="">
<option value="member">ACGIP Member ($695)</option>
<option value="nonmember">ACGIP Non-Member ($795)</option>
<option value="student">ACGIP Student ($310)</option>
<option value="poster">ACGIP Poster ($95)</option>
<option value="guest">ACGIP Guest ($35)</option>
</select>
<!-- Button -->
<p><input type="submit" name="continue" value="Continue"></p>
</form>
</section>
The code for the regex is wrong here.
it should be:
<input type="text" name="phoneNumber" id="phoneBox" placeholder="(nnn) nnn-nnnn" pattern="^\d{10}$|^(\(\d{3}\)\s*)?\d{3}[\s-]?\d{4}$" required />
NOT
<label for="phoneNumber">Phone Number*</label>
<input type="tel" name="phoneNumber" id="phoneNumber" required pattern="^\d{10}$|^(\(\d{3}\)\s*)?\d{3}[\s-]?\d{4}$" placeholder="(nnn) nnn-nnnn">
It gives an error every time. Cheers
I have a form, where I would like that the two input fields "CVR number" and "Telephone" is only enabled if the value is "Yes". (Se attached file which is the end result). The form is looking like this now: Example on my form
I tried to make something work with the below code, but I am not sure that I am on the correct track? The second input field is not getting active when I use yes.
What do you think?
HTML
<form>
<select id="mySelect" onChange="check(this);">
<option>No</option>
<option>Yes</option>
</select>
<input type="text" id="company" disabled="disabled" placeholder="CVR number">
<input type="text" id="company" disabled="disabled" placeholder="Telephone">
</form>
JS
function check(elem) {
document.getElementById('company').disabled = !elem.selectedIndex;
}
Updated HTML code
<h3>Do you want a company account?</h3>
<div class="form-group">
<select class="form-control" id="mce-COMPANY" name="COMPANY" id="mySelect" onChange="check(this);">
<option value="Nej">Nej</option>
<option value="Ja">Ja</option>
</select>
</div>
<input placeholder="CVR nummer" name="EMAIL" class="mail" type="text" id="mce-EMAIL" id="company1" disabled="disabled"></input>
<span class="icon4"><i class="fa fa-envelope" aria-hidden="true"></i></span>
<input placeholder="Telefonnummer" name="EMAIL" class="mail" type="text" id="mce-EMAIL" id="company2" disabled="disabled" ></input>
<span class="icon4"><i class="fa fa-envelope" aria-hidden="true"></i></span>
function check(elem) {
document.getElementById('company').disabled = !elem.selectedIndex;
}
<form>
<select id="mySelect" onChange="check(this);">
<option>No</option>
<option>Yes</option>
</select>
<input type="text" id="company" disabled="disabled" placeholder="CVR number">
<input type="text" id="company" disabled="disabled" placeholder="Telephone">
</form>
You have used the same ID for both the fields.
Use 2 different Ids and it works..
function check(elem) {
document.getElementById('company1').disabled = !elem.selectedIndex;
document.getElementById('company2').disabled = !elem.selectedIndex;
}
<form>
<select id="mySelect" onChange="check(this);">
<option>No</option>
<option>Yes</option>
</select>
<input type="text" id="company1" disabled="disabled" placeholder="CVR number">
<input type="text" id="company2" disabled="disabled" placeholder="Telephone">
</form>
Sorry but i'm new in html and i would like to ask how can i enable specific textboxes when a specific combo box option is chosen.
I've seen the topic how to activate a textbox if I select an other option in drop down box but i don't understoond what am i doing wrong.
I want when a combo box option such as option1 is selected to enable textboxes with the name lesson1, lesson2, lesson3, when a combo box option such as option2 is selected to enable textboxes with the name lesson4, lesson5, lesson6 etc for the user to fill.
Here is my code
function Select(val) {
var element=document.getElementById("options1");
var element2=document.getElementById("options2");
var element3=document.getElementById("options3");
if (val=="option 1"){
element.style.display="block";
else
element.style.display="none"; }
else if (val=="option2"){
element2.style.display="block";
else
element2.style.display="none"; }
else if (val=="option 3"){
element3.style.display="block";
else
element3.style.display="none"; }
}
<label class="formLabel">
Options*</label><br />
<select name="select2" required="" onchange="Select(this.value);">
<option disabled="disabled" selected="selected" value=""></option>
<option value="">option 1</option>
<option value="">option 2</option>
<option value="">option 3</option>
</select><br />
<div id="options1" style="display: none;">
<label class="classLabel">
lesson 1*
</label>
<label class="classLabel">
lesson 2*</label>
<label class="classLabel">
lesson 3*</label><br />
<input class="formText" name="field7" required="" type="text" />
<input class="formText" name="field8" required="" type="text" />
<input class="formText" name="field9" required="" type="text" /><br />
</div>
<div id="options2" style="display: none;">
<label class="classLabel">
lesson 4*
</label>
<label class="classLabel">
lesson 5*</label>
<label class="classLabel">
lesson 6*</label><br />
<input class="formText" name="field10" required="" type="text" />
<input class="formText" name="field11" required="" type="text" />
<input class="formText" name="field12" required="" type="text" /><br />
</div>
<div id="options3" style="display: none;">
<label class="classLabel">
lesson 7*
</label>
<label class="classLabel">
lesson 8*</label>
<label class="classLabel">
lesson 9*</label><br />
<input class="formText" name="field13" required="" type="text" />
<input class="formText" name="field14" required="" type="text" />
<input class="formText" name="field15" required="" type="text" /><br />
</div>
<input id="submitButton" type="submit" value="send" /></form> </div>
You have not added values to combo box , combo box must be like
<select name="select2" required="" onchange="Select(this.value);">
<option disabled="disabled" selected="selected" value=""></option>
<option value="option 1">option 1</option>
<option value="option 2">option 2</option>
<option value="option 3">option 3</option>
</select>
and there is some syntax error in your js script also
please try the following code
syntax of if else wrong
<script>function Select(val) {
var element=document.getElementById("options1");
var element2=document.getElementById("options2");
var element3=document.getElementById("options3");
if (val=="option 1")
element.style.display="block";
else
element.style.display="none";
if (val=="option 2")
element2.style.display="block";
else
element2.style.display="none";
if (val=="option 3")
element3.style.display="block";
else
element3.style.display="none";
}
</script>
<script>
function Select(val) {
var element=document.getElementById("options1");
var element2=document.getElementById("options2");
var element3=document.getElementById("options3");
if (val=="option 1")
element.style.display="block";
else
element.style.display="none";
if (val=="option 2")
element2.style.display="block";
else
element2.style.display="none";
if (val=="option 3")
element3.style.display="block";
else
element3.style.display="none";
}
</script>
<label class="formLabel">Options*</label><br />
<select name="select2" required="" onchange="Select(this.value);">
<option disabled="disabled" selected="selected" value=""></option>
<option value="option 1">option 1</option>
<option value="option 2">option 2</option>
<option value="option 3">option 3</option></select><br />
<div id="options1" style="display:none;">
<label class="classLabel">lesson 1* </label>
<label class="classLabel">lesson 2*</label>
<label class="classLabel" >lesson 3*</label><br />
<input class="formText" name="field7" required="" type="text" />
<input class="formText" name="field8 required="" type="text" />
<input class="formText" name="field9" required="" type="text" /><br />
</div>
<div id="options2" style="display:none;">
<label class="classLabel" >lesson 4* </label>
<label class="classLabel">lesson 5*</label>
<label class="classLabel" >lesson 6*</label><br />
<input class="formText" name="field10" required="" type="text" />
<input class="formText" name="field11" required="" type="text" />
<input class="formText" name="field12" required="" type="text" /><br />
</div>
<div id="options3" style="display:none;">
<label class="classLabel">lesson 7* </label>
<label class="classLabel">lesson 8*</label>
<label class="classLabel">lesson 9*</label><br />
<input class="formText" name="field13" required="" type="text" />
<input class="formText" name="field14" required="" type="text" />
<input class="formText" name="field15" required="" type="text" /><br />
</div>
<input id="submitButton" type="submit" value="send" /></form>
</div>
I am a bit new to coding. I have made a HTML form which is posting to one website after submission and is also landing on the other page for acknowledgement. but my form page is not disappearing. i am using google sites for this form so cant use any scripting language. Have to rely on html only
<form action="https://www.salesforce.com/servlet/servlet.WebToCase?encoding=UTF-8" method="POST">
<!-- ---------------------------------------------------------------------- -->
<!-- NOTE: These fields are optional debugging elements. Please uncomment -->
<!-- these lines if you wish to test in debug mode. -->
<!-- <input type="hidden" name="debug" value=1> -->
<!-- <input type="hidden" name="debugEmail" value="smoiz88#gmail.com"> -->
<!-- ---------------------------------------------------------------------- -->
<label for="first_name">First Name</label>
<input id="first_name" maxlength="40" name="first_name" size="40" type="text" required />
<br>
<label for="last_name">Last Name</label>
<input id="last_name" maxlength="40" name="last_name" size="40" type="text" required />
<br>
<label for="email">Email</label>
<input id="email" maxlength="80" name="email" size="40" type="text" required />
<br>
<label for="phone">Phone</label>
<input id="phone" maxlength="40" name="phone" size="40" type="number" />
<br>
<label class="label">Site</label>
<select class="select" id="Site" name="site" title="Site">
<option value="None">None</option>
<option value="Armadale">Armadale</option>
<option value="Elsternwick">Elsternwick</option>
<option value="Hawthorn">Hawthorn</option>
<option value="Manila">Manila</option>
<option value="UK">UK</option>
<option value="Other">Other</option>
</select>
<br>
<br>
<label class="label">Salesforce Profile</label>
<select class="select" id="Profile">
<option value="None">None</option>
<option value="Acquire Career Champion">Acquire Career Champion</option>
<option value="Acquire Career Advisor">Acquire Career Advisor</option>
<option value="Acquire Career Hunter">Acquire Career Hunter</option>
<option value="Acquire Data Analyst">Acquire Data Analyst</option>
<option value="Acquire Retention Specialist">Acquire Retention Specialist</option>
<option value="Acquire Training Admin">Acquire Training Admin</option>
<option value="Acquire Qualifier">Acquire Qualifier</option>
</select>
<br>
<br>
<label for="fault">Fault Title</label>
<input id="fault" maxlength="20" name="fault" size="30" type="text" required />
<br>
<br>
<label>Fault Type</label>
<select class="select" id="Type">
<option value="None">None</option>
<option value="Password Reset">Password Reset</option>
<option value="Report Required">Report Required</option>
<option value="Login Details">Login Details</option>
<option value="End Of Employment">End Of Employment</option>
<option value="File Merge">File Merge</option>
<option value="Insufficient Privilege">Insufficient Privilege</option>
<option value="Other">Other</option>
</select>
<br>
<br>
<label for="description">Description</label>
<textarea name="description"></textarea>
<br>
<div id="submit">
<input type="submit" name="submit">
</div>
</form>
any suggestions how can i make it disapper once it is submitted.
It seems the server brings you back because it doesn't know where to redirect after form submission.
Try create another page with confirmation text and configure server to redirect there after submission.
There must be a parameter or something on the server side to control submission behavior.