onChange event in javascript is not triggering in select box - javascript

I'm sorry to ask a duplicate question again but i'm really got into this...
Down there is my code:
<script type="text/javascript">
function textHint()
{
Confirm("Do u want to proceed");
}
</script>
<select name="duration" id="duration" class="inp_bx" onChange="textHint();">
<option value="1">-Select-</option>
<?php
$sql = "select distinct(package_type) from tbl_package";
$retval = mysql_query($sql, $conn );
if(! $retval )
{
die('Could not get data: ' . mysql_error());
echo 'Could not get data: ' . mysql_error();
}
while($row = mysql_fetch_assoc($retval,MYSQL_ASSOC))
{
$package= $row['package_type'];?>
<option value="<?php echo $package?>"><?php echo $package;?>
</option>
<?php } ?>
</select>
I'm getting the value in select box from database but the onchange function is not triggering out...i dont know why?
This is similar to the one on the link:
call javascript function onchange event of dropdown list
Instead the value is fetched from the database...
Thanks in advance guys...

Javascript is case-sensitive. Your Confirm should be confirm.
function textHint()
{
confirm("Do u want to proceed");
}

Related

actual code for xferring javascript variable to post variable

I have looked at this site for three days. I admit I am new to using javascript. But I have used the many different solutions offered and none have worked. Please help.
I am trying to do something that should be simple: save a user choice of country from a dropdown box on an html5 page to a hidden post variable (using javascript onchange.) That is used in a post array on the same form for a php operation that sends the input to a mysql database. This is my code:
The hidden post variable doesn't update. From there I can't test the code logic. But my onchange code came from this site and is suppose to work.
References:
<script type="text/javascript" src="../../js/jquery-2.1.4.min_prod.js"> </script>
<script type="text/javascript" src="../../js/respond.min.js"> </script>
<script type="text/javascript" src="../../js/bootstrap.min.js"> </script>
form information:
<form name="form1" method="post" enctype="multipart/form-data" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" />
</form>
form element
$query="SELECT * from country ";
$query=$query."ORDER BY country asc";
$data = mysqli_query($conn,$query);
//or die('could not connect to db:'. mysqli_connect_error() );
mysqli_error($conn);
If ($data) {
echo '<select id="country" onchange="send_name(this)">';
echo '<option value="204">United States</option>';
while ($row = mysqli_fetch_array($data)) {
echo '<option value="'.$row['country_id'].'">'.$row['country'].'</option>';
}//while
echo '</select>';
}//if
mysqli_close($conn);
?>
<input type="hidden" id="c_php_value" name="c_php_value" value="">
Javascript
function send_name(selectObjectI) {
var value = selectObjectI.value;
$.ajax({
type: "POST",
url: "http://localhost/php/protected/form_addnews.php",
data:{c_php_value: value}
});
Post Submit Code
$country_id1 = trim($_POST['c_php_value']);
Thanks to a coder on utube, speaking german I might add, I discovered I don't need javascript, ajax or anything complicated to accomplish what I am trying to do.
I simply needed to do the following:
(1) Add a name="" to the dynamically created SELECT flag(name="country_id2").
(2) user chooses input with drop down box created.
(3) gather the $_POST after the form submit is set.
($country_id = $_POST['country_id2'])
$data = mysqli_query($conn,$query);
//or die('could not connect to db:'. mysqli_connect_error() );
mysqli_error($conn);
If ($data) {
echo '<select name="country_id2" id="country_id2">';
echo '<option value="204">United States</option>';
while ($row = mysqli_fetch_array($data)) {
echo '<option value="'.$row['country_id'].'">'.$row['country'].'</option>';
}//while
echo '</select>';
}//if
mysqli_close($conn);

update echo "select option " on mysql

I have a form that updates the adds to the table. This table is retrieved live. which means once submitting the form you can view the content on the table. I added a select option drop down on the table content. I am not sure how to get this info in back to mysql once the user chooses his option. As seen in the code my file is a PHP file.
my select option is updates by javascript but it does not update mysql.
Kindly guide me. Thank you
while($row = mysqli_fetch_assoc($resultset))
{
echo "<tr id=\"row\">
<td class=\"fname\" data-id1=".$row["contact_id"]." contenteditable>" . $row['fname'] ." </td>
<td class=\"lname\" data-id2=".$row["contact_id"]." contenteditable>" . $row['lname']. "</td>
<td>" . $row['contact']."</td>
<td>
<select id4=".$row['contact_id']." name=\"rsvp\" onchange = \"fetch_select(this.value)\">
<option name=\"not-done\" value=\"not-done\">Not done</option>
<option name=\"attending\" value=\"attending\">Attending</option>
<option name=\"not-attending\" value=\"not-attending\">Not-attending</option>
<option name=\"maybe\" value=\"maybe\" selected>Maybe</option>
</select>
</td>
<td><button id3=".$row['contact_id']." name=\"button\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i></button>
<tr>";
}
echo "</table>";
mysqli_close($con);
?>
$('select').on('change', function()
{
// Show an alert
alert( "The new value of the select is " + $(this).val() );
var id=$(this).attr("id4");
var val=$(this).val();
function fetch_select(val ,id)
{
$.ajax({
url:"updateselect.php",
method:"POST",
data:{rsvp:val , id:id},
dataType:"text",
success:function(data){
alert(data);
}
});
}
});
<?php
$connect = mysqli_connect("localhost", "root", "", "registration");
$id = $_POST["id"];
$rsvp = $_POST["val"];
$sql = "UPDATE guestlist SET rsvp ='".$rsvp."' WHERE contact_id='".$id."'";
if(mysqli_query($connect, $sql))
{
echo 'Data Updated';
}
?>
You want to create a form surrounding your dropbox; now you can either submit it using ajax or just submit it to a different page, your call.
It would look something like this:
Note: Add a name param to your select so you can actually get it using $_POST and handle the data.
<form method="post" action="rsvp_handler.php">
<?php
while($row = mysqli_fetch_assoc($resultset))
{
echo "<tr id=\"row\">
<td class=\"fname\" data-id1=".$row["contact_id"]." contenteditable>" . $row['fname'] ." </td>
<td class=\"lname\" data-id2=".$row["contact_id"]." contenteditable>" . $row['lname']. "</td>
<td>" . $row['contact']."</td>
<td>
<select name='rsvp' id='rsvp'>
<option value=\"not-done\">Not done</option>
<option value=\"attending\">Attending</option>
<option value=\"not-attending\">Not-attending</option>
<option value=\"maybe\" selected>Maybe</option>
</select>
</td>
<td><button id3=".$row['contact_id']." name=\"button\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i></button>
<tr>";
}
echo "</table>";
mysqli_close($con);
?>
<button type="submit" name="submit">Submit</button>
</form>
Then for the rsvp_handler.php page just take the post result and then send the wanted data to your database:
if (isset($_POST['submit']))
{
$rsvp = $_POST['rsvp'];
//... any other elements
// create your query here
$sql = "INSERT INTO " . $table . " (rsvp, row2, row3) VALUES (?, ?, ?)";
// best way is to create prepared statements
if($stmt = $mysqli->prepare( $sql ))
{
// bind the params
$stmt->bind_param('sss', $rsvp, $val2, $val3);
// execute the query
$stmt->execute();
// close the connection
$stmt->close();
}
}
Hi I found the answer to the solutions.
My ajax need to have a separate function.

having issues while trying to populate second drop down-list dynamically using AJAX

i am trying to populate second dropdown based on the selected option of 1st dropdown but i am unable to do so i dont know what i am doing wrong but something is wrong all my endeavors to achieve my desired results are dashed to the ground cuz its not working kindly help me
so far i have done this....
<select name="ddl_company" size="1" class="form-control" id="ddl_company" onchange="getId(this.value);">
<option value="">Select Company</option>
<?php
//Getting Company name from mysql and displaying it in the 1st dropdown having id ddl_company
$query = mysql_query("select * from company where company_status='Active'order by company_name asc");
while ($r = mysql_fetch_array($query)) {
if ($r['company_id'] == $ddl_company) {
echo "<option selected value=$r[company_id]>$r[company_name]</option>" . "<BR>";
} else {
echo "<option value=$r[company_id]>$r[company_name]</option>";
}
// second drop down list which is going to fetch data from mysql db based on the selected option of 1st dropdown
?>
<select name="ddl_dept" size="1" class="form-control" id="ddl_dept">
<option value=""></option>
</select>
//ajax implementation of 2nd dropdown
<script type="text/javascript">
function getId(val)
{
$.ajax({
type:"POST",
url:"getdata.php",
data:"company_id="+val,
success:function(data)
{
$('#ddl_dept').html(data);
}
});
}
</script>
finally get_data.php file
<?php
include("../newconfig.php");
if (!empty($_POST['company_id'])) {
$company_id = $_POST['company_id'];
$query = "select * from department where department_status='Active'LIMIT 1 AND company_id='$company_id'LIMIT 1";
$sqlquery = mysql_query($query);
while ($r = mysql_fetch_array($sqlquery)) {
# code...
if ($r['company_id'] == $company_id) {
echo "<option selected value=$r[department_id]>$r[department_name]</option>" . "<BR>";
} else {
echo "<option value=$r[department_id]>$r[department_name]</option>";
}
}
}
}
?>
I have done all this yet its not working kindly help me i shall be very thankful. btw thats my output
click this to show the result
Try something like this : jquery
$("select#ddl_dept").on('change',function(){
var selected = $('#ddl_company option:selected').text();
getId(selected );
});

how to run javascript code and PHP code when a variable selected from drop list

I have this drop down list that when I click on it, it shows me a hidden div
<form action="" method="post" name="select_name_form">
<input type="submit" name="select_name_submit" value="debts"/>
<select onchange="showMe(this);" name="select_name">
<?php foreach($result1 as $name) { ?>
<option value="<?php echo $name['name'] ?>"><?php echo $name['name'] ?></option>
<?php } ?>
</select>
</form>
And this is the javascript code:
<script type="text/javascript">
function showMe(e) {
var strdisplay = e.options[e.selectedIndex].value;
var e = document.getElementById("section3");
if(strdisplay == "Hide") {
e.style.display = "none";
} else {
e.style.display = "block";
}
}
</script>
What I want to make when I click on any value of this list is still shows me the hidden div but I want to apply this PHP code and select data into that div:
if(isset($_POST['select_name_submit'])){
$name_selected = $_POST['select_name'];
try{
$query = ("SELECT * FROM debts WHERE name=:name");
$stmt = $conn->prepare($query);
$stmt->bindValue(":name", $name_selected);
$count = $stmt->execute();
//header("location: debts.php");
}
catch(PDOException $e) {
echo $e->getMessage();
header("location: debts.php");
}
}
This PHP code is in the same page where I have the drop down list. So how can I make the drop list run 2 code when a name is selected from it (one code is JS and the second is PHP).
The scenario which you mentioned can be achieved using ajax,
http://www.w3schools.com/php/php_ajax_database.asp
Please refer this example, you will get more idea.
in case needed, please add comment, i can help you.
Thanks
Amit

Small glitch but could be an important issue

I currently have an issue with my drop down menu using JavaScript/AJAX and PHP.
Here's the code for the edit.php file which is supposed to retrieve data from multiple selection boxes in a drop-down list:
<td ><input readonly type="text" id="mainlines" value='<?php echo $_SESSION["mainlines"];?>' name="mainlines"/> </td>
<td ><input readonly type="text" id="categories" value='<?php echo $_SESSION["categories"]; ?>' name="categories"/> </td>
<td>
<select name="subcategories" id="menu" onChange="SelectAccountHead_Code(this.value)">
<option value="<?php print $subcategories; ?>"><?php print $subcategories; ?></option>
<?php
$sql1a = "SELECT * FROM subcategory ORDER BY subcategories asc";
$smt1a = $dbs->prepare($sql1a);
$smt1a -> execute();
while($row1a=$smt1a->fetch(PDO::FETCH_ASSOC))
{
if($row1a['subcategories']==$_GET['id2'] )
echo ("<option selected value=$row1a[subcategories]>$row1a[subcategories]</option>");
else
echo ("<option value=$row1a[subcategories]>$row1a[subcategories]</option>");
}
?>
</select>
</td>
For the "mainlines" and "categories", I get the data showing output only when it is selected, but when the item is being edited it doesn't automatically print it out unless I use "print $mainlines" or "print $categories".
How do I insert the onChange event changer in the if/else statement?
I want it to state the following in pseudo-code:
if (onChange = "SelectAccountHead_Code(this.value)"){
print $mainlines;
} else {
echo $_SESSION["mainlines"];
}
How do I go about inserting the correct syntax in the if/else clause with regards to the JavaScript/AJAX event changer/handler?
Update:
Here's my JavaScript code - where am I missing the AJAX code?
function SelectAccountHead_Code(i)
{
var k=document.getElementById("menu").selectedIndex;
var l=document.getElementById("menu1").selectedIndex;
if((k>0)&&(l>0))
{
self.location="edit3.php?productsnames=<?php print $productsnames;?>&id="+document.getElementById("menu").options[k].value+"&id2="+document.getElementById("menu").options[k].innerHTML +"&id3="+document.getElementById("menu1").options[l].value+"&id3="+document.getElementById("menu1").options[l].innerHTML;
}
}
function SelectAccountHead_Codes(j)
{
var k=document.getElementById("menu").selectedIndex;
var l=document.getElementById("menu1").selectedIndex;
if((k>0)&&(l>0))
{
self.location="edit3.php?productsnames=<?php print $productsnames;?>&id="+document.getElementById("menu").options[k].value+"&id2="+document.getElementById("menu").options[k].innerHTML +"&id3="+document.getElementById("menu1").options[l].value+"&id3="+document.getElementById("menu1").options[l].innerHTML;
}
}
function SelectUp(i)
{
var k=document.getElementById("menuUp").selectedIndex;
var l=document.getElementById("menuUp").selectedIndex;
self.location="edit3.php?id="+document.getElementById("menuUp").options[k].value+"&id2="+document.getElementById("menu").options[k].innerHTML +"&id3="+document.getElementById("menu1").options[l].value+"&id3="+document.getElementById("menu1").options[l].innerHTML;
}
function SelectUp(j)
{
var k=document.getElementById("menuUp").selectedIndex;
var l=document.getElementById("menuUp").selectedIndex;
self.location="edit3.php?id="+document.getElementById("menuUp").options[k].value+"&id2="+document.getElementById("menu").options[k].innerHTML +"&id3="+document.getElementById("menu1").options[l].value+"&id3="+document.getElementById("menu1").options[l].innerHTML;
}
You cant combine Javascript and PHP without further requests (Ajax) and server interaction.
Other big mistake:
echo ("<option selected value=$row1a[subcategories]>$row1a[subca.........
you have constants in your associative arrays.
See this example why this is wrong:
$array = array('test' => 111);
define('test', 999);
echo $array[test];
proper:
echo ("<option selected value='" . $row1a['subcategories'] . "'>" . $row1a['su..
// consider adding htmlspecialchars() or addslashes() to your output
More minor mistakes / bad practice:
onChange should be all small letters: onchange
if .. else block should have { }

Categories