I trying to do something really simple, but I don't know how.
I have an HTML Input select field in a table. If someone writes data in the text field or choose an option from the select field and press the submit Button, the data transfer to the backend via HTTP post. In the backend, the data gets stored in an SQL Database. After that, the page reloads all the textfields having the new value that I reload from the backend and transfer to the Frontend.
Now I am trying to do the same with the select input field. I don't want to use a new label to show what has been the last submitted value (the last row of the table in the attached picture). The last submitted value should be shown in the input select field.
I try to load the values stored in metadata with the value=" " parameter but that doesn't work. In the normal input text field, it works fine and I get the result that I expected.
Can anybody give me an idea to realize this? My current Code looks like this.
{%for i in range(0, len)%}
<tr>
<td>{{i+1}}</td>
<td>{{tables[i][0]}}</td>
<td><input type="text" name="devicename_{{i}}" placeholder="Gerätename" value="{{metadata[i][0]}}"></td>
<td><input type="text" name="place_{{i}}" placeholder="Standort" value ="{{metadata[i][1]}}"></td>
<td>
<select name="devicetype_{{i}}" value ="{{metadata[i][2]}}">
<option>Bitte wählen</option>
<option value="Option1">Option2</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
<option value="deaktiviert">deaktiviert</option>
</select>
<td>"{{metadata[i][2]}}"</td>
</td>
{%endfor%}
Current Frontend result
Thanks for the help. If I have to use JavaScript or PHP for that, please give me help with javascript.
Can't you just use PHP for that, I have a methode but it's only PHP
Related
I have this input field with select dropdown defined in handlebar file.
<select name="assigneeSelect" id="{{this.commonID}}" class="custom-select sources" key="{{this.id}}" placeholder="{{this.assignee}}">
<option value="5f572f2f68b4420488b585cb">Charlotte Miles</option>
<option value="5f4d494c6dba221200f2cc1e">Sulekha Yadav</option>
<option value="5f4d49636dba221200f2cc1f">Adele Armstrong</option>
</select>
<input class="form-control" class="deadline" type="text" value="{{this.deadline}}"/>
Here is the UI. Both are in one row in different <td>
First I fill the deadline input text with some data and then I change the select drop-down option. So now what I want is that onChange of select dropdown i want to fetch the respective row's input text and then I need to send it via AJAX call on nodejs server side which then update the deadline field in backend mongoDB which gets reflected back in deadline input field again when the page loads.
I am trying this code for fetching its value but isn't working.
var deadline = $(".deadline").text();
alert(deadline);
Here I am getting blank alert. Also I am fetching data with class attribute because there are similar many rows on same page.
use val() function like this
var deadline = $(".deadline").val();
alert(deadline);
I'm wondering if I can get some assistance. I have a form that I want to submit data to a database. However, I am getting an issue doing so with the following code. The select inputs are set to disabled so if nothing is selected then the form doesn't submit those fields (fields by default are still submitted blank.
<div class="form-group">
<label for="title">
Title
<span class="asteriskField">
*
</span>
</label>
<select id="inputtitle" name="title" class="form-control" onchange="updateReview('title');" tabindex=1 />
<option value="" selected disabled>Please select</option>
<option value="Master">Master</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
<option value="Rev.">Rev.</option>
</select>
</div>
Thank you.
Using disabled on option in selectbox isn't good solution, because it does not force user to select option. If he does not click on selectbox, blank value will be posted.
To force user to select option use required on selectbox, and also leave default option disabled, so he will have to choose one option.
use Form OnSubmit event and create formdata manually in javascript with the fields you want to send to server based on conditions.
This is simply the way forms work in HTML. When you submit a form, all the input fields are retrieved and sent to the designated action. However, selectboxes that were not selected are not part of the post.
If you want to send a list of all select boxes (including the ones that are unselected), a common trick is to create a hidden input with the same value for each selectbox. This way you get a list of all the selected fields, as well as the entire list of selectable fields.
It's a wrong behavior, you should validate if nothing it's selected with javascript or some backend code before any query into DB. Don't use disabled in fields that you want, in some way, retrieve some kind of data, because you're changing the intrinsic behavior of the element, confusing the next guy that will work with your code.
If nothing is selected you can return false into your backend with some error message or just disable the visualization of submit button with javascript.
EDIT: The solution from #Autista_z is good about
To force user to select option use required on selectbox, and also leave default option disabled, so he will have to choose one option.
I just want to empathize: don't let the backend without that validation too, double validation (front/back) is a must.
I got an interface, already logged in with a new username now I want so select this user to my selected option value and insert it into Mysql DB:
<select name="name" class="form-control" required="required">
<option value="" required="required"> Please select </option>
<option value="Rifadije Mavriqi"> Rifadije Mavriqi </option>
<option value=" <?php
?>"></option>
<option value="Merdiana Leci"> Merdiana Leci </option>
</select>
Let say that your working with CronJobs that every X minutes check whos online, than select the column where online=1 with simple while and you got it.
Okay, i dont know if you ever work with cronjobs, thats really easy, via your cpanel/direct admin you pick up a file and set-up every x time the server will run this file. Let call this file cronj.php and there write a query that set all the online colum to 0 ( than unactive users resets) and close the file. I will add in a config or header file a query that check if this is user or unregister guy , if register lets set online colum to 1. And now via your control panel write select query with while that show you where online=1 and show you by the online colum the user names that online right now.
I have an issue related to an HTML page. Hoping that someone could help resolve it -
I have an HTML page with a Country select and a Text Box. The value attribute of the Option tag contains the Country codes. When the User selects a country, its respective country code should get populated in the Text Box.
This will happen each time the User changes the country.
All of the data is present in the page itself, and no server calls are made to fetch the data.
Could this be done using the delegate method? Can I also use Ajax in this case?
Any help would be very much appreciated.
Many thanks in advance!!
By using Jquery
Try this
HTML
<select id="c_code">
<option value="IN">India</option>
<option value="US">USA</option>
</select>
<input id="code" type="text">
Script
$('#c_code').on('change',function(){
$('#code').val($(this).val());
});
DEMO
You simply need to bind the logic to the change event of select
Here is the html code
<select id="ddl">
<option value="001">India</option>
<option value="002">USA</option>
</select>
<input type="text" id="txt" />
Here is the jQuery
$('#ddl').change(function(){
$('#txt').val($('#ddl').val());
});
Here is the demo
i have a little form with a select list, and i am submitting the form every time i select an item. the problem is that, after selecting a value and submitting the form, the selected item doesn't remain selected. Is there any method to keep the selected item selected in the list, after the form submit? (using javascript for example)?
<form name="order_of_products_by_values" id="order_of_products_by_values" method="post" action="">
<select id="order_of_products_by_values" name="order_of_products_by_values" onChange="this.form.submit();">
<option value=1 >Pret crescator</option>
<option value=2 >Pret descrescator</option>
<option value=3 >Test</option>
<option value=4 >Test</option>
</select>
</form>
thank you!
If you can't use a server side solution, you could set a cookie after the onchange-Event fires and submit the form. For informations about javascript cookies, take a look at the following site: http://www.quirksmode.org/js/cookies.html
What if you use AJAX? If you use jQuery you can submit the form and the select list wont be altered after selection.
jQuery('#order_of_products_by_values').change(function() {
jQuery.post('ajax/test.php', jQuery("#order_of_products_by_values_FORM").serialize());
});
Also, notice I changed the ID of the form since it is the same ID as the select list which can cause conflicts.
The serialize function will serialize the form and send it to the test.php script where it can be used as usual. Ex:
$select = $_POST['order_of_products_by_values'];