I have a select field and i am using my option value as a variable for some further work but i would like to create a second variable for the name of my option to use elsewhere.
This is my form
<form action="second.php" method="post" class="form">
Client:<select class="default" id="client" name="client" required>
<option value="" selected>Select Client</option>
<option value="clienta" name"Client A">Client A</option>
<option value="clientb" name "Client B">Client B</option>
</select>
</form>
In my second.php file i am getting the value for client like this:
$client = $_POST["client"];
Im not sure how to get the name for client instead of value.
i have tried:
$client_name = $_POST["client.name"];
$client_name = $_POST["client[name]"];
$client_name = $_POST["client(name)"];
But none of these work, they all come back blank when i want to return the name of the option e.g.
"Client A" instead of "clienta"
Does anyone know how i could get to the name field instead of the value from my select?
If you Need Both value and Name. the best way to archive is by combining them in value
<?php
if (isset($_POST['client']))
{
$pair = explode("/", $_POST["client"]);
$name = $pair[0];
$value = $pair[1];
print "Key: $name<br />";
print "Value: $value<br />";
}
?>
<form method="post" action="" name="form">
<select name="client">
<option value="clienta/Client A">Client A</option>
<option value="clientb/Client B">Client B</option>
</select>
<input name="submit" type="submit">
</form>
You don't need add attribute name <option> element:
<form action="second.php" method="post" class="form">
Client:<select multiple="multiple" class="default" id="client" name="client[]" required>
<option value="" selected>Select Client</option>
<option value="ClientA">Client A</option>
<option value="ClientB">Client B</option>
</select>
</form>
In php:
$clients = $_POST['client']; // will be array with selected options
Use Like Below Code
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-horizontal" action="#">
<div class="form-group">
<label class="control-label col-sm-2" for="client">Client:</label>
<div class="col-sm-6">
<select class="form-control" id="client" name="client" required>
<option value="" selected>Select Client</option>
<option value="clienta" name="Client A">Client A</option>
<option value="clientb" name="Client B">Client B</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="button" class="btn btn-default" id="submit_btn" name="submit_btn" value="Submit">
</div>
</div>
</form>
</body>
</html>
<script>
$('#submit_btn').on('click', function(){
var option_value = $('#client').val();
var option_name = $('#client').find('option:selected').attr('name');
$.ajax({
type:"post",
url:"second.php",
data:"option_value="+option_value+"&option_name="+option_name,
success: function(data){
console.log(data);
}
});
});
</script>
second.php
<?php
echo $option_value = $_POST['option_value'];
echo $option_name = $_POST['option_name'];
?>
<form action="second.php" method="post" class="form">
Client:<select class="default" id="client" data-name="client" required>
<option value="" selected>Select Client</option>
<option value="clienta" data-name="Client A">Client A</option>
<option value="clientb" data-name="Client B">Client B</option>
<input type="button" id ="button" value="send">
$(document).ready(function(){
$('#button').click(function(){
$.ajax({
type: 'POST',
url: 'second.php',
data: {'clinet_val':$('#client').val(),'clinet_name':$('#client').find(':selected').data('name')},
success:function(response)
{
console.log(response);
}
});
});
});
Related
So I'm trying to get the values of this form by using ajax and PHP but for some reason I'm not getting it the way I want to get it. I have tried many ways but its not working.
HTML
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="array.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<form id="form" method="POST" action="array.php">
<div class="form-row">
<div class="form-group col-md-3">
<label for="Date">My Birthday is</label>
<input type="date" name="Date" class="form-control" id="Date" placeholder="MM/DD/YY">
</div>
<div class="form-group col-md-3">
<label for="myName">My Name is</label>
<input type="text" class="form-control" name="myName" id="myName" placeholder="My Name">
</div>
<div class="form-group col-md-3">
<label for="favColor">My Favorite Color is</label>
<select name="favColor" class="form-control" id="favColor">
<option selected>Choose</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
<option value="Yellow">Yellow</option>
<option value="Orange">Orange</option>
<option value="Pink">Pink</option>
<option value="Black">Black</option>
</select>
</div>
<div class="form-group col-md-3">
<label for="mySign">My Sign</label>
<select name="mySign" class="form-control" id="mySign">
<option selected>Choose</option>
<option value="Aries">Aries</option>
<option value="Taurus">Taurus</option>
<option value="Gemini">Gemini</option>
<option value="Cancer">Cancer</option>
<option value="Virgo">Virgo</option>
<option value="Libra">Libra</option>
<option value="Scorpio">Scorpio</option>
<option value="Sagittarius">Sagittarius</option>
<option value="Capricorn">Capricorn</option>
<option value="Aquarius">Aquarius</option>
<option value="Pisces">Pisces</option>
</select>
</div>
<button type="submit" class="btn btn-primary text-right">Submit</button>
</div>
</form>
<div id="test"></div>
ajax
<script type="text/javascript">
$(document).ready(function(){
$('#form').on('submit', function (e){
e.preventDefault();
var formData = $(this).serialize();
$.ajax({
type: "POST",
url: 'array.php',
data: {formData: formData},
success: function(data){
$('#test').append(data);
}
})
});
});
PHP
$formData = array($_POST["formData"]);
foreach($formData as $d => $d_value){
echo "Key = " . $d . ", Value = " . $d_value;
}
What it echo's out
Key = 0, Value = Date=2019-11-16&myName=Marco&favColor=Green&mySign=Cancer
So what I'm trying to get it to echo out is:
Key = 0 , Value = Date=2019, 11, 26
Key = 1 , Value = myName=Marco
Key = 2 , Value = favColor=Green
Key = 3 , Value = mySign=Cancer
So does anyone have any suggestions or clues on how I can fix this because I've tried other things but it still does not echo it the way I want it to.
If you replace
data: {formData: formData},
in your $.ajax call with
data: formData,
Then in your PHP script you will have each of the values separately in $_POST i.e.
$_POST['Date'] = '2019, 11, 26';
$_POST['myName'] = 'Marco';
$_POST['favColor'] = 'Green';
$_POST['mySign'] = 'Cancer';
I am trying to make a dropdown list and take three parameters from the user which will be stored in a php file for later use. My current code is :
<body>
<header>
<form action="parameter.php" method="post">
<label class="heading">First</label>
<select name="First">
<option value="First-1">First-1</option>
<option value="First-2">First-2</option>
</select>
<input type="submit">
</form>
<form action="parameter.php" method="post">
<label class="heading">Second</label>
<select name="Second">
<option value="Second-1">Second-1</option>
<option value="Second-2">Second-2</option>
</select>
<input type="submit">
</form>
<form action="parameter.php" method="post">
<label class="heading">Third</label>
<select name="Third">
<option value="Third-1">Third-1</option>
<option value="Third-2">Third-2</option>
<input type="submit">
</select>
</form>
</header>
</body>
Here, the problem is, I don't want submit button for each parameter, instead there should be only one button for all the parameters. I have tried several things but none is working.
My php file
<?php
echo $_POST['First'];
echo $_POST['Second'];
echo $_POST['Third'];
?>
Where am I going wrong?
EDIT : Corrected the php code
Just wrap all your selects under one form instead of 3 different forms.
Make sure that the input submit is not inside the select tag.
Also, note that your php code is trying to echo parameters that don't exist in the html you shared. The name of your select will be the parameter name.
<form action="parameter.php" method="post">
<label class="heading">First</label>
<select name="First" >
<option value="First-1">First-1</option>
<option value="First-2">First-2</option>
</select>
<label class="heading">Second</label>
<select name="Second" >
<option value="Second-1">Second-1</option>
<option value="Second-2">Second-2</option>
</select>
<label class="heading">Third</label>
<select name="Third" >
<option value="Third-1">Third-1</option>
<option value="Third-2">Third-2</option>
</select>
<input type="submit">
</form>
PHP
<?php
echo $_POST['First'];
echo $_POST['Second'];
echo $_POST['Third'];
?>
you can add all there in one form
<form action="parameter.php" method="post">
<label class="heading">First</label>
<select name="First" >
<option value="First-1">First-1</option>
<option value="First-2">First-2</option>
</select>
<label class="heading">Second</label>
<select name="Second" >
<option value="Second-1">Second-1</option>
<option value="Second-2">Second-2</option>
</select>
<label class="heading">Third</label>
<select name="Third" >
<option value="Third-1">Third-1</option>
<option value="Third-2">Third-2</option>
<input type="submit">
</select>
<input type="submit" name="submit" value="submit">
</form>
in your code you have missed button "name".
parameter.php code should be this.
if(isset($_POST['submit'])){
echo $First = $_POST['First'];
echo $Second = $_POST['Second'];
echo $Third = $_POST['Third'];
}
<form action="parameter.php" method="post" id="frm">
<label class="heading">First</label>
<select name="First" >
<option value="First-1">First-1</option>
<option value="First-2">First-2</option>
</select>
<label class="heading">Second</label>
<select name="Second" >
<option value="Second-1">Second-1</option>
<option value="Second-2">Second-2</option>
</select>
<label class="heading">Third</label>
<select name="Third" >
<option value="Third-1">Third-1</option>
<option value="Third-2">Third-2</option>
</select>
<input type="submit">
</form>
JQuery AJAX
<script>
$('#frm').on('submit', function(e){
e.preventDefault();
$.ajax({
url : $(this).attr('action'),
type: "POST",
dataType: "json",
data : $(this).serialize(),
success: function(data)
{
console.log(data)
}
});
});
</script>
PHP
<?php
echo $_POST['First'];
echo $_POST['Second'];
echo $_POST['Third'];
?>
What I want is every time I have change the value from combobox (value from combobox is from database ) the input type will change too
here
<div class="col-md-12" >
<label>Charge</label>
<select id="name" name="name" class="form-control">
<?php
while ($reserve=mysqli_fetch_array($charge)) { ?>
<option value=" <?php echo $reserve['name']?>">
<?php echo $reserve['name']; ?>
</option><?php } ?>
</select>
</div>
<div class="col-md-12">
<br>
<label>Price</label>
<input type="number" class="form-control" id="Price" name="Price" disabled>
</div>
on database the name has a corresonding price for example chair has 200 price
what I want is every time I changed the combobox the value at inputtype will change too
I am not sure why you use ajax if you want to show option value . please check this code .
$('#name').change(function () {
var option_value = $(this).val();
$('#Price').val(option_value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="name" name="name">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div class="col-md-12">
<br>
<label>Price</label>
<input type="number" class="form-control" id="Price" name="Price" disabled>
</div>
</form>
so update select code using your this code
<select id="name" name="name" class="form-control">
<?php
while ($reserve=mysqli_fetch_array($charge)) { ?>
<option value=" <?php echo $reserve['name']?>">
<?php echo $reserve['name']; ?>
</option><?php } ?>
</select>
You need to add Jquery code to accomplish this task.
Your Html :
<div class="col-md-12" >
<label>Charge</label>
<select id="name" name="name" id="name" class="form-control">
<?php while ($reserve=mysqli_fetch_array($charge)) { ?>
<option value=" <?php echo $reserve['name']?>">
<?php echo $reserve['name']; ?>
</option><?php } ?>
</select>
</div>
<div class="col-md-12"><br>
<label>Price</label>
<input type="number" class="form-control" id="Price" name="Price" disabled>
</div>
Jquery Code :
$( document ).ready(function() {
$("#name").change(function () {
var value = this.value;
$('#Price').val(value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select id="name" name="name" class="form-control" onchange="callAjax(this)">
<?php
while ($reserve=mysqli_fetch_array($charge)) { ?>
<option value=" <?php echo $reserve['name']?>">
<?php echo $reserve['name']; ?>
</option><?php } ?>
</select>
<script>
function callAjax(val){
var selectedVal = val.value;
alert(selectedVal+" "+val)
$.ajax({
url: "<some_Url>", // Use PHP url from where you can get Data from Database
data: selectedVal,
success: function(result){
$("#Price").val(result);
}});
}
</script>
i have a problem in dependent dropdown and i am not professional in this issue
so the problem is when i choose the first one the another one doesnt get any value from database and i didnt know the solution
<?php
include 'header.php';
require 'connection.php';
?>
<div class="container">
<form id="contact" action="add_line.php" method="post">
<center> <h3>Add Line</h3></center>
<fieldset>
<?php
require 'connection.php';
$query = "select * from agents";
$result = mysqli_query($conn,$query);
?>
<div class="select">
<select class="agents-name " name="agents-name" autofocus tabindex="1">
<option selected="selected">--Select agent--</option>
<?php while ($row = mysqli_fetch_assoc($result)): ?>
<option value="<?php $row['id'];?>"><?php echo $row['name'];?></option>
<?php endwhile;?>
</select>
</div>
<div class="select" >
<select tabindex="1" name="sp_choosen" class="sp_choosen"
onChange="getState( this.value );" tabindex="2">
<option selected="selected">--Select service provider--</option>
<option value="CELLCOM">CELLCOM</option>
<option value="HoTMobile">HoTMobile</option>
<option value="Orange">Orange</option>
<option value="Pelphone">Pelphone</option>
<option value="Golan">Golan</option>
<option value="019">019</option>
</select>
</div>
<div class="select">
<select id="packet_select" name="packet_chossen" tabindex="3">
<option selected="selected">--Select packet--</option>
</select>
</div>
</fieldset>
<fieldset>
<input placeholder="customer name" type="text" tabindex="4"
name="customer_name" required >
</fieldset>
<fieldset>
<input placeholder="SIM_SERIAL" type="tel" tabindex="5" name="sim_serial"
required >
</fieldset>
<fieldset>
<input placeholder="phone_number" type="tel" tabindex="6" name="number"
required >
</fieldset>
<fieldset>
<label></label>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" tabindex="7" >Add
Available line</button>
</fieldset>
</form>
</div>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
function getState(val) {
$.ajax({
type: "POST",
url: "dropdown_add_line.php",
data:'sp='+val,
success: function(data){
$("#packet_select").html(data);
}
});
}
</script>
<?php
include 'footer.php';
?>
and this is the dropdown_add_line.php :
<?php
require_once("connectione.php");
$db_handle = new DBController();
if(!empty($_POST["sp"])) {
$sp=$_POST['sp'];
$query ="SELECT * FROM packets p WHERE sp LIKE '%$sp%'";
$results = $db_handle->runQuery($query);
?>
<option value="">--Select service provider--</option>
<?php
foreach($results as $packets) {
?>
<option value= "<?php echo $packets["id"]; ?>" ><?php echo $packets["packet"]; ?></option>
<?php
}
}
?>
and the table name is "packets" and the columns is "id","sp","packet"
I am trying to not have a submit button, is there any way that the form can submit when the user selects a value?
<form method="post" action="<?php echo $_SERVER['PHP_SELF'] ?>" >
<table class="form">
<select name="category" class="formfield" id="category">
<option value="-1"> Category </option>
<?php
$sql_contry = "SELECT * FROM category";
$rs_c = mysql_query($sql_contry);
while ($row_c = mysql_fetch_array($rs_c)) {
echo '<option value="'.$row_c['category'].'">'.$row_c['category'].'</option>';
}
?>
</select>
</table>
</form>
Here an example
<form>
<select name='myfield' onchange='this.form.submit()'>
<option selected>Milk</option>
<option>Coffee</option>
<option>Tea</option>
</select>
<noscript><input type="submit" value="Submit"></noscript>
</form>
Using noscript tag it allows browsers that are not JavaScript-enabled to still function.
Yes - use javascript:
Html:
<form id="frm">
<select onchange="onSelectChange();">
<option>1</option>
<option>1</option>
<select>
</form>
js:
function onSelectChange(){
document.getElementById('frm').submit();
}
<form action="product.php" method="POST">
<select onchange="this.form.submit();" name="prod">
<option value="">Select product</option>
<option value="1">abc</option>
<option value="2">def</option>
<option value="3">ghi</option>
<option value="4">jkl</option>
<option value="5">mno</option>
</select>
Just change code as below, I haven't check code so there may be some error like capital/small letter I am not sure like, it's submit() or Submit() and so on..
<script language="javascript">
function submitForm(){
var val = document.myform.category.value;
if(val!=-1){
document.myform.submit();
}
}
</script>
<form method="post" name="myform" action="<?php echo $_SERVER['PHP_SELF'] ?>" >
<table class="form">
<select name="category" class="formfield" id="category" onchange="submitForm();">
<option value="-1"> Category </option>
<?php
$sql_contry = "SELECT * FROM category";
$rs_c = mysql_query($sql_contry);
while ($row_c = mysql_fetch_array($rs_c)) {
echo '<option value="'.$row_c['category'].'">'.$row_c['category'].'</option>';
}
?>
</select>
</table>
</form>