I Edited
I have a html
<select name="action-grid">
<option selected > Select</option>
<option value="1" >Edit</option>
</select>
<select name="action-grid">
<option selected > Select</option>
<option value="2" >Edit</option>
</select>
<?php $_product = $this->getProductBy($values);?>
<div><?php echo $_product->getName();?></div>
in code php. i have function getProductBy($value){....}. in view i have grid product, in column action i want when chose option edit value will set variable $value.
Html code, (Assuming Jquery included)
<script type="text/javascript">
function getNewFunction(val) {
$.ajax({
url: "./myPhp.php",
method: 'POST',
data: {
'value': val
},
success: function(res) {
console.log(res);
}
});
}
</script>
<select onchange="getNewFunction(this.value)" name="action-grid">
<option selected > Select</option>
<option value="1" >First</option>
</select>
myPhp.php
<?php
echo $_POST['value'];
?>
As per you mentioned in comments
Your script
<script type="text/javascript">
function getNewFunction(gridValue){
$.ajax({
type: 'POST',
url : 'some_file.php',
data: {value: gridValue},
success: function(response) {}
})
}
</script>
in some_file.php file
<?php
$value = $_POST['value'];
//your funtion here
function getProductEdit($value)
{
.....
}
?>
<select onchange="getNewFunction($('option:selected', this))" name="action-grid">
<option selected>Select</option>
<option value="2">Second</option>
</select>
<script type="text/javascript">
function getNewFunction(value) {
alert(value.text());
}
</script>
try this way
demo
Related
I'm new beginner in the php, html, css and working on a projekt(for my self).
I got a form with dependent dropdown box, but i'm not allow to assign multiple classes, because it making conflict with my javascript.
I would like to use the same class to keep my form similar.
What i can do?
if i choose to use multiple classes and then my javascript wouldn't work currecly.
I got to dropdown box called "category" and "task_type" and i would like to use "form-control" class to keep my form similar
in the javascript, i'm not allow to use form-control to times.
source code: https://www.allphptricks.com/dynamic-dependent-select-box-using-jquery-and-ajax/
Category: <select name="category" class="form-control" required>
<option value="0">Select Category</option>
<?php
include('dbconnect.php');
$sql = mysqli_query($DBcon,"SELECT * FROM category");
while($row=mysqli_fetch_array($sql))
{
echo '<option value="'.$row['category_id'].'">'.$row['category_name'].'</option>';
} ?>
</select>
<br/><br/>
Task Type:<select name="task_type" class="form-control" required>
<option>Select Task Type</option>
</select>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function()
{
$(".form-control").change(function()
{
var category_id=$(this).val();
var post_id = 'id='+ category_id;
$.ajax
({
type: "POST",
url: "ajax.php",
data: post_id,
cache: false,
success: function(cities)
{
$(".form-control").html(cities);
}
});
});
});
</script>
You can't use the form-control class for this, because you don't want the same action for both dropdowns. Give them IDs to distinguish them, and use the IDs in your selectors.
Category: <select id="category" name="category" class="form-control" required>
<option value="0">Select Category</option>
<?php
include('dbconnect.php');
$sql = mysqli_query($DBcon,"SELECT * FROM category");
while($row=mysqli_fetch_array($sql))
{
echo '<option value="'.$row['category_id'].'">'.$row['category_name'].'</option>';
} ?>
</select>
<br/><br/>
Task Type:<select id="task_type" name="task_type" class="form-control" required>
<option>Select Task Type</option>
</select>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function()
{
$("#category").change(function()
{
var category_id=$(this).val();
var post_id = 'id='+ category_id;
$.ajax
({
type: "POST",
url: "ajax.php",
data: post_id,
cache: false,
success: function(cities)
{
$("#task_type").html(cities);
}
});
});
});
</script>
This function only works for the first selection,for example, if I choose id_rayon = 1 (is the first order of the data in the table), I can choose id_gardu based id_penyulang on id_rayon = 1, but if I choose another id_rayon id_gardu selection does not appear
<div class="w3-half">
<label>Penyulang</label>
<select class="w3-select w3-border" name="id_penyulang" onchange="pilih_penyulang(this.value);">
<option value="" disabled selected>Choose your option</option>
<?php
$id_rayon=$row['id_rayon'];
$vendor=$mysqli->query("SELECT * FROM `penyulang` where id_rayon=$id_rayon");
while($row_vendor=$vendor->fetch_array())
{
?>
<option value="<?php echo $row_vendor['id_penyulang'];?>"><?php echo $row_vendor['nama_penyulang'];?></option>
<?php
}
?>
</select>
/this only displays the first id and doesn't loop even though it is in the php while loop
<script type="text/javascript">
function pilih_penyulang(id_penyulang)
{
$.ajax(
{
url: 'http://localhost/arrester/option_gardu.php',
data : 'id_penyulang='+id_penyulang,
type: "post",
dataType: "html",
timeout: 10000,
success: function(response)
{
$('#dom_gardu').html(response);
}
});
}
</script>
</div>
<div class="w3-half">
<label>Gardu</label>
<select class="w3-select w3-border" name="id_gardu" id="dom_gardu">
<option value="" disabled selected>Choose your option</option>
</select>
</div>
and this is dom_gardu file that will be called by javascript
<?php
require_once('connect.php');
$id_penyulang = $_POST['id_penyulang'];
$query= $mysqli->query('select * from gardu where id_penyulang="'.$id_penyulang.'"');
while($data=$query->fetch_array()){
echo '<option value="'.$data['id_gardu'].'">'.$data['nama_gardu'].'</option>';
}
?>
my webpage view
my table view
How I can take value from view's code igniter to controller without loading page.. I have 2 class in controller, index and create_data.
I need to print $test dinamically
How can I make my code work?
View
<?php echo form_open("example/create_data", "class='form-horizontal' row-border")?>
<select name="example" onchange()="this.form.submit()">
<option value="1">1</option>
<option value="2">2</option>
</select>
<button type="submit">Tambah</button>
<?php form_close()?>
Controller
function index(){
$data['combo'] = comboData();
$test = $this->input->post();
$data['test'] = $test;
echo $test;
if ($test==1) {
doSomething();
} else{
doNothing();
}
$this->template->display('example/index',$data);
}
|| view
<?php echo form_open("example/create_data", "class='form-horizontal' row-border")?>
<select name="example" onchange="change_option()">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select id="your_second_dropdown_id_name">
<option value="0">no data</option>
</select>
<button type="submit">Tambah</button>
<?php form_close()?>
||javascript/jquery
var category_id = $(this).val();
$.ajax({
type: "POST",
data: category_id,
url: "<?= base_url() ?>learning/dependent_dropdown",
success: function(data) {
$.each(data, function(i, data) {
var opt = $('<option />');
opt.val(data.id_type);
opt.text(data.name);
$('#your_second_dropdown_id_name').append(opt);
});
}
});
Hi what I'm trying to do is I have 2 dropdown. I want that the ajax will only work if the two dropdown has value selected. And how do I pass the datas of the two?
Here is my code right now
SCRIPT
<script>
function getState(val) {
$.ajax({
type: "POST",
url: "get_state.php",
data:'country_id='+val,
success: function(data){
$("#state-list").val(data);
}
});
}
</script>
INDEX
<label>Group:</label><br/>
<select name="country" id="country-list" class="demoInputBox" onChange="getState(this.value);">
<option value="">Select Group</option>
<?php
while($row = mysql_fetch_array($results)) {
?>
<option value="<?php echo $row["g_id"]; ?>"><?php echo $row["g_name"]; ?> </option>
<?php
}
?>
</select>
<label>Division:</label><br/>
<select name="division" id="div-list" class="demoInputBox" onChange="getState(this.value);">
<option value="">Select Division</option>
<?php
while($row = mysql_fetch_array($results2)) {
?>
<option value="<?php echo $row["d_id"]; ?>"><?php echo $row["div_name"]; ?> </option>
<?php
}
?>
</select>
getstate.php
<?php
include("dbcon2.php");
if(!empty($_POST["country_id"])) {
$query ="SELECT * FROM personnel_gdd WHERE pg_group = '" . $_POST["country_id"] . "' ";
$results = mysql_query($query) or die(mysql_error());
?>
<?php
$row = mysql_num_rows($results)
?>
<?php echo $row; ?>
PS: I know that mysql is deprecated. I'll change it as soon as this problem is fixed. Thanks!
change
onchange="getState()"
donot pass any value in onchange event. And change your script like this
<script>
function getState(val) {
var country = $("#country-list").val();
var div = $("#div-list").val();
if(country && div) {
$.ajax({
type: "POST",
url: "get_state.php",
data:{"country_id": country,"div":div},
success: function(data){
$("#state-list").val(data);
}
});
}
}
</script>
This answer is generic, not related to your data but you will can understand how to figure it out.
$('select').change(function() {
var group = $('#country-list').val();
var div = $('#div-list').val();
if (group == -1 || div == -1) {
alert('please select country and division');
}
else {
$.ajax({
type: "POST",
url: "get_state.php",
data:'country_id=' + country + '&=div_id' + div,
success: function(data){
$("#state-list").val(data);
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label>Group:</label>
<select name="country" id="country-list" class="demoInputBox">
<option value="-1">Select Group</option>
<option value="1">Country 1</option>
<option value="1">Country 1</option>
<option value="2">Country 2</option>
<option value="3">Country 3</option>
</select>
<br />
<label>Division:</label>
<select name="division" id="div-list" class="demoInputBox">
<option value="-1">Select Division</option>
<option value="1">Division 1</option>
<option value="2">Division 2</option>
<option value="3">Division 3</option>
</select>
Than you get the 2 values in the server and return the data to the client. Than put this data into the third dropdown.
HTML
<label>Country:</label><br/>
<select name="country" id="country-list" class="demoInputBox" onChange="getState(this.value);">
<option value="">Select Country</option>
<?php
$selq = "your query..............";
$selm = mysql_query($selq);
while($row = mysql_fetch_array($selm))
{
?>
<option value="<?php echo $row["country_id"]; ?>"><?php echo $row["name"]; ?> </option>
<?php
}
?>
</select>
<select name="state" id="state-list" >
</select>
Javascript function
function getState(val) {
$.ajax({
type: "POST",
url: "test2.php",
data:'country_id='+val,
success: function(data){
$("#state-list").append('<option value=""></option>');
$('#state-list').html(data);
}
});
}
Ajax PHP file
if(!empty($_POST["country_id"]))
{
$query ="your query............... ";
$results = mysql_query($query) or die(mysql_error());
while($fetch = mysql_fetch_array($results))
{
?>
<option value="<?php echo $fetch['id']?>" ><?php echo $fetch['name'] ?></option>
<?php
}
}
You only need to check if all values are different from -1 or "" or whatever - then build the data object and fire the Ajax:
JSnippet Demo
function runAjax() {
//Check both:
check = true;
$('select').each(function(){
console.log($(this).val())
if ($(this).val() == -1) {
$('span').text("Please select both.");
check = false
}
});
if (!check) return;
$('span').text("OK. submiting");
//Get the data:
var data = {
select1: $('#sel1').val(),
select2: $('#sel2').val()
};
//Go on with ajax....
}
I am using a plugin for a dropdown that prevents me from using change() to find when a dropdown option is selected. How would I do the same with select() which it supports?
I currently have:
<select id="dropdown" name="dropdown">
<option value="0" data-imagesrc="images/icons/all.png">All Questions</option>
<option value="1" id="friends" data-imagesrc="images/icons/friends.png">Friends</option>
<option value="2" data-imagesrc="images/icons/friends_of_friends.png">Friends of Friends</option>
<option value="3" data-imagesrc="images/icons/network.png"><?php echo $network; ?></option>
<option value="4" data-imagesrc="images/icons/location.png"><?php echo $location ?></option>
</select>
<script type="text/javascript">
$('#dropdown').ddslick({
showSelectedHTML: false
});
$(document).ready(function() {
$('#dropdown').select(function() {
var blah = selected dropdown // mock code
$.ajax({
type: "POST",
url: "data.php",
data: {'data': blah},
success: function(data) {
$('#questions_body').hide().html(data).fadeIn('500');
},
dataType: "HTML"
});
});
});
</script>
I don't think the select() method has anything to do with this. From the plugin page, though:
onSelected: Callback function when an option is selected in the drop down. See demo 3 above.
$('#myDropdown').ddslick({
onSelected: function(selectedData){
//callback function: do something with selectedData;
}
});