Alternative <input> for Selected <option>

[iwato]

SET-UP:  Please find below three items including; one,  the relevant form elements of a much larger form; two, the Javascript that determine what data will be sent to a PHP processing page via a $_POST variable, and three, The actual implementation of the code.  The question follows the presentation of the code.

The HTML

<div id='language_options' style='clear:both;'>
	<label for='nl_tongue'>Native Tongue:<span class="formlabel">*</span></label>
	<span class="rightfloat">
		<select id="nl_tongue" name="language" style="width:150px;">
			<option selected value="0">Select Language</option> 
			<optgroup label='africa [east]'>
				<option value='mg'>Malagasy</option>
				<option value=sw>Swahili</option>
			</optgroup>
			<optgroup label='africa [central]'>
				<option value=ny>Chichewa</option>
				<option value=sn>Shona</option>
			</optgroup>
			<optgroup label='Not found?'>
				<option value='other_tongue'>Click and enter!</option>
			</optgroup>
		</select>
	</span>
</div><!-- end div#language_options -->
<div id='nl_other'>
	<span class="rightfloat"><input id='nl_other_input' type='text' name='other' value=''></span>
</div><!-- end div#nl_other -->
<label id="nl_tongue_error" class="error" for="nl_tongue">This field is required.</label>

The JAVASCRIPT

$.get('./newsletter_filler.html', function(data) {
	$('#main').html(data);
	$('#nl_other').hide();
	var tongue = '';
	$('#nl_tongue').change(function() {
		if ($('#nl_tongue').val() == 'other_tongue') {
			$('#nl_other').show();
		}
	});
}).done(function(){
	$('.error').hide();
	$(".button").click(function() {
	
	--- Other Code ---

	/*********************************
	The language Variable
	*********************************/
		var language = $("select#nl_tongue").val();
		if (language == "0") {
			$("label#nl_tongue_error").html("<p style='line-height:1.3em'>Please select your first language! Or, click on the <span style='font-weight:bold;'>\"Not found?\"</span> option at the bottom of the list of languages.</p>").show().css('float','left');
			$("select#nl_tongue").focus().focusout(function() {
				$("label#nl_level_error").hide();
			});
			return false;
		}
		if (language == 'other_tongue') {
			language = $("#nl_other input").val();
			if($("#nl_other input").val() == '') {
				$("label#nl_tongue_error").html("<p style='line-height:1.3em'>Please enter your first language.</p>").show().css('float','left');
				$("nl_other_input").focus().focusout(function() {
					$("label#nl_tongue_error").hide();
					$("#nl_other_input).hide();
				});
				return false;
			}
		}
	});
	
	--- More Code ---
});

IMPLEMENTATION:

Sequence of Events 

1. Go to the Grammar Captive mainpage and do the following:
2. Click on the word Subscribe under the heading Info/Newsletter.
3. Click on the final <option> Click and enter! under the  Not Found? <optgroup> at the bottom of the Select Language list.
4. Enter a language of some sort.
5. Click where it says Not found? and select a different language.
6. Submit the form.

The Outcome:  The selected language takes precedence over the entered language, and the former is sent to the data base.

DILEMMA:  In order to correct this problem I have experimented in a variety of ways, but to know avail.  

What would you recommend and why?

Roddy

 

 

 

 

[justsomeguy]

What do you want to happen if they select a language and also type one in?  That's a decision for you to make.  The rest is just a little logic when you validate the form.

[iwato]

This problem has been resolved with the following additional else {} statement.

$('#nl_tongue').change(function() {
    if ($('#nl_tongue').val() == 'other_tongue') {
        $('#nl_other').show();
    } else {
        $('#nl_other').hide();
    }
});

Roddy