Take input field data to save in select option value

Question

I have this dropdown list with different values. What i am trying to do is whenever I select other option, the hidden div with id=othertype show and I will type in input field and want to save that data but its not working. I can't use the same name attribute twice I know but I don't want a separate column just for other input. Is it possible to save the input value in same column as options? I want value of input field and not the value I am passing in other option which is other itself.

<div class="form-group">
    <div class="col-sm-12">
    <label for="p_type">Type*:</label>
    <select class="form-control" name="qp_type" id="p_type" required>
        <option  value="Css">CSS</option>
        <option  value="HTML">HTML</option>
        <option  value="PhP">PhP</option>
        <option  value="Other">Other</option>
    </select>
    </div>
</div>

<div class="form-group" id="otherType" style="display:none;">
    <div class="col-sm-12">
        <label for="pType">If you chose ‘Other’, please describe below:</label>
        <input id="pType" type="text">
    </div>
</div>

Script

$('#p_type').on('change',function(){
    if( $(this).val()==="Other"){
    $("#otherType").show()
    }
    else{
    $("#otherType").hide()
    }
});

Are you using the value attribute of the option for anything other than checking if it's "Other"? You could use the .text() for this instead of .val() and store the value of pType in your option's value (or you could just store it as a data- attribute, but ... possibly bad form) — Tibrogargan
– Tibrogargan, Commented Oct 9, 2016 at 22:55
I think that you should create separate column for this data, because it's different type, and you should put into DB information that user select option "other". Of course you can put this data into the same DB column but it's not correct IMO. — kris_IV
– kris_IV, Commented Oct 9, 2016 at 23:00
I did use the text() but somehow its not working. yeah, I have same approached but can't able to find the example as how to do it. — stack kid
– stack kid, Commented Oct 9, 2016 at 23:01
@kris_IV You're assuming that by "column" he's referring to a database column. You could easily be correct, however there's nothing else in the question that validates that assumption. — Tibrogargan
– Tibrogargan, Commented Oct 9, 2016 at 23:01
Thanks Kris_IV.. yeah, that would be the last option. He got it right, I was talking about db column but when there is already a column, to save and show the result, i think it is'nt a good approach to stuffing the db with additional columns — stack kid
– stack kid, Commented Oct 9, 2016 at 23:03

Rasclatt · Accepted Answer · 2016-10-09 23:16:44Z

1

Looks like you are trying to use either the input of the text field or the value from the dropdown. You can just enable or disable the one field. The names can be the same, that is not a problem.

<div class="form-group">
    <div class="col-sm-12">
    <label for="p_type">Type*:</label>
    <select class="form-control" name="qp_type" id="p_type" required>
        <option  value="Css" selected>CSS</option>
        <option  value="HTML">HTML</option>
        <option  value="PhP">PhP</option>
        <option  value="Other">Other</option>
    </select>
    </div>
</div>

<div class="form-group" id="otherType" style="display:none;">
    <div class="col-sm-12">
        <label for="pType">If you chose 'Other', please describe below:</label>
        <!-- START OFF WITH THIS ONE DISABLED, NAME IT THE SAME AS ABOVE --->
        <input id="pType" type="text" name="qp_type" disabled>
    </div>
</div>

<script>
$(document).ready(function(){
    $('select[name=qp_type]').change(function(){
        if($(this).val() == 'Other') {
            $('#otherType').show();
            $('#pType').prop('disabled',false);
        }
        else {
            $('#otherType').hide();
            $('#pType').prop('disabled',true);
        }
    });
});
</script>

answered Oct 9, 2016 at 23:16

Rasclatt

12.5k3 gold badges28 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

stack kid Over a year ago

Thanks alot Rasclatt. It worked. Thanks Champ once again.

Tibrogargan · Accepted Answer · 2016-10-09 23:34:23Z

This will change the value of the selected option to the value from the input field.

function init() {
	$('#p_type').on('change',function(){
		if( $("option:selected", this).text()==="Other"){
		$("#otherType").show()
		}
		else{
		$("#otherType").hide()
		}
	});

	$('#pType').on('change',function(){
		// selector should be '#p_type option[text="Other"]', but it's returning an empty array
		$('#p_type option:selected').val( $(this).val() )
		console.log( $('#p_type').val() );
	} );
}

$(init);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<body>
<div class="form-group">
    <div class="col-sm-12">
    <label for="p_type">Type*:</label>
    <select class="form-control" name="qp_type" id="p_type" required>
        <option  value="Css">CSS</option>
        <option  value="HTML">HTML</option>
        <option  value="PhP">PhP</option>
        <option  value="Other">Other</option>
    </select>
    </div>
</div>

<div class="form-group" id="otherType" style="display:none;">
    <div class="col-sm-12">
        <label for="pType">If you chose ‘Other’, please describe below:</label>
        <input id="pType" type="text">
    </div>
</div>
</body>

Collectives™ on Stack Overflow

Take input field data to save in select option value

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related