• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

Making Custom Classes Editable: Is it Possible?

Annabelle5893

Annabelle5893

King Coder
In my ceremony script generator, which I'm making out of HTML, there are some "classes" I've created, which I want to make editable, where "_ _ _ _ _" is replaced by whatever a user wants to fill it in with. Tell me if this looks right to you. These classes are:
HTML: 
<html>
<head>
<title>Names</title>
<body>
<span class="brideName">_ _ _ _</span>
<span class="groomName">_ _ _ _</span>
<span class="brideHonorific">_ _ _ _</span>
<span class="groomHonorific">_ _ _ _</span>
<span class="Child'sName">_ _ _ _</span>
<span class="Child'sHonorific">_ _ _ _</span>
<span class="Parent'sHonorific">_ _ _ _</span>
</body>
</html>
 
Last edited by a moderator:
Sort by date Sort by votes
Altho there isn't anything really wrong with using <span> tags, they are INLINE elements. It would be much better to use elements that were designed to receive input from users. The <inline> tags.
Code: 
<p>What is the bride's name?  <inline type="text" class="brideName">_ _ _ _</inline></p>
<p>What is the groom's name?  <inline type="text" class="groomName">_ _ _ _</inline></p>
 
Upvote 0 Downvote
Annabelle5893 said:
So you're saying I can't put something like <span class="brideName" contenteditable="">_ _ _ _</span>? I'm confused!
Click to expand...
Actually you can use that, and it works fine provided you set the contenteditable attribute correctly:

HTML: 
<p>What is the bride's name?  <span class="brideName" contenteditable="true">_ _ _ _</span></p>
<p>What is the groom's name?  <span class="groomName" contenteditable="true">_ _ _ _</span></p>

I think @OldMan merely wanted to suggest that for an element that receives user input, it would probably make more sense to use a widget that was designed for that purpose. Think of <input> and <textarea>. This makes logical sense.

But his suggested replacement code puzzles me too, for several reasons:
  • It does not work. You need to add contenteditable="true"
  • It does not seem to make any difference (at least none I can see) from using <span>
  • Although it works (with contenteditable="true") it is actually not allowed according to the HTML Validator, see image below
  • I don't think there exists something like <inline></inline>. You might just as well use <foobar></foobar> and get the same result and error.
a.jpg
 
Upvote 0 Downvote
cbreemer said:
Actually you can use that, and it works fine provided you set the contenteditable attribute correctly:

HTML: 
<p>What is the bride's name?  <span class="brideName" contenteditable="true">_ _ _ _</span></p>
<p>What is the groom's name?  <span class="groomName" contenteditable="true">_ _ _ _</span></p>

I think @OldMan merely wanted to suggest that for an element that receives user input, it would probably make more sense to use a widget that was designed for that purpose. Think of <input> and <textarea>. This makes logical sense.

But his suggested replacement code puzzles me too, for several reasons:
  • It does not work. You need to add contenteditable="true"
  • It does not seem to make any difference (at least none I can see) from using <span>
  • Although it works (with contenteditable="true") it is actually not allowed according to the HTML Validator, see image below
  • I don't think there exists something like <inline></inline>. You might just as well use <foobar></foobar> and get the same result and error.
View attachment 2141
Click to expand...
You may not know this, but I can't see pictures. My screenreader can't read images, only text-based parameters.
 
Upvote 0 Downvote
Indeed I did not know that. Anyway it was silly to grab a screenshot when I could much easier have copied the HTML. So here goes. Note that <inline> seems to have no special status. Same error if I use <foobar> instead. Both are simply unrecognized elements.
  1. Error: Element inline not allowed as child of element main in this context. (Suppressing further errors from this subtree.)
    From line 23, column 33; to line 23, column 93
    s name ? <inline type="text" class="brideName" contenteditable="true">_ _ _
    Content model for element main:Flow content.
  2. Error: Element foobar not allowed as child of element main in this context. (Suppressing further errors from this subtree.)
    From line 24, column 33; to line 24, column 93
    s name ? <foobar type="text" class="groomName" contenteditable="true"> _ _ _
    Content model for element main:Flow content.
What's this screen reader ? A tool for the visually impaired ?
And what should a screen reader do with an attribute like contenteditable="True" ? Read out an audible request for input ? I feel like missing something here.
Your code works ok in my browser. The three span's are editable es expected.
 
