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.
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.
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.
It’s the name attribute the name that’s already in the select?
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.
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:
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.
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:
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”.
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.
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.
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.
In the code below you will need to edit the form action to the file name of your ASP script.
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
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.
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")
specialization1 = request.form ("select_opt")
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.
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.
alert("Please enter custom text");
event.preventDefault(); // prevents form submission
else document.getElementById("custom").value = document.getElementsByName("ignore_opt").value;
I have not yet worked out why that is happening. Do you not get an AJAX post every time your ‘submit’ button is clicked?