I'm implimenting a user registrations form for a college..There I need to calculate the fees and show it to the user and the same time need to insert to a database..
I have used a list box for like this
<select name="subject" id="select2"> ***(value=fees for the subject)
<option value="100">Arts</option>
<option value="150">English</option>
calculation is OK with the values wich are given(I used javascript calculation for that)
Now I want to insert the subject to database
ex:
INSERT INTO user(name, email, subject)
VALUES ('$_POST[name]','$_POST[email]','$_POST[subject]')");
I want to add the subject which selected to be add to database subject field as English not the fees.
I hope you can understand what I'm telling.Please Help
Thank You
Ideally you should use the labels as values like:
<select name="subject">
<option value="Arts">Arts</option>
<option value="English">English</option>
If for any reason you want to post both label and fee you can use hidden variables and JavaScript like:
<select name="subject_fee" id="subject_fee" onchange="populate_subject_name();">
<option value="100">Arts</option>
<option value="150">English</option>
</select>
<input type="hidden" name="subject_name" id="subject_name" value="">
<script type="text/javascript">
function populate_subject_name() {
var f = document.getElementById("subject_fee");
var n = document.getElementById("subject_name");
n.value = f.options[f.selectedIndex].text;
}
</script>
By the way I'd still recommend the first approach. There are other ways to calculate the fee -- just improvise. See this and this for one possibility.
This would require the server-side knowing the text of the SELECT element, as only the selected value is posted back.
It's possible in ASP.NET, as the SELECT element is know server-side. However I'm not sure if this in the case in PHP.
You have to add handle onsubmit event of form and a hidden field to preserve the selected text of list item.
<script type="text/javascript">
function submitIt()
{
var list=document.getElementById("select2");
var item=list.item(list.selectedIndex);
document.getElementById("subjectTest").value=item.text;
return true;
}
</script>
<form method="post" action="your_page.php" onsubmit="return submitIt()">
<input type="hidden" id="subjectTest" name="subjectText" />
<select name="subject" id="select2"> ***(value=fees for the subject)
<option value="100">Arts</option>
<option value="150">English</option>
<input type="submit" name="cmd" value="Submit"/>
</form>
In php, when you populate your list, keep in a map the value=>label mapping and get back the right value like :
$arr = array(100 => "Arts", 150 => "English");
echo $arr[$_POST[subject]]; //if $_POST[subject]==100, return "Arts"
Otherwise, in javascript, you can get it with
var index=document.getElementById("select2").selectedIndex;
document.getElementById("select2").options[index].text;
Then you can store it in an hidden input text...
Warning :
Don't insert directly the values in the sql request !
Be carful with injection SQL
Hope this help you...
Related
I have a combobox which is populated from my database:
<select id="product" name="product">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
I am using the form method post to send the selected value to my database:
$product = $_POST['product'] ;
When I send the data to my database I only get the selected value in my database ('1', '2' or '3').
I also want to send the name of the selected option to my database ('One', 'Two' or 'Three').
Does someone know if it is possible to post the name of the selected value to the database?
It's not a good idea to do that. If you really need the text value in your server side script then you should obtain the text from the DB in the server side script.
If you are loading this combo box from the database and you defined properly your table keys, you shouldn't need to send back the text value of the field.
You need to define a key value for this data and use it for the 'value' of the field. If you don't have a key field in this table and you want to get the text value of the combo then you could use the text as a value in your combo and forget the value you are using now, but this is not recommended
You could use a hidden field, and update that field, on option change with JavaScript.
<input type="hidden" name="numberWritten" id="numberWritten" value="" />
JavaScript:
document.getElementById('product').onchange = function() {
var element = document.getElementById('product');
var otherValueFromOption = element[element.selectedIndex].innerHTML;
document.getElementById('numberWritten').value = otherValueFromOption;
}
You now have a $_POST['numberWritten']. With a value of either One Two or Three
When you use fields inside an HTML form, only the value of the fields gets sent.
My suggestion is that, on the script that receives the POST, you transform whatever you receive, into whatever you want to insert into the database, for instance using a switch statement or some other way of evaluating what was posted.
$value_to_insert = '';
switch($_POST['product']){
case '1':
$value_to_insert = 'One';
break;
case '2':
...
}
Another possibility would be to use the onChange of the select, to set the value of the selected item into a hidden input field, which will also go on the post.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>setvalue</title>
</head>
<body>
<script>
function setValue(sel){
document.getElementById('valueToPost').value = sel.options[sel.selectedIndex].text;
}
</script>
<form action="xpto.php" method="post">
<input type="text" id="valueToPost" name="valueToPost" value="One">
<select onchange="setValue(this)">
<option value="1" selected>One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</form>
</body>
</html>
P.S.: change <input type="text" to <input type="hidden" to hide the field.
You would have to creat a dynamic variable that will changed based on user's selection.
I hope this helps
<?php
$product = $_POST['product'];
$productName;
if(product == 1){
$productName = 'One';
}
if(product == 2){
$productName = 'Two';
}
if(product == 3){
$productName = 'Three';
}
$insert = ("INSERT INTO table (product, productName) VALUES ('$product', '$productName')");
// query SQL to insert data..
//hope this is helpful
?>
There is a very tricky solution for this . If your drop-down is populated from Database , then replace my solution with the variable names. Use the following way :-
<select id="product" name="product">
<option value="One|1">One</option>
<option value="Two|2">Two</option>
<option value="Three|3">Three</option>
</select>
Now explode the $_POST['product'] with '|' at the time of database insert .
I have php search filter page in which i used different fields..One of them is Age of youngest driver field which have 2 values like 21-24 and 25+ ..Basically i only want to keep the selected values in the select box even after search so user know what he searched for ..What happen now when i select 25+ from the field and click on search it goes back to 21-24 . But As page is connected top database so it picks values from database which i enter like the database screenshot below Please check and let me know if it have any solution
<select class="half" id="form_frame" name="" onsubmit="getData(this);"/>
<option id="value1" value="21-24" selected="selected">21-24</option>
<option id="value2" value="25+">25+</option>
</select>
When i slect all values from the field and selct 25+ from driver age field then url is
http://localhost/Vehicle2/?car_type=0&pickup=0&return=0&residence_two=International&driver_age=25%2B&passengers=No.+of+Passengers&search=
http://localhost/Vehicle2/?car_type=0&pickup=0&return=0&residence_two=International&driver_age=21-24&passengers=No.+of+Passengers&search=
I want driverage=21-24 instead of driver_age
Apply onchange event in javascript like as follows if you are using jquery
jQuery(function () {
jQuery("#form_frame").change(function () {
var id = jQuery(this).val();;
location.href = "http://localhost/php-page/option"+id+"="+id
})
})
Simple use change event handler for selectbox
$(document).on('change','#form_frame',function(){
//window.location.href="http://localhost/php-//page/option"+$(this).//val()+"="$(this).val();
console.log("http://localhost/phppage/option"+$(this).val()+"="+$(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="half" id="form_frame" name="">
<option value="10" selected="selected">10</option>
<option value="11">11</option>
</select>
Im working on a small web application that follows a basic MVC pattern. currently i have data being pulled from a database into an array and im echoing out that value into one textbox (for now)
<input type="text" name="txtGasConRes" id="gasConRes" value="<?php echo $typical; ?>" disabled/>
The $typical value is being retrieved from my Model class into my Controller class and then echoed into the textbox for gas. I have a very similar textbox for Electricity.
My dropdown is as follows:
<select name="heatingType" id="heatingType" required>
<option value="" disabled selected>Select Your Option</option>
<option value = "Gas">Gas</option>
<option value = "Electricity">Electricity</option>
<option value = "Other">Other</option>
</select>
I was wondering if theres a way to determine where to echo the $typical value. So for example, If the user selected Gas as their heating type, then once the form was submitted it, the value would appear in the Gas textbox. If the user selected Electricity from the dropdown then the value would be echoed out into the Electricity textbox.
Any information will be appreciated.
Thanks!
This is definitely a job for JavaScript or jQuery if you prefer. You need to setup a handler to detect a change event on the select input. Once the user selects a value, then you can update the text field with text based on what the user has selected.
Not tested but something like this should work.
var select = document.getElementById('heatingType');
function updateTextField(selectedValue) {
switch(selectedValue){
case 'Gas':
return 'some text that you want in the text field';
break;
// etc.
}
}
select.addEventListener('change', function(){
var selectedValue = this.value,
textField = document.getElementById('gasConRes');
textField.value = updateTextField(selectedValue);
});
Create javascript function and put function in select box onchange event.(following code is working)
<script>
function heatingType(obj){
alert(obj.options[obj.selectedIndex].value); //if you want to show in alart
//or put in a variable
$x=obj.options[obj.selectedIndex].value;
}
</script>
<select name="heatingType" id="heatingType" onChange="heatingType(this)" required>
<option value="" disabled selected>Select Your Option</option>
<option value = "Gas">Gas</option>
<option value = "Electricity">Electricity</option>
<option value = "Other">Other</option>
</select>
I'm trying to create a drop-down list with four options such that if I select the 4th option, I want a text box created so that I can get the value typed in that box using "$_GET"
Something like this;
<select name="value">
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
<!-- And a 4th one -->
</select>
And if the 4th one is selected, a box should appear like this;
<input type="text" name="firstname">
Edit;
My current code;
<script>
jQuery(function($){ //calling the code inside braces when document loads and passing jQuery object as '$' parameter;
$("select[name='sortby']").change(function(){ //binding an event that fires every time select value changes
var select = $(this); //caching select, which value was changed
if(select.val() === "byDefindex"){ //checking if we selected the right option
$("<input>").attr({type: "text", name: "defindex"}).appendTo(select.parent()); //creating new input element object, setting its value to "value4" and appending to select parent element or wherever you want it
}
});
});
</script>
<form action="<?php $_PHP_SELF ?>" method="GET">
Select:
<br />
<select name="sortby">
<option value="playHours">Play Hours</option>
<option value="lastLogin">Last Login</option>
<option value="byDefindex">By Defindex</option>
</select>
<br />
<input type="submit" />
</form>
If your 4th option is this:
<option value="value4">Option 4</option>
You can use jQuery to display the field.
Put your field in a <div>
<div id="field"><input type="text" name="firstname"></div>
Now,
<script type="text/javascript">
$(document).ready(function(){
$('input[name="value"]').change(function(){
var v = $('input[name="value"]').val();
if(v=="value4") $('#field').show();
else $('#field').hide();
})
})
This is usually done via javascript; something like this (by using popular JavaScript library, jQuery) :
jQuery(function($){ //calling the code inside braces when document loads and passing jQuery object as '$' parameter;
$("select[name='value']").change(function(){ //binding an event that fires every time select value changes
var select = $(this); //caching select, which value was changed
if(select.val() === "value4"){ //checking if we selected the right option
$("<input>").attr({type: "text", name: "firstname"}).appendTo(select.parent()); //creating new input element object, setting its value to "value4" and appending to select parent element or wherever you want it
}
});
});
Hope that helps. You can find more here jQuery site
I'm not certain this is what you're asking, but it seems you're wanting to add new lines to your select list?
I often do something similar to this for adding new options to lists. The first option would be 'add a new record', like this:
<select name="value">
<option value="-1">Add New Option</option>
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
</select>
Note that the value for "add new" is -1... you could put anything here, but it should be something that would never show up in the other options, so your javascript knows what to do when it is selected.
Add a 'onchange' to the select box like this:
<select name="value" onchange="if(this.value == -1) addOption(this);">
Note that if the selected option is -1, then a javascript function is called. It references itself (this), so that your function knows who called it.
Then create a function that allows adding a new option:
function addOption(theSelectElement){
// create a text box, underneath the select box:
var newInput=document.createElement('input');
newInput.type='text';
theSelectElement.parentNode.insertAfter(newInput,theSelectElement);
}
You'll want to add more code to this function so that the new text field has a name and perhaps an ID.
Hope this helps, or at least points you in the right direction.
i have a dropdown menu generated by my php when the page loads filling with my rows in the sql table, being the table ID(Value) and they NAME.
<select>
<option value="0"></option>
<option value=6>Alientech</option>
<option value=2>FNAC</option>
<option value=5>Logitech</option>
<option value=1>MHR</option>
</select>
Then i have:
<input type="text" name="editname">
<input type="text" name="editmail">
<input type="text" name="editwebsite">
<input type="text" name="editphone">
<input type="text" name="editfax">
<input type="text" name="editadress">
<input type="text" name="editincharge">
What i want to do is on selecting the option above he gets the id of the row in mysql and fills the inputs accordingly to the values in the SQL table so a person can edit the values on submitting the form.
How can i with jQuery do this?
Where is your code attempt?
The way to do this is on select of the jquery
you would take the value of the select where
<select id="some_id">
also you will need to ID all your fields of input.
Your PHP script should return a JSON where your on success you parse the JSON and set it to the value of your INPUT field via ID.
$.ajax({
url: some_php_mysql.php
type:post,
data: {some_id:$('#some_id').val()},
success:function(data){
//json object returned - parse and then ID each value
});
First, you could reload the page :
<form action="" method="post" id="myform">
<select name="myselect">
<option value="0" disabled="disabled"></option>
<option value=6>Alientech</option>
<option value=2>FNAC</option>
<option value=5>Logitech</option>
<option value=1>MHR</option>
</select>
</form>
With a little bit of jQuery...
$("form#myform select").change(function(){
$("form#myform").submit(); // Submit the form if the value is changed.
});
And when you load your page, if you find a value for $_POST["myselect"] then you have to load something in the fields (except if it's 0).
You could also do things asynchronously with Ajax (instead of submitting the form, send a HTTP request and parses the result to fill the form). However, if the purpose of your page is only to edit an entry, the you should use the above method.
Ajax reference : http://www.w3schools.com/ajax/