ansaurus

Question

Select box with 'Other' option to display input text field. How to get value back for form submission using jquery?

Answer 1

A:

function SubmitForm() {
  if ($('#i_n_r_reason').val()=='Other')
    ('#i_n_r_reason').val = ('#other_reason').val
  ('#account_form').submit();
}

is that an exact copy of your current code? or a quick rewrite? there are so many things missing!!

i'm not sure you can set the value of a select box to something that isn't an option. what you could do is have a hidden field that stores the value of the select or the value of your extra textbox.

so in your change() function on your select. set the value of the hidden field to the value of the select with something like:

$('#MyHiddenField').val($(this).val());

and in your form submit function do this:

if ($('#i_n_r_reason').val()=='Other'){
 $('#MyHiddenField').val($('#MyHiddenField').val());
}

Patricia 2010-09-15 14:54:06

I'm using a hidden field now but I'm having an issue of grabbing the value from it. I'm going to post this question again with the new code.

2010-09-15 20:33:09

just edit this question with your new code.

Patricia 2010-09-15 20:44:36

Answer 2

A:

<html>
<head>
    <script type="text/javascript" src="scripts/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            //initially hide the textbox
            $("#other_reason").hide();
            $('#i_n_r_reason').change(function() {
              if($(this).find('option:selected').val() == "Other"){
                $("#other_reason").show();
              }else{
                $("#other_reason").hide();
              }
            });
            $("#other_reason").keyup(function(ev){
                  var othersOption = $('#i_n_r_reason').find('option:selected');
                  if(othersOption.val() == "Other"){
                    ev.preventDefault();
                    //change the selected drop down text
                    $(othersOption).html($("#other_reason").val()); 


                  } 
            });
        });
    </script>
</head>
<body>
    <fieldset id="workers_comp_info">
      <p>
        <label for="i_n_r_reason">Reason why Workers Comp Insurance is not required:</label>
        <select name="i_n_r_reason" id="i_n_r_reason">
          <option value="No employees">No employees</option>
          <option value="1-2 employees">1-2 employees</option>
          <option value="Other">Other(Specify reason)</option>
        </select>
        <input id="other_reason" name="other_reason" type="text" placeholder="Other Reason" />
      </p>
    </fieldset>
</body>
</html>

So basically what it does is :

When the dropdown's changing, evaluate the value. If it's "Others" then show the textbox, else hide it.

For the second part, upon submitting the form, evaluate the value of the selected drop down. If it's "Others", then prevent the form from submitting, instead change the text of the selected drop down list to the value from the text box.

I guess the code is pretty explainable. Hope this helps.

EDITED

xar 2010-09-15 15:40:51

Thanks, the show and hide don't really seem to hide the box. The option I'm using with the toggle() does work however. And it doesn't appear that I can override the value of a select box.

2010-09-15 20:34:32

@user338413 : The code works fine here. I just updated my answer and show the whole code.

xar 2010-09-16 01:33:21

ansaurus

tags:

views:

answers:

Select box with 'Other' option to display input text field. How to get value back for form submission using jquery?

related questions