I would like to be able to dynamically add rows to a form (I have now included the form below) using a drop down menu. I presume this would be a javascript function, but I'm not sure.
My idea is that all that would show on the page initially is a drop down menu which defaults to '1', and one row of the form with a few fields, such as name, email, age, etc. The user is asked to select a number from the drop down menu, and then whatever number is selected, rows will be added to the form to match this number.
As an (important) aside, once the form has been completed I want to be able to submit the information in the form via email using PHP, and I wonder whether each input field would need to have a unique ID to pass to the PHP page that generates the email. I mention this in case it needs to be taken into consideration in the method that is used to add rows to the table.
I'd be grateful for any help in getting going with this.
Thanks,
Nick
Form:
<form id="myForm" method="POST">
<label>Please select the number of people you are booking for:</label>
<select id="myDropDown">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select><br/><br />
<label>name:</label> <input type="text" name="name" id="name">
<label>email:</label> <input type="text" name="email" id="email">
</form>
I would like to be able to dynamically
add rows to a form using a drop down
menu. I presume this would be a
javascript function, but I'm not sure.
Yes, it would be easiest to do it in JavaScript. Pick a good toolkit like jQuery for helping you navigate and modify the DOM. Here's a simple skeleton:
$(function() {
var myForm = $("#myForm");
$("#myDropDown").select(function() {
var selected = $("option:selected", this).val();
$("<input/>")
.attr("type", "text")
.attr("name", selected)
.attr("id", selected)
.appendTo( myForm );
});
});
I think forms need unique names for post not id.
loop over the number selected, foreach one do this.
var newInput = document.createElement("input");
newInput.Name = "Unique name to form"
newInput.Type = "text" // or whatever
document.getElementById("formId").appendChild(newInput);
note that it could be done easier with jQuery possibly but this will work with the built in js function.
Related
I have to multiple <select> fields. The first is containing all datasets of list of articles in a table. The second select will be another list of selected articles.
I am using jQuery to pass articles from one select to the other. That works as expected.
The problem is, that if I submit the form, no values are shown in the $_POST. I cannot figure it out. I tried in on a small scale with phpFiddle and the HTML works. So I don't know, it seems that passing the <option> via jQuery is the problem.
It works if I put <option> fields in the #target without jQuery.
Interestingly even the first select, which <options> are created via PHP on base of a query, does not show up in the $_POST either. So I read about this term on different sites. But the suggested method using an array as a name (as I do) does not work.
<form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
<select name="src[]" id="src" multiple>
<option value="1">a</option>
<option value="2">b</option>
</select>
INSERTED VALUES VIA JQUERY
<select name="target[]" id="target" multiple>
<option value="1">a</option>
</select>
<input type="submit" value="test">
</form>
<?php
if(isset($_POST)){
print_r($_POST);
}
?>
<script>
$( document ).ready(function() {
$('#src').on('click', function() {
var options = $('select#src option:selected').clone();
$('select#target').append(options);
$('select#src option:selected').remove();
});
});
</script>
The values where not shown in the $_POST because I have to select the new fields in the 2nd multiple . Of course, if I do not select an option, it does not show up.
I have two pages lets say first.php, second.php.
first.php:
<form name=register method="post" action="second.php">
Name:<input type="text" name="username" value=<?=$username?> >
Email:<input type="email" name="email" value=<?=$email?> >
Hobbies:<select name="hobbies" id="hobbies" disabled>
<option value="cricket">cricket</option>
<option value="football">football</option>
</select>
</form>
second.php:
<?
print_r($_POST);
I am getting only name and email and not select value.
If I print the post value I am not getting the select value, but when I am removing the disabled in select, I am getting the select value in hidden.
In this scenario, I don't want the user to select the select box and when I submit the form, I should get the value in hidden in second.php.
I have tried many possible ways, to no avail.
Can anybody suggest me how can I achieve this.
Disabled tags can't be send to POST. Change disabled to readonly or hidden
You cant post a disabled field. Maybe you can disable the selectbox right before you post it or you could (like the comments tell you) get a hidden value to be posted that has the standard value you want. If the select box is able to be posted(so not disabled) you can overwrite the hidden value with the select value.
You can do this by Jquery before the form is submitted.
<script>
$(document).ready(function () {
$('#register').submit(function() {
$('select').removeAttr('disabled');
});
});
</script>
In
second.php
you have to create a validation to check that user can be registered or no.
if($this->user->can_register()){
$this->user->save($_POST['hobbies']);
}
Because if only with html or js exception is not enough to handle that case. Some users can just inspect element and remove the disabled element.
Is there any possibility to have a drop-down-menu where you can add an own value by typing it directly into the drop-down-field?
The Idea is to have all rows in a database to be listet in this drop-down-menu and to have the posibility to add a new row.
The php-File for saving all the Data is allready working.
Rightnow my code for the drop-down-menu looks like this:
<select id="name" name="name" onChange="enableOther();" onFocus="enableOther()">
<option> </option>
<option>Neu</option>
<?php
while($row = mysql_fetch_object($ergebnis))
{
echo('<option>'.$row->Material.'</option>');
}
?>
</select>
i hope there is any solution for my problem...
This isn't supported natively in HTML, but there are many JavaScript UI toolkits that provide an editable combo box widget, or you could try coding one in JS yourself (essentially, using a text input with a custom-coded drop-down list).
Alternatively, a simple approach would be something like this:
<select name="name" ...>
<option value=''>Custom (use text field)</option>
... etc ...
</select>
<input type='text' name='customName'>
Then at the server side, if the submitted value of name is a blank string, but the submitted value of customName is not, use customName. You could also add JavaScript to enable/disable the customName field when the user changes the select box as appropriate.
Edit: HTML5
Incidentally, this is possible in HTML5, but that, of course, is not supported by all browsers:
<input list="suggestedNames" name="name">
<datalist id="suggestedNames">
<option value="...">
...
</datalist>
This question already has answers here:
Get Text From <option> Tag Using PHP
(6 answers)
Closed 8 years ago.
in the following:
<form action="test.php" method="POST">
<select id="test" name="test">
<option value="1">Test One</option>
<option value="2">Test Two</option>
</select>
</form>
in test.php, I can get 1 or 2 as follow:
$result=$_POST['test'];
How can I get the text of the selected option (i.e. "Test One" or "Test Two") using php
This is not something that can be done through PHP alone. The PHP script can only "see" the information which is posted (the value for the selected option that is posted). You can use javascript to alter a hidden input field with the text contents of a selected option, and this will be included in the $_POST array:
<form action="test.php" method="POST">
<select id="test" onchange="document.getElementById('text_content').value=this.options[this.selectedIndex].text">
<option value="1">Test One</option>
<option value="2">Test Two</option>
</select>
<input type="hidden" name="test_text" id="text_content" value="" />
</form>
This will make the $_POST['test_text'] available with the selected index (but you should also force the onchange() function when the page loads so that it will be populated even if the user leaves the select field at the default value.
Only the value of the form control will be sent to the server. An easy way to send both is to simply include both in the the value:
<select name="test">
<option value="1|Test one">Test one</option>
<option value="2|Test two">Test two</option>
</select>
And then:
$test = explode('|', $_POST['test']);
Then you'll end up with $test[0] being "1" and $test[1] being "Test one".
You can't; that information is not sent back to the server. You will need to look at how you generated the HTML in the first place and get the text from there.
It is not sent so the only way to get it is having an array mapping values to titles in your PHP code.
This is a solution I could use except I already have the onChange calling a function to show a hidden block based on the selected building type in a statement.
I have building types I need the user to select. Several building types have a unique set of questions, e.g. Bank Branch, Data Center, Courtroom, etc. But there are many that have the same set of questions which I call Other Type. Each option has their associated value, e.g. Bank Branch has a value of "Bank_Branch", Data Center has "Data_Center", but Other Type has a value of "Other_Type". The text for "Other_Type" differs based on the building type, such as Convention Center, Museum, Performing Arts, etc. So I need the value "Other_Type" to "show" the questions in the "Other_Type" DIV block while using the text value to send in an email identifying the type of building, e.g. Convention Center, Museum, Performing Arts, etc.
Any way to use PHP to get the text value of the selected item? I'm already using the following inside the HTML
var sele = document.getElementById('building_type');
var seleVal = sele.options[sele.selectedIndex].value;
var seleTxt = sele.options[sele.selectedIndex].text;
document.getElementById("other_text").innerHTML = seleTxt;
I'm not seeing a way to do this.
SOLVED: I can simply create the hidden div and in my check for Other Type set the innerHTML for the hidden div.
The text for the selected option is not passed through the HTML form. If you want the text, you have to store that in a hidden HTML input on your page, or you need to add some business logic in your PHP code to translate the value of ìd into the text (through a switch statement, or by querying a database, etc.)
Unfortunately when you submit a form and a variable it only takes one parameter which is it's value. You would need to make the value. Test One the value in order for it to pass on to the PHP script. What is the purpose of value="1" cause you can probably use it in a different attribute?
Im not a experienced php programer, but u can check the value selected in SELECT tag with php.
i dont know why people say u can not.
if ( $_POST['test'] == 1)
{ do something }
else
{ option value 2 is selected, do something else }
Im sure this will work.
Try it if 1, 2 not needed. you will get required text as value
<form action="test.php" method="POST">
<select id="test" name="test">
<option value="Test One">Test One</option>
<option value="Test Two">Test Two</option>
</select>
</form>
I've been looking around on SO and I don't -think- this is something that's up here, either that or it's something I've missed. If so, please point me there and I'll simply mark this question as answered.
I have a completely working PHP form where my users input information into input boxes and there's a button at the bottom that submits the information to the MySQL database, so that part works perfectly. What I'm trying to do now is this: have 2 drop down menu's, each one with a static list of choices and I'd like those choices to also get sent to the database.
For instance, currently in my form I have First Name (frame) and Last Name (lname) that the user can input and then if I query the database it spits out First Name and Last Name perfectly. So now I'd like to add to my form a drop down box where the user can pick, for example, Boy or Girl, and then after doing that click the submit button that's already there (I don't want the drop-down to submit the data, and I don't want the drop-down to be populated from the database.)
I'm guessing I need to use Javascript for this part? But I really don't know.
Any advice would be appreciated.
<html>
<head>
<title>MyForm</title>
</head>
<body>
<form id="form" name="form" action="" method="post">
<Label>First Name/Organization</label>
<input type="text" name="firstname" value="<?php echo $firstname; ?>"/>
<input type="submit" name="submit" value="Add entry">
</form>
</body>
</html>
So, as part of the same form, you simply treat it just like the input boxes. Here's an example:
If the dropdown is named:
<select name="gender">
<option value="boy">Boy</option>
<option value="girl">Girl</option>
</select>
Then in your php, you would simply get the value for gender:
$gender = $_POST["gender"];
And add to your SQL statement where you are saving the first/last name the additional field and value for gender.
Of course, you would have to first modify the table to have the column for gender....
Hope that helps!
It sound s like you just want a simple html drop down as part if your form. Just use
<select name = 'gender'>
<option value = 'boy'> Boy </option>
< option value = 'girl'> Girl </option>
</select>
Then access $_POST['gender'] in the receiving script to put it into the database (after validation of course)