Html fill input field

How to fill input field automatically when name is selected from database?

I have a form that need to be filled up, one of its field is employee name, I selected its value from a database table called tbl_employee, each name has codename that stored in the same table, but I have a problem, because I dont know what code to be used to automatically filled the input field called codename. the following is my html code

 
Employee Name Select Employee 
 
Code Name 
 

4 Answers 4

To give the input a value, you add the «value» attribute to it:

Will not work currently because $emp is defined inside a loop. But that’s it if you ommit that point.

First of all pass codename column in option value:

 Select Employee  // use codename column in value here. 

Second, add a ID attribute on your input field:

Than, you can use jQuery to add the value on your input field:

sir based on your comment // use codename column in value here., is there something that i need to add on that line?

If you want to do this without reloading the page, you need Javascript.

First, add the codename into the option attributes that you generate with PHP:

Then in JS, check whenever the selected option changes, extract the codename from the selected option and write its data-codename into the value of your codenamer input.

Something like this (using Jquery):

$('#employee-selector').change(function() < var selected = $(this).find('option:selected'); var codename = selected.attr('data-codename'); //if the above fails, you may have to use this: (note the [0]) //var codename = selected[0].attr('data-codename'); $('#codenamer').val(codename); >); 

This requires you to put id=’employee-selector’ on your select element and id=’codenamer’ on your codenamer input field.

Источник

Style input element to fill remaining width of its container

This isn’t my exact code, but the important thing is there’s a label and a text input on the same line in a fixed-width container. How can I style the input to fill the remaining width of the container without wrapping and without knowing the size of the label?

9 Answers 9

Here is a simple and clean solution without using JavaScript or table layout hacks. It is similar to this answer: Input text auto width filling 100% with other elements floating

It is important to wrap the input field with a span which is display:block . Next thing is that the button has to come first and the the input field second.

Then you can float the button to the right and the input field fills the remaining space.

Update 1: If your website is targeted towards modern browsers only, I suggest using flexible boxes. Here you can see the current support.

Update 2: This even works with multiple buttons or other elements that share the full with with the input field. Here is an example.

This works great. Use float:left instead of right to create a facebook style tagger or something similar.

This is a bad answer. It looks like it works if you just glance at it, but go try the fiddle. It is actually chopping of half the input box, but you can’t tell unless you start testing it out. The goal is to fit the input box to the width of the display area, not truncate it. If you try to do any styling (rounded corners, a border, right justification of text) this utterly fails.

Источник

Pre-fill form field via URL in html

I am looking for a simple way to pre-fill a field in my contact form when ever a user clicks on a link that is given in some other page. This is my contact form in html :

 
Your name: 
 
Your email: 
 
Your message: 
 
 

I want to fill the «message» field with «some text» when a user clicks on a url like www.xyz.com/contact.html?setmessagefield=some_text

4 Answers 4

A more modern way would be to use the URL() constructor and the searchParams property. Let the browser engine do the work!

(new URL(window.location.href)).searchParams.forEach((x, y) => document.getElementById(y).value = x) 

const hash = '?name=some_text&email=more%20text'; const example = "http://example.com/" + hash; (new URL(example)).searchParams.forEach((x, y) => document.getElementById(y).value = x);

Great answer if someone wants to do this to multiple fields (HTML rules doesnt allow same ID), try document.getElementsByName(y).forEach((p) => (p.value = x));

@Rishav Thank you. In your case you can write document.getElementsByName(y).forEach(p => p.value = x);

Note, if it’s a checkbox ( type=»checkbox» ), the value attribute shouldn’t be changed. Instead the «checked» attribute needs to be set.

Therefore the full lambda expression is: p => p.type === «checkbox» ? p.checked = (x === «true») : p.value = x

JavaScript has no built-in functions to parse url parameters like that (Since those GET parameters are usually used to send data to the server).
I’d suggest using a hash instead (A hash is purely client-side):

Now, add some id ‘s to your fields:

Then set the values like this, on load:

var hashParams = window.location.hash.substr(1).split('&'); // substr(1) to remove the `#` for(var i = 0; i

The big advantage of this is that it’s flexible. If you want to set the values of 2 fields, you supply those 2 fields’ id ‘s in the hash:

No need to edit the code, then.

What if I have an url like this? The hash symbol is inserted at the end of parameters. [it-center.am/… Thanks in advance.

Might want to consider the security issues before implementing: security.stackexchange.com/questions/29598/…

I know this is a bit old, but when I use this or the answer by alosidg, if I change any field (auto filled or not) all the auto completed fields get cleared. There is other JS on the form (Gmaps auto fill) but this does not happen with the browser auto complete or manually entering the information.

When you use this answer, does the data get entered when you load the page? If the data disappears after that, that could be the browser’s autocomplete clearing the fields.

The data gets entered but as soon as I type a character in a prefilled or empty field it clears and will not come back. No signs of chrome auto complete trying to fill the form. The fields useally highlight when auto complete is filling them in. Plus a dropdown useally shows in the box I am typing in. I am using a userscript to add this function to a 3rd party page. The same thing happens With this answer and the URL() constructor answer below.

Источник

How can I pre-populate html form input fields from url parameters?

I have a vanilla html page which has a form in it. A requirement has come in to be able to pre-populate the form via the url. Something like:

http://some.site.com/somePage.html?forename=Bob&surname=Jones 

I can’t seem to find any simple solution to this. Can someone point me in the right direction with some javascript to accomplish this? Happy to use a javascript solution, but I’d prefer to avoid pulling in an entire library just for this single use (none are currently used). Thanks.

4 Answers 4

Use a custom query string Javascript function.

function querySt(ji) < hu = window.location.search.substring(1); gy = hu.split("&"); for (i=0;i> > var koko = querySt("koko"); 

Then assign the retrieved value to the input control; something like:

document.getElementById('mytxt').value = koko; 

Are you using PHP? If so, that makes things much easier. Assuming your link as above, you can use:

That should pre-populate for you.

Perhaps if paradox870 had prefaced his answer with something like «I see the person before me answered the method in javascript, but I would also like to point out that this can be performed in PHP .. in fact, here is a method to do so . «. I’ve found that stackoverflow users tend to get negative quickly if you try to help out more than the original question . sometimes they go overboard. I can understand this i you don’t first Answer the Question, but tell someone to do it another way, but in this case the question had actually Been Answered, and he was merely pointing out an alternative.

Источник