Upvote 0 Downvote
cbreemer said:
Indeed I did not know that. Anyway it was silly to grab a screenshot when I could much easier have copied the HTML. So here goes. Note that <inline> seems to have no special status. Same error if I use <foobar> instead. Both are simply unrecognized elements.
  1. Error: Element inline not allowed as child of element main in this context. (Suppressing further errors from this subtree.)
    From line 23, column 33; to line 23, column 93
    s name ? <inline type="text" class="brideName" contenteditable="true">_ _ _
    Content model for element main:Flow content.
  2. Error: Element foobar not allowed as child of element main in this context. (Suppressing further errors from this subtree.)
    From line 24, column 33; to line 24, column 93
    s name ? <foobar type="text" class="groomName" contenteditable="true"> _ _ _
    Content model for element main:Flow content.
What's this screen reader ? A tool for the visually impaired ?
And what should a screen reader do with an attribute like contenteditable="True" ? Read out an audible request for input ? I feel like missing something here.
Your code works ok in my browser. The three span's are editable es expected.
Click to expand...
I would rather say sight-challenged, but yes, a screenreader is a software that talks to you while reading your computer screen. It even talks while you type! Yes, when a form is editable, a screenreader would announce, "edit". Then when one presses enter on that field, JAWS (Job Access With Speech) turns on "Forms Mode". Narrator (Windows built-in screenreader) says, "Scan off". If Enter is pressed again, JAWS says "Forms Mode Off", and Narrator says, "Scan". You know what I mean? What seems to be happening with me is, in Firefox, I press "e", to go to an edit box, and JAWS won't seem to say, "Edit" on these custom classes where I've added, "contenteditable=true".
 
Upvote 0 Downvote
Oh ok, yes that would be the is probably the woke term for it.
What I see is that Firefox recognizes and handles the contenteditable=true just as well as Chrome does. Why it does not speak out I have no idea.
I don't know how to turn on that JAWS stuff, but since JAWS talks about "Forms mode" I guess you need to have a <form> with <input> fields.
Can you try that ?
 
Upvote 0 Downvote
I could try that, but I wanted to find out how it would work with the <span class=""></span> and the contenteditable="true" parameters. Also, how would I hide two of those edit boxes that say "Spouse 1 Family Name" and "Spouse 2 family name", and show an edit box that says, "Family Name For Couple" when "Same Family Name" checkbox is checked, and vise versa when the checkbox is unchecked?
 
Upvote 0 Downvote
cbreemer said:
Indeed I did not know that. Anyway it was silly to grab a screenshot when I could much easier have copied the HTML. So here goes. Note that <inline> seems to have no special status. Same error if I use <foobar> instead. Both are simply unrecognized elements.
  1. Error: Element inline not allowed as child of element main in this context. (Suppressing further errors from this subtree.)
    From line 23, column 33; to line 23, column 93
    s name ? <inline type="text" class="brideName" contenteditable="true">_ _ _
    Content model for element main:Flow content.
  2. Error: Element foobar not allowed as child of element main in this context. (Suppressing further errors from this subtree.)
    From line 24, column 33; to line 24, column 93
    s name ? <foobar type="text" class="groomName" contenteditable="true"> _ _ _
    Content model for element main:Flow content.
What's this screen reader ? A tool for the visually impaired ?
And what should a screen reader do with an attribute like contenteditable="True" ? Read out an audible request for input ? I feel like missing something here.
Your code works ok in my browser. The three span's are editable es expected.
Click to expand...
What browser do you use? I use both Microsoft Edge and Firefox.
 
Upvote 0 Downvote
Everything I read about JAWS talks about forms. I suggest that you try that, instead of chasing the idea with an editable span that does not seem to work in any browser.
To conditionally hide or show a field you will have to write some Javascript.
 
Upvote 0 Downvote
Annabelle5893 said:
I put the contenteditable="True" attribute, but my screenreader doesn't seem to detect that this is an editable custom span class with a label. Tell me if this looks right to you.
Click to expand...
Hey there @Annabelle5893
For the online safety of all of our users, we ask that users refrain from uploading certain files, especially zip files. Instead, please feel free to copy and paste your code onto here, or, use a service such as Pastebin, or if you like, screenshots.

