Jump to content
iwato

Alternative <input> for Selected <option>

Recommended Posts

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

 

 

 

 

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×