I have a form and all data is passing to my Firestore Database as expected with the exception of my dropdown selection and I'm not sure why this is. Any ideas?
<div class="col-lg-6 col-md-12">
<div class="form-group">
<label>Name Of Company:</label>
<select type="text" formControlName="companyName" id="companyName">
<option > Company Name </option>
<option value="Company Name 1">Company Name 1</option>
<option value="Company Name 2">Company Name 2</option>
<option value="Company Name 3">Company Name 3</option>
<option value="Company Name 4">Company Name 4</option>
</select>
</div>
</div>
Found the Issue, Kind of.
So it turns out that the reason this form is not sending the dropdown information to the database is due to some inline css, more specifically a component set to **display: none;**. When I disable this in the Elements -> styles within the console it sends the data as expected.
However, I still haven't found where this element is located in the code or a way to disable it permanently, but it's a start.
Issue Resolved
The display:none issue I mentioned earlier had to do with bootstrap 4 properties when utilizing the nice-select plugin. I simply uninstalled the nice-select plugin and used the native select option with a little css and everything worked perfectly. I tried to find a workaround, but after several hours I decided it was faster to move forward without the plugin.
This part is working if this is not working for you then you need to look at migration table id/name in model or function.
<form action="">
<div class="col-lg-6 col-md-12">
<label>Name Of Company:</label>
<select formControlName="companyName" id="companyName">
<option > Company Name </option>
<option value="Company Name 1">Company Name 1</option>
<option value="Company Name 2">Company Name 2</option>
<option value="Company Name 3">Company Name 3</option>
<option value="Company Name 4">Company Name 4</option>
</select>
</div>
<input type="submit" value="Submit">
</form>
Related
i'm creating a tour site where people can select a number destination, date, number of children and the price range to see if that type of a tour is available, then redirects to that page to preview and sign up. how can i set up that using a multi select option and a search box,?
This is the simple html form but i can't expand on this
<select class="mdb-select colorful-select dropdown-primary md-form" multiple searchable="Search here..">
<option value="" disabled selected>Choose your country</option>
<option value="1">USA</option>
<option value="2">Germany</option>
<option value="3">France</option>
<option value="4">Poland</option>
<option value="5">Japan</option>
</select>
<label class="mdb-main-label">Label example</label>
<button class="btn-save btn btn-primary btn-sm">Save</button>
you can use this jquery plugin to implement multi select option in html using jquery:
https://developer.snapappointments.com/bootstrap-select
I am working on a form in which user needs to select the country. User can select his/her country by searching on the input field or by selecting from the dropdown.
All of the countries are shown in dropdown so I've removed them for the purpose to post minimized code.
<div class="form-group">
<label for="country">Country </label>
<input list="country" name="country">
<datalist class="form-control" id="country">
<option value="Virgin Islands (Brit)">
<option value="Virgin Islands (USA)">
<option value="Wake Island">
<option value="Wallis & Futana Is">
<option value="Yemen">
<option value="Zaire">
<option value="Zambia">
<option value="Zimbabwe">
</datalist>
</div>
An screenshot of the current state is here:
The form shouldn't have that extra input field below the Country label. The field isn't accessible.
Your code is correct.
This is using your code
Maybe there is another code that you don't know.
You can inspect element your code by press f12 button
I hope my answer can help you
I'm writing a really simple form with 2 text fields and one select. For some reason, the select tag with options doesn't display on my page. I can see the 2 text fields and the label for the the select, but not the select it self.
The app is written in rails and I use materialize.
There might be something too obvious that I don't see it, but after 30mn of thinking, I guess it's fair to put it on SO :)
Thanks
Here's the code:
<form action="/resources" method="post">
<input
type="hidden"
name="authenticity_token"
value="<%= form_authenticity_token %>">
<label for="ressource_name">Ressource Name</label>
<input type="text" id="ressource_name" name="resource[ress_name]" value="<%= #resource.ress_name %>">
<label for="ressource_link">Ressource Link</label>
<input type="text" id="ressource_link" name="resource[link]" value="<%= #resource.link %>">
<label for="categories">Categories</label>
<select id="categories" name="resource[category_id]">
<option value="1">Stuff 1</option>
<option value="2">Stuff 2</option>
<option value="3">Stuff 3</option>
<option value="4">Stuff 4</option>
<option value="5">Stuff 5</option>
<option value="6">Stuff 6</option>
<option value="7">Stuff 7</option>
<option value="8">Stuff 8</option>
</select>
<br>
<input type="submit" value="Post">
</form>
So I put the answer (from Samir) here as well as I guess some other people might come across that issue (it won't change your life, but it might save you some minutes that you want to spend on 'real' issues).
Check the styling! For some reason the select tag was defaulted to {display: none;}
The select tags(likely all select tags) on your page are most likely defaulted to styled to 'display : none' and just in case you cannot find the exact css code that is disappearing the select tag, just cascade the old style by declaring a style attribute on the select element and display it to block. like below
<select style="display: block;">
<option value="" selected>Choose Country</option>
</select>
I have a simple HTML form that I'm using to drive site search for a website I'm creating.
Two of the fields should not be used together, such as "make" and "model" of a car. You wouldn't want someone searching for a "Ford Ram Truck," for instance.
How can I modify my form so that if a certain value in one of the fields is selected, the other field disappears?
Thank you for your help!
<select name="make">
<option value="item 1">item 1</option>
<option value="item 2">item 2</option>
</select>
<select name="model">
<option value="item 1">item 1</option>
<option value="item 2">item 2</option>
</select>
<input name="" type="submit" />
You would need to use javascript and hook up to the change event of the radio buttons.
In your javascript you can set the visibility of any form element to hidden or visible (depending on which you want).
You would still need to validate/check on the server side in order to avoid such a search (since javascript may be off or a malicious user might override your client side validation).
I think Chained Select Menu can solve your problem.
Is it possible to have a selectbox that has a default option such as: "Select One" but have the term "Select One" not present in the actual list itself?
<select name="test" id="test">
<option value="" selected="selected">Select A Entry</option>
<optgroup label="A Label">
<option value="one">Option 1</option>
<option value="two">Option 2</option>
<option value="three">Option 3</option>
</optgroup>
</select>
I would go so far as to say no. Personally I would leave it in this list but write a javascript function to validate user input on form submission.
You could use this little bit of Javascript to do the trick:
<select name="test" id="test" onclick="this.remove(0);this.onclick=''">
As they click the list to select an option, it removes the first option ("Select an Entry" from the list, then clears the event handler so it only does this the first time.