Hope you can understand the security concerns
🙂
 
Upvote 0 Downvote
How's this?







<HTML>
<head>
<title>Step 2</title>
<style>
body {background-color:powderblue; background-color:transparent; text-decoration:none}
strong {color:navy;background-color:transparent; text-decoration:bold}
p {color:green; background-color:transparent; text-decoration:none}
a:link {color:darkgray; background-color:transparent; text-decoration:none}
a:visited {color:lightgray; background-color:transparent; text-decoration:none}
a:active {color:seashell; background-color:transparent; text-decoration:none</style>
<script language="javascript">
function showHide() {
if (document.getElementById("showdiv").style.display == "none") {
document.getElementById("showdiv").style.display = '';
//document.getElementById("t2").style.display = '';

} else {
document.getElementById("showdiv").style.display = 'none';
//document.getElementById("t2").style.display = 'none';

}
}
</script>
</head>
<div class="panel-body">
<div data-tab-body="step-2" style="visibility: visible;">
<div class="alert alert-info">
<details><summary><strong>The Basics:</strong></summary><p>To begin, enter the given names of the couple, the family name(s) they'll be using after their marriage, and the city/town, then select the state/province, and country in which the wedding will take place.</p></details>
</div>

<div class="row form-group">
<div class="col-sm-4">
<label class="radio"><input checked="checked" name="basicInfo[spouse_one]" value="woman" type="radio"> Bride</label>
&nbsp;&nbsp;
<label class="radio"><input name="basicInfo[spouse_one]" value="man" type="radio"> Groom</label></br>
&nbsp;&nbsp;
<label class="radio"><input name="basicInfo[spouse_one]" value="custom" type="radio"> Other</label></br>
&nbsp;&nbsp;
<span class="spouse1name" id="Spouse1Name" contenteditable="true">_ _ _ _</span>
<div class="clearfix"></div>

<label class="radio"><input name="basicInfo[spouse_two]" value="woman" type="radio"> Bride</label>
&nbsp;&nbsp;
<label class="radio"><input checked="checked" name="basicInfo[spouse_two]" value="man" type="radio"> Groom</label></br>
&nbsp;&nbsp;
<label class="radio"><input name="basicInfo[spouse_two]" value="custom" type="radio"> Other</label></br>
&nbsp;&nbsp;
<span class="spouse2name" id="Spouse2Name" contenteditable="true">_ _ _ _</span>
</div>
<div class="clearfix"></div>
</div>
<div class="col-sm-4" id="same-family-name-container" style="display: block">
<span class="FamilyNameForCouple" id="familyNameForCouple" contenteditable="true">_ _ _ _</span>
</div>
</div>
</div>

<label>Same Family Name?</label>
<input class="family_name" type="checkbox" name="same_family_name" value="1" onchange="valueChanged()"/ "The Couple Plans To Use The Same family Name After Marriage">The Couple plans to use the same Family Name after marriage

<script type="text/javascript">
function valueChanged()
{
$(".same_family_name").click(function() {
if($(this).is(":checked")) {
$(".same-family-name-container").style="display: block;"(300);
$(".different-family-name-container").style="display: none;"(200);
} else {
$(".same-family-name-container").style="display: none;"(200);
$(".different-family-name-container").style="display: block;"(300);
}
</script>

<div class="col-sm-4" id="different-family-name-container" style="display: none">
<span class="Spouse1FamilyName" id="Spouse1FamilyName" contenteditable="true">_ _ _ _</span>
<span class="Spouse2FamilyName" id="Spouse2FamilyName" contenteditable="true">_ _ _ _</span>
</div>

<div class="row form-group">
<div class="col-sm-4">
<label>City/Town</label>
<span class="city/town" id="City/Town" contenteditable="true">_ _ _ _</span>
</div>
<label>State/Province</label>
<select class="form-control" id="state/province">
<option value="Choose one... selected">Choose one... --</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Alberta">Alberta</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="Australian Capital Territory">Australian Capital Territory</option>
<option value="Baker Island">Baker Island</option>
<option value="British Columbia">British Columbia</option>
<option value="California">California</option>
<option value="Christmas Island">Christmas Island</option>
<option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Coral Sea Islands">Coral Sea Islands</option>
<option value="Delaware">Delaware</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Hawaii">Hawaii</option>
<option value="Heard Island And McDonald Islands">Heard Island And McDonald Islands</option>
<option value="Howland Island">Howland Island</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Jarvis Island">Jarvis Island</option>
<option value="Johnston Atoll">Johnston Atoll</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Kingman Reef">Kingman Reef</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Manitoba">Manitoba</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Midway Islands">Midway Islands</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="Nevada">Nevada</option>
<option value="New Brunswick">New Brunswick</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New South Wales">New South Wales</option>
<option value="New York">New York</option>
<option value="Newfoundland">Newfoundland</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Northern Territory">Northern Territory</option>
<option value="Northwest Territories">Northwest Territories</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Ontario">Ontario</option>
<option value="Oregon">Oregon</option>
<option value="Palmyra Atoll">Palmyra Atoll</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Prince Edward Island">Prince Edward Island</option>
<option value="Québec">Québec</option>
<option value="Rhode Island">Rhode Island</option>
<option value="Seskatchewan">Seskatchewan</option>
<option value="South Australia">South Australia</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tasmania">Tasmania</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Victoria">Victoria</option>
<option value="Virginia">Virginia</option>
<option value="Wake Island">Wake Island</option>
<option value="Washington">Washington</option>
<option value="Washington, DC">Washington, DC</option>
<option value="West Virginia">West Virginia</option>
<option value="Western Australia">Western Australia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
<option value="Yukon Territory">Yukon Territory</option>
<option value="Not Applicable">Not Applicable</option>
</select>

<label>Country</label>
<select class="form-control" id="country">
<option value="Choose one... selected">Choose one...</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Åland Islands">Åland Islands</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andora">Andora</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antarctica">Antarctica</option>
<option value="Antigua And Barbuda">Antigua And Barbuda</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Aruba">Aruba</option>
<option value="Ascension Island">Ascension Island</option>
<option value="Ashmore And Cartier Islands">Ashmore And Cartier Islands</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
<option value="Belize">Belize</option>
<option value="Benin">Benin</option>
<option value="Bermuda">Bermuda</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bosnia And Herzegovina">Bosnia And Herzegovina</option>
<option value="Botswana">Botswana</option>
<option value="Bouvet Island">Bouvet Island</option>
<option value="Brazil">Brazil</option>
<option value="British Indian Ocean Territory">British Indian Ocean Territory</option>
<option value="British Virgin Islands">British Vergin Islands</option>
<option value="Brunei Darussalam">Brunei Darussalam</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Burundi">Burundi</option>
<option value="Cambodia">Cambodia</option>
<option value="Cameroon">Cameroon</option>
<option value="Canada">Canada</option>
<option value="Cape Verde">Cape Verde</option>
<option value="Cayman Islands">Cayman Islands</option>
<option value="Central African Republic">Central African Republic</option>
<option value="Chad">Chad</option>
<option value="Chile">Chile</option>
<option value="China">China</option>
<option value="Colombia">Colombia</option>
<option value="Comoros">Comoros</option>
<option value="Congo">Congo</option>
<option value="Cook Islands">Cook Islands</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Cote d'Ivoire">Cote d'Ivoire</option>
<option value="Croatia">Croatia</option>
<option value="Cuba">Cuba</option>
<option value="Cyprus">Cyprus</option>
<option value="Czech Republic">Czech Republic</option>
<option value="Democratic Republic Of Congo">Democratic Republic Of Congo</option>
<option value="Denmark">Denmark</option>
<option value="Djibouti">Djibouti</option>
<option value="Dominica">Dominica</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="Ecuador">Ecuador</option>
<option value="Egypt">Egypt</option>
<option value="El Salvador">El Salvador</option>
<option value="Equatorial Guinea">Equatorial Guinea</option>
<option value="Eritria">Eritria</option>
<option value="Estonia">Estonia</option>
<option value="Ethiopia">Ethiopia</option>
<option value="Færoe Islands">Færoe Islands</option>
<option value="Falkland Islands">Falkland Islands</option>
<option value="Fiji islands">Fiji Islands</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="French Guiana">French Guiana</option>
<option value="French Polynesia">French Polynesia</option>
<option value="French Southern And Antarctic Lands">French Southern And Antarctic Lands</option>
<option value="Gabon">Gabon</option>
<option value="Gambia">Gambia</option>
<option value="Georgia">Georgia</option>
<option value="Germany">Germany</option>
<option value="Ghana">Ghana</option>
<option value="Greece">Greece</option>
<option value="Greenland">Greenland</option>
<option value="Grenada">Grenada</option>
<option value="Guadeloupe">Guadeloupe</option>
<option value="Guam">Guam</option>
<option value="Guatemala">Guatemala</option>
<option value="Guernsey">Guernsey</option>
<option value="Guinea">Guinea</option>
<option value="Guinea-Bissau">Guinea-Bissau</option>
<option value="Guyana">Guyana</option>
<option value="Haiti">Haiti</option>
<option value="Honduras">Honduras</option>
<option value="Hong Kong">Hong Kong</option>
<option value="Hungary">Hungary</option>
<option value="Iceland">Iceland</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Iran">Iran</option>
<option value="Iraq">Iraq</option>
<option value="Ireland">Ireland</option>
<option value="Isle Of Man">Isle Of Man</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Jamaica">Jamaica</option>
<option value="Japan">Japan</option>
<option value="Jersey">Jersey</option>
<option value="Jordan">Jordan</option>
<option value="Kazakhstan">Kazakhstan</option>
<option value="Kenya">Kenya</option>
<option value="Kiribati">Kiribati</option>
<option value="Korea">Korea</option>
<option value="Kuwait">Kuwait</option>
<option value="Kyrgyzstan">Kyrgyzstan</option>
<option value="Laos">Laos</option>
<option value="Latvia">Latvia</option>
<option value="Lebanon">Lebanon</option>
<option value="Lesotho">Lesotho</option>
<option value="Liberia">Liberia</option>
<option value="Libya">Libya</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Macao">Macao</option>
<option value="Macedonia">Macedonia</option>
<option value="Madagascar">Madagascar</option>
<option value="Malawi">Malawi</option>
<option value="Malaysia">Malaysia</option>
<option value="Maldives">Maldives</option>
<option value="Mali">Mali</option>
<option value="Malta">Malta</option>
<option value="Marshall Islands">Marshall Islands</option>
<option value="Martanique">Martanique</option>
<option value="Mauritania">Mauritania</option>
<option value="Mauritious">Mauritious</option>
<option value="Mayotte">Mayotte</option>
<option value="México">México</option>
<option value="Micronesia">Micronesia</option>
<option value="Moldova">Moldova</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="Montserrat">Montserrat</option>
<option value="Morocco">Morocco</option>
<option value="Mozambique">Mozambique</option>
<option value="Namibia"><Namibia/option>
<option value="Nauru">Nauru</option>
<option value="Netherlands">Netherlands</option>
<option value="Netherlands Antilles">Netherlands Antilles</option>
<option value="New Caledonia">New Caledonia</option>
<option value="New Zealand">New Zealand</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Niger">Niger</option>
<option value="Nigeria">Nigeria</option>
<option value="Niue">Niue</option>
<option value="Norfolk Island">Norfolk Island</option>
<option value="North Korea">North Korea</option>
<option value="Northern Mariana Islands">Northern Mariana Islands</option>
<option value="Norway">Norway</option>
<option value="Oman">Oman</option>
<option value="Pakistan">Pakistan</option>
<option value="Palau">Palau</option>
<option value=Palestine>Palestine</option>
<option value="Panama">Panama</option>
<option value="Papua New Guinea">Papua New Guinea</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Philippines">Philippines</option>
<option value="Pitcairn Islands">Pitcairn Islands</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="Puerto Rico">Puerto Rico</option>
<option value="Qatar">Qatar</option>
<option value="Réunion">Réunion</option>
<option value="Romania">Romania</option>
<option value="Russia">Russia</option>
<option value="Rwanda">Rwanda</option>
<option value="Saint Helena">Saint Helena</option>
<option value="Saint Kits And Nevis">Saint Kitts And Nevis</option>
<option value="Saint Pierre And Miquelon">Saint Pierre And Miquelon</option>
<option value="Saint Vincent And The Grenadines">Saint Vincent And The Grenadines</option>
<option value="Samoa">Samoa</option>
<option value="San Marino">San Marino</option>
<option value="São Tomé And Príncipe">São Tomé And Príncipe</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Senegal">Senegal</option>
<option value="Serbia">Serbia</option>
<option value="Seychelles">Seychelles</option>
<option value="Singapore">Singapore</option>
<option value="Slovak Republic">Slovak Republic</option>
<option value="Slovenia">Slovenia</option>
<option value="Solomon Islands">Solomon Islands</option>
<option value="somalia">Somalia</option>
<option value="South Africa">South Africa</option>
<option value="South Georgia And The South Sandwich Islands">South Georgia And The South Sandwich Islands</option>
<option value="South Korea">South Korea</option>
<option value="Sudan">Sudan</option>
<option value="Suriname">Suriname</option>
<option value="Svalbard And Jan Mayen Islands">Svalbard And Jan Mayen Islands</option>
<option value="Swaziland">Swaziland</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Syria">Syria</option>
<option value="Taiwan">Taiwan</option>
<option value="Tajikistan">Tajikistan</option>
<option value="Tanzania">Tanzania</option>
<option value="Thailand">Thailand</option>
<option value="Timor Leste">Timor Leste</option>
<option value="Togo">Togo</option>
<option value="Tokelau">Tokelau</option>
<option value="Tonga">Tonga</option>
<option value="Trinidad And Tobago">Trinidad And Tobago</option>
<option value="Turkey">Turkey</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Turks And Caicos Islands">Turks And Caicos Islands</option>
<option value="Tuvalu">Tuvalu</option>
<option value="Uganda">Uganda</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom Of Great Britain">United Kingdom Of Great Britain</option>
<option value="United States Of America">United States Of America</option>
<option value="United States Minor Outlying Islands">United States Minor Outlying Islands</option>
<option value="United States Virgin Islands">United States Virgin Islands</option>
<option value="Uruguay">Uruguay</option>
<option value="Uzbekistan">Uzbekistan</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Vatican City">Vatican City</option>
<option value="Venezuela">Venezuela</option>
<option value="Vietnam">Vietnam</option>
<option value="Wallis and Futuna">Wallis and Futuna</option>
<option value="Yemen">Yemen</option>
<option value="Zaire">Zaire</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>

<button class="btn btn-primary pull-left" type="button" data-tab-continue="step-1">
Back
</button>

<button class="btn btn-primary pull-right" type="button" data-tab-continue="step-3">
Next
</button>
</HTML>
 
Upvote 0 Downvote
Annabelle5893 said:
How would I code the javascript to show/hide fields? Does what I wrote in the attached file look right to you?
Click to expand...
I did not notice your JS code earlier. It looks like you already tried to implement this ?
No it does not look right to me. Your function valueChanged() is seriously borked :

1) It's missing two closing curly brackets and a closing right parenthesis
2) These numbers (200) and (300) at the end of some lines are probably wrong ? Although they don't produce any error.
3) The function uses jQuery syntax without jQuery having been included.

Being unfamiliar with jQuery I cannot comment on the functional content of this function.
You also have a (non-jQuery) function showHide() but that is not being called anywhere. Looks like there's quite some experimenting been going on.
 
Upvote 0 Downvote
And now you just posted another open question with a big wad of unformatted code 🙄 It seems like any attempt to an answer merely results in new questions. I give up.
 
Upvote 0 Downvote
cbreemer said:
I did not notice your JS code earlier. It looks like you already tried to implement this ?
No it does not look right to me. Your function valueChanged() is seriously borked :

1) It's missing two closing curly brackets and a closing right parenthesis
2) These numbers (200) and (300) at the end of some lines are probably wrong ? Although they don't produce any error.
3) The function uses jQuery syntax without jQuery having been included.

Being unfamiliar with jQuery I cannot comment on the functional content of this function.
You also have a (non-jQuery) function showHide() but that is not being called anywhere. Looks like there's quite some experimenting been going on.
Click to expand...
I'm a beginner at Javascript. HTML is one I know a lot more of. CSS I know a little about, but not a lot. Where should the missing brackets and closing parenthesis go? :confused:
 
Last edited:
Upvote 0 Downvote
Top Bottom