I have created an input form in HTML with a combination of input and select boxes. I would like to populate a select menu on the fly with data from the input boxes - for example:
Employee One: Jim
Employee Two: John
Employee Three: Bob
This would then populate a select menu with the Jim, John and Bob as options.
I am trying to avoid having to submit the input data first as I would really like to have all the input on one page. I submit all the data to a MySQL database, so worst case I could submit it in sections and read it back, but would appreciate any suggestions for doing it on the fly.
Thanks for any help.
Blair
Maybe something like this?
HTML:
<input id="employee_name" type="text" placeholder="Type here the Employee name"/>
<input id="add_employee" type="button" value="add"/>
<select id="employee_list">
</select>
Jquery:
$('#add_employee').click(addEmployee);
function addEmployee(){
var employee_name = $('#employee_name').val();
$('#employee_list').append('<option value='+employee_name+'>'+employee_name+'</option>');
}
Related
I've been searching this site and others for what I believe may be a unique solution to a particular problem.
In essence, I have a search function on my website. It consists of a form which takes user input and compares it to movie dialogue stored within a MySQL table via my results.php page.
However, I'd like the search function to perform a dual purpose. Using a Datalist, I'd like the search function to display a list of available titles (generated dynamically using PHP which I am more than confident enough to do) and if a user selects one of them and presses enter, they will be directed automatically to the corresponding title page (i.e. display.php?urn=0001).
If, however, the user enters a string which is not within the Datalist, it will redirect them to results.php for the standard search results.
This is what I've come up with so far:
<html>
<body>
<form method='POST' action='results.php'>
<input name="search" type="text" id="txtAutoComplete" list="TitleList"
onkeydown = "if (event.keyCode == 13)
window.location='display.php?urn=' + this.value"
placeholder="Search dialogue" />
<datalist id="TitleList">
<option value="0001">After Life</option>
<option value="0002">Blazing Saddles</option>
<option value="0003">Million Ways to Die in the West, A</option>
<option value="0004">Inbetweeners, The</option>
</datalist>
</form>
</body>
</html>
The other issue is that when a user selects a title from the Datalist options, the title changes to its value. For example, when you select "After Life", the input displayed in the search field changes to 0001 which is a little confusing for my visitors.
Is there a way of preserving the title but re-directing to the value (in this case display.php?urn=0001) AND is there a way of re-directing to results.php IF the entered value isn't contained within the Datalist?
Sorry if I've made this more confusing than it needs to be but I struggled to describe what I want to achieve here!
Any help anyone could give me would be greatly appreciated.
Is it possible to add the value of a checkbox if checked into a text field?
I have this form...
http://xotio.com/photos/download/turk.html
I'm trying to add the value of a checkbox into a textbox if the checkbox has been clicked.
In my form there is one text box and three checkboxes per image (one of the checkboxes opens up more checkbox options and i'm not concerned about those color choices as much). I'm trying to add the 'value' of the three main checkboxes into the text field above. Is that possible?
the values of the checkboxes i would like are the ' lost' and ' none' and ' blurry' options and add their values to the textbox above if they get checked.
In the end I'm trying to use parsley to validate each of the textboxes for data before it submits my form. There are occasionally instances when no data is entered in the textbox, but the user has checked the right boxes and I want it to validate and can't come up with any ideas except this... any help or ideas would be great. thanks in advance and sorry for the long winded complex question.
I give you an example for your reference:
<html>
<body>
<input type="checkbox" value="lost" onclick="sendValueToTextBox(this)">lost
<br>
<input type="checkbox" value="none" onclick="sendValueToTextBox(this)">none
<br>
<input type="checkbox" value="blurry" onclick="sendValueToTextBox(this)">blurry
<br>
<input type="text" id="fg">
<script language=javascript>
function sendValueToTextBox(checkbox) {
var textbox=document.getElementById("fg");
if (checkbox.checked)
textbox.value=checkbox.value;
else
textbox.value="";
}
</script>
</body>
</html>
How can I add objects that I have already returned from my database to an array on form submit? I am retrieving all of my players from my database like so,
$players = Player::all();
and outputting them like this:
<form>
#foreach($players as $player)
<ul>
<li>
<input type="checkbox" name="{{ $player->id }}">
{{ $player->fn }} {{ $player->ln }}
</li>
</ul>
#endforeach
<input type="submit" value="Submit">
</form>
This is what I consider my "player pool", where all players are loaded and available to be "checked" in. I am simply trying to have two sections on this page, one that has the player pool, and one that shows the selected players from the players pool. When a player is checked in they are added to the "players in game" section below the "player pool", and will be part of a new form that can again be submitted, but to the database instead of the same just to the page. How would I achieve this with JSON and PHP?
To be honest, I'm not sure how you want to use JSON for this, but you probably want to use the player ID as the value for the checkbox rather than the name.
<input type="checkbox" name="player_ids[]" value="{{ $player->id }}">
Then you will have an array of player IDs in $_GET['player_ids'] (or $_POST['player_ids'] if this ends up being a POST form.)
You will want to give you form a class so you can begin building a jQuery function to select the players as a checkboxes within the form become checked.
Say,
<form class="player_form">
</form>
With the form structure you propose in your question, the firstname and lastname (I am assuming) are just echoes next to the box. If you are wanting submit these in a later form you will need to have these as input fields, like your checkbox:
<input type="text" name="player_name" value="{{$player=>fname}}" />
I think you want to move all of the information within a li element if the checkbox within that li is checked. To do this, you can add a listener to the checbox using change. You can also use click but this won't listen on the event where the box is checked by keyboard!
$(document).ready(function(){
$(".player_form :checkbox").change( function() {
var player = $(this).closest("li");
//Now add this point into your new form
$(".my_submit_form").append(player);
)}
});
The closest function will traverse up the dom and find the closest li element and then append this data to your new form.
I would suggest you reconsider your form naming convention. As you have it you will be submitting a unique name with every checkbox, I don't think this is what you mean to say.
<li>
<input type="checkbox" name="player_id[]" value="{{$player->id}}" />
<input type="text" name="player_fname[]" value="{{$player=>fname}}" />
<input type="text" name="player_lname[]" value="{{$player=lname}}" />
</li>
Would be something like what you want, for form handling. Don't forget the names must be submitted as an array (i.e player_id[]) because you will be submitting multiple players within a form!
I have MySQL table templates, which looks like:
template_id|template_subject|template_text
------------------------------------------
1 |some subject |very long text with html
These are displayed in <select> dropdown and complete form looks like:
<form method="post" action="">
<select name="template_id"><option></option><option value="1">some subject</option></select>
<input type="text" name="template_subject">
<textarea name="template_text"></textarea>
<input type="submit" name="submit_me" value="go">
</form>
When user submits form, I need to get all 3 values - id, subject, and text. Furthermore, when user selects an option I need to auto populate <input type="text" name="template_subject"> field with some subject and populate <textarea name="template_text"></textarea> with very long text with html
Found many examples on this site how to populate input field with option text, and textarea with option value, but here's the problem: formatting dropdown as <select name="template_id"><option></option><option value="very long text with html">some subject</option></select> won't work, because template_id value would be missing, and writing very long text with html as option's value would be a very bad practice, I believe.
Looking at example,s I create a JSfiddle which seems to work partially, but once again, I don't think it's a good idea to write a long text (especially with HTML into option's value) - https://jsfiddle.net/ss050535/
How should I proceed? Using jquery, bootstrap and select2 if that matters.
I have a javascript that shows and hides options from a html form. What I am trying to do is be able for the user to add a new category and then write that into the database as an option and add that subject to the option form.
Here is an example of the html code,
<select id="team1" name="team1" style="display:none">
<option value="subcat1">subcat1</option>
<option value="subcat2">subcat2</option>
<option value="subcat3">subcat3</option>
I then want them to be able to add another subcat4 via the website.
the javascript i'm using is an if statement with show and hides from different selects.
The user needs to be able to enter the category name and add it to the relevant select.
Currently im unsure on how to get this to add and save the new subcat4 to the database and to the html.
Any help would be appreciated.
When you first load the page you construct the select element by using the values stored in the database.
Then you can have a form that posts the filled info and stores subcategories into the database. This form may contain the identifier of your select for knowing in which select you are assigning the new option. It could be in a hidden input.
here comes a simple example of that form
<form method='post' action='/your/action/here' >
<input type='hidden' name='main_category' value='team1' />
Subcategory: <input type='text' name='subcategory' value='' />
<input type='submit' name='submit_btn' value='submit' />
</form>
You could also do it without page refresh by using an ajax post (this should be your next step, make it first work the simple way) to store the info and then by appending the option to your select using javascript. Check the jquery append or the appendChild() if you are not using jquery.
With jquery you can do this code to append new child in your select element.
$('#team1').append('<option value="subcat4">subcat4</option>');