Other input value in dropdown box

JavaScript
1

This was a topic closed up never answered in this:

This is the code:

```
<script type="text/javascript">
function showfield(name){
	if(name=='Other')document.getElementById('div1').innerHTML = 'Other: <input type="text" name="other" />';
	else 
		document.getElementById('div1').innerHTML='';
}
</script>
<select name="select_opt" id="select_opt" class="form-control" onchange="showfield(this.options[this.selectedIndex].value)" required> 
	<option value="">Please Select Source</option>  
	<option value="Search Engine">Search Engine</option>
	<option value="Social Media">Social Media</option>
	<option value="E-Mail Campaigns">E-Mail Campaigns</option>
	<option value="Exhibitions">Exhibitions</option>
	<option value="Other">Other Sources, Please Specify</option>
</select>
<div id="div1"></div>

This works fine in that it will display a text input box to type in.

The question I have is how does the inputted text become a value that you can input into the database?

2

The select fields and any other information that is to be added to the database should be wrapped in a form field, so that the form’s information can be sent to some backend code that updates the database.

3

I know how to wrap in a form field. Do that all the time and I use dropdowns frequently. The value of this is suppose to be what is typed in the input box. But as written, it just adds the word “Other” to the database because that is the value.

So, based on that JS, I wasn’t sure how you can take the text typed and use that as the value that goes to the database.


<option value="Other">Other Sources, Please Specify</option>
4

Give the option in the HTML code a name attribute, and that will be submitted to the database.

Should you add and remove the name attribute from the option depending on if that option is valid or not? No you shouldn’t. The option should always be submitted to the backend form, and that kind of decision should be made by the backend itself.

Why should the backend be responsible for that kind of decision? Because you should not trust anything from the frontend. It’s too easily exploited by all kinds of problems. The backend is the place where reliable decisions are made.

5

It’s the name attribute the name that’s already in the select?

select name="select_opt"

To be sure we are on the same page in thought, the input text that is part of the dropdown, has a value of “other”. I want the value to be what is typed in the input text box. For example if I had a city list and it’s not in the dropdown, the user can add their own city name, etc.

I can limit that input to just letters with a RegEX when submitted to the database. But in my particular situation, I am not overly concerned about that.

6

What is usually done here is to have a hidden form field whose value is updated when the person finishes typing achieved by using the blue event.

7

You know more about this than I do, but would I need a hidden form field because the form field should be the same in case one of the dropdown options was selected? The user would just be selecting selecting a typed in value.

If I give it a hidden field then it would seem I would be better off just using a normal input text field, but I want it part of the dropdown option.

This is well above what I know but I was thinking that if a value was added to the JS:


<script type="text/javascript">
function showfield(name){
	if(name=='Other')document.getElementById('div1').innerHTML = 'Other: <input type="text" name="other" />';
	else 
		document.getElementById('div1').innerHTML='';
}
</script>

…maybe I could capture it, something like this:


<option value="<%=value%>">Other Sources, Please Specify</option>

But when I attempted to add a value to the JS, I couldn’t even get the text input to display.

8

I would not use a hidden form field but would use CSS to hide the input text field until the ‘Other’ option is selected. If some other option is then selected, the input text field would need become hidden again. When the form is submitted the value of the selected option and the content of the input text field would both be sent to the server.

At the server PHP would be used to determine what should go into the database. If ‘Other’ was selected, then the content of the input text field would go into the database. If any other option was selected then the value of that option should go into the database (even if there is text from the input text field).

In addition there would need to be validation, one way or another, to ensure that if ‘Other’ was selected then the input text field must contain some text.

Of course the PHP would also need to give protection against malicious form submissions.

9

Not unlike the JS, but how do you get the content of the typed input as a value that can then be sent to the database.

As of nowt, I haven’t through my searches to find an answer to that on any other forum site. I was pleased to see that this forum had a thread on it, but it hasn’t been solved yet.

10

Put your <select> and <input> elements into a form:

<!DOCTYPE html>
<html>
<head>
<title>Dropdown 1</title>
<style>
  #custom{
    visibility:hidden;
	display: block;
  }
</style>
</head>
<body>
<form action="dropdown1.php" accept-charset="UTF-8" method="post" enctype="application/x-www-form-urlencoded">
  <select name="select_opt" required> 
	<option value="" disabled>Please Select Source</option>  
	<option>Search Engine</option>
	<option>Social Media</option>
	<option>E-Mail Campaigns</option>
	<option>Exhibitions</option>
	<option value="Other">Other Sources, Please Specify</option>
  </select>
  <input type="text" id="custom" name="custom_opt">
  <button>Submit</button>
</form>
<script>
  function showfield(evt){
    if(evt.currentTarget.value == "Other") document.getElementById("custom").style.visibility = "visible";
    else document.getElementById("custom").style.visibility = "hidden";
  }  
  document.getElementsByName("select_opt")[0].addEventListener("change",showfield);
</script>
</body>
</html>

Here is a very simple PHP script for the form which sets the variable $value to either the value of the select element or the input text element depending on whether ‘Other Sources, Please Specify’ has been selected:

<?PHP

function clean($data)
{
return htmlspecialchars($data);
}

$select = clean($_POST["select_opt"]);
$custom = clean($_POST["custom_opt"]);

if($select=="Other") $value=$custom;
else $value= $select;

exit("value= ".$value);
?>

That displays the value on exit. You would need to put it into your database. Note the PHP needs to be saved to the ‘actions’ attribute file name of the form.

Currently there is no validation to ensure something has been entered into the input text field when necessary.

11

I couldn’t get this code to work in my current application so I did a separate stand-alone form submit with a straight copy and paste. When I post all of the specific options they are fine and post the current values. When I use the Other Sources then it posts the word “other”.

Any thoughts?

Thank you.

12

Yes, it posts the word ‘Other’ but it also posts the text that is entered into the input text field element. The ‘if’ statement in the PHP script sorts out which to use to put into your database.

13

I didn’t use the PHP because I use ASP. So I copied your form post exactly and the CSS and JS. I like what you did with the CSS where the “other” box doesn’t show until you click on the appropriate dropdown, but as mentioned, it doesn’t post the value of the “other”. And if you think you have a fix for that, I only want the value of the other to post - like it’s part of the dropdown selection but in this case it’s user input rather than using a pre-select.

14

I have never used ASP. Can you not use ASP to decide whether to use the value of the select element or the value of the input text element? My code does post the value of the text input element, as well as posting the value of the select element. It posts both!

I have in mind another approach if there is a problem with coding ASP to determine which value to use.

15

I struggle with JS. I can’t seem to get any combinations to work. I have done a little with JS and ASP and usual you have to do this:

<%=whatever%>

And that gets place in the JS and probably need to be the value in the text input. So they would match - be the same.

One of my attempts was this, the other box shows but no value gets posted.

	<option value="<%=showfield%>">Other Sources, Please Specify</option>
  </select>
  <input type="text" id="custom" name="custom_opt">
  <button>Submit</button>
</form>
<script>
  function showfield(evt){
    if(evt.currentTarget.value == "<%=showfield%>") document.getElementById("custom").style.visibility = "visible";
    else document.getElementById("custom").style.visibility = "hidden";
  }  
  document.getElementsByName("select_opt")[0].addEventListener("change",showfield);

Thanks for your help, it’s appreciated.

16

I was assuming that you were using PHP or ASP to save to your database. I now understand that you do not wish to edit existing ASP code.

I assume from the code you posted in post #1 that the value sent to the ASP script on your server has to have name “select_opt”.

In my code below, I have moved the name “select_opt” to the input text element. The select element now has name “ignore_opt”. As things stand, the select element is still within the form so its value will be posted to the ASP script.

When the form is submitted, if one of the first four options has been selected, JavaScript copies the value selected to the input text element. The value sent to the server will therefore have name “select_opt”.

If ‘Other’ has been selected, when the form is submitted, JavaScript displays an alert message if the input text field contains no text. Otherwise the form is submitted. You may wish to make alternative arrangements to display a validation failure message.

In the code below you will need to edit the form action to the file name of your ASP script.

<!DOCTYPE html>
<html>
<head>
<title>Dropdown 2</title>
<style>
  #custom{
    visibility:hidden;
	display: block;
  }
</style>
</head>
<body>
<form action="dropdown1.php" accept-charset="UTF-8" method="post" enctype="application/x-www-form-urlencoded">
  <select name="ignore_opt" required> 
	<option value="" disabled>Please Select Source</option>  
	<option>Search Engine</option>
	<option>Social Media</option>
	<option>E-Mail Campaigns</option>
	<option>Exhibitions</option>
	<option value="Other">Other Sources, Please Specify</option>
  </select>
  <input type="text" id="custom" name="select_opt" autocomplete="off">
  <button>Submit</button>
</form>
<script>
  document.getElementsByName("ignore_opt")[0].addEventListener("change", (event) => {
    if(event.currentTarget.value == "Other"){
      document.getElementById("custom").style.visibility = "visible";
	  document.getElementById("custom").value="";
	}
    else{
	  document.getElementById("custom").style.visibility = "hidden";
	}
  });

  document.querySelector("form").addEventListener("submit", (event) => {
    if(document.getElementsByName("ignore_opt")[0].value=="Other"){
      if(document.getElementById("custom").value==""){
	    alert("Please enter custom text");
	    event.preventDefault();   // prevents form submission
	  }
	}
	else document.getElementById("custom").value = document.getElementsByName("ignore_opt")[0].value;
  });
</script>
</body>
</html>
1 Like
17

I am only using that name in my trail. I will be changing that in my live code in the appropriate places.

At first it posted other as other and not the typed in name.

So on my post page that goes into the database I did this:

<%

ignore_opt = request.Form ("ignore_opt")
ignore_opt = request.Form ("select_opt")

select_opt = ignore_opt
    'this posts to the page instead of going to database.  Once it works then this is remove and entered in the databse
response.Write ignore_opt

%>

I like you put in the pop-up if no text was selected, good idea!

So I am going to move this to the live test code and report back to you.

Thank you so much and I really appreciate your time and expertise in this matter.

18

Did extensive testing for about 4 hrs. Changed the select name and make the appropriate changes in the JS. The main first issue I had was submitting to database, which is more complex then just submitting to a post page.

The problem I was having is that there are 2 names, (1) ignore_opt in the select, (2) select_opt in the text input. I was able to finally submit to the database by using and if/statement depending on which was posted because the database only has the one field the input should go.

I did a RegEX on the input and was having some issues. Discovered it wasn’t the RegEX that was the issue, it was name issue.

This is my statement:

if request.form ("select_opt") = "" then
specialization1 = request.form ("specialization1")
else
specialization1 = request.form ("select_opt")
end if

So this is what happens:

All works well when I submit the pre-selected values. When I submit it saves it to the database. This is important to know that it is submitedt through AJAX and the form doesn’t refresh. You stay on the same page. Then if you use the other field and submit, all is good. Now the problem and remember that the form didn’t refresh but it saved it to the database. The input type field doesn’t go away. Now if you decide to change to a pre-select and submit the input box goes away but the pre-select doesn’t change in the database. You either have to refresh the page or go back to the input box and open it and then if you do a pre-select it submits.

So the problem is either in my if/then which I experimented without results, or somehow the input text field needs to reset. As a note, when you first submit the text input field, since there is no refresh, it doesn’t go away and if it could auto close it might just work.

Sorry for the lengthy explanation but wanted to give you all the testing. Hopes this helps and maybe you see a solution.

Thanks for your help.

19

I have double checked everything and the issue is that the input field doesn’t clear if closed, so when you submit with a pre-select to change what you prior submitted in the text box, the pre-select doesn’t submit unless you go back to the input text other and then select a pre-select, then it works.

So not sure if JS can clear that once submitted or if CSS can be changed, but I don’t see how the CSS would effect that.

Thanks

20

I was not aware you are using AJAX.

My JavaScript above in post #16 executes this after the ‘Submit’ button is clicked but before the form is submitted (without using AJAX):

    if(document.getElementsByName("ignore_opt")[0].value=="Other"){
      if(document.getElementById("custom").value==""){
	    alert("Please enter custom text");
	    event.preventDefault();   // prevents form submission
	  }
	}
	else document.getElementById("custom").value = document.getElementsByName("ignore_opt")[0].value;

My understanding is that section of JavaScript is never executed because you are using AJAX so the form is never submitted. You seem to substituting the last line of that JavaScript with your ASP if…else…endif code. I assume you do not get the validation alert message “Please enter custom text” if the input text element contains no text.

As your ASP if…then…else…end if is doing essentially the same as my PHP if…else in post #!0, I think you can revert to using my JavaScript in post #10. But I have not considered this carefully! Note the values of the select element would have name select_opt and the input text element would have name custom_opt, so you would need to edit your ASP if…then…else…endif accordingly.

I have not yet worked out why that is happening. Do you not get an AJAX post every time your ‘submit’ button is clicked?