Suggest text input field - javascript

I try to create a suggest text input field read the suggest information from mysql database when a user enter a letter for example A all word contain letter A appear under the input field i use PHP and mysql.
The HTML
<label for="email">Location *</label>
<input type="text" list="mylocation" id="suggest" name="txt_location">
<datalist id="mylocation">
</datalist>
</div>
PHP code
<?php
include("../includes/connect.php");
$location=$_GET['txt_location'];
$sql=mysqli_query($conn,"select DISTINCT(db_location) from tbl_marketing where db_location like '$location%' order by db_location")or die(mysqli_error($conn));
if(mysqli_num_rows($sql)>0){
while($row=mysqli_fetch_array($conn)){
$loc=$row['db_location'];
echo"<option value='$loc'>";
}}
?>
My Script
$(document).ready(function(){
$("#suggest").keyup(function(){
$.get("suggest.php",{location: $("#suggest").val()},function(data){
$("datalist").empty();
$("datalist").html(data);
});
});
});
I use also in my website bootstrap
The problem is that my code didn't work. Is there any other method can i do that or can i use bootstrap to do it and What is and How to do it ??!!

Try the following code. Hope it works.
$(document).ready(function(){
$(document).on('keyup',"#suggest",function(){
$.get("suggest.php",{txt_location: $("#suggest").val()},function(data){
console.log(data);
$("#mylocation").empty();
$("#mylocation").append(data);
});
});
});
Troubleshooting steps:
Check if datalist is working. (Add some dummy <option> set)
Check if suggest.php is connected and providing you result. Use console.log.
Basically your script is correct except the txt_location and location i.e., key value pair mismatch.

try this PHP code
<?php
include("../includes/connect.php");
$location=$_GET['location'];
$sql=mysqli_query($conn,"select DISTINCT(db_location) from tbl_marketing where db_location like '".$location."%' order by db_location")or die(mysqli_error($conn));
if(mysqli_num_rows($sql)>0){
while($row=mysqli_fetch_array($conn)){
$loc=$row['db_location'];
echo"<option value='$loc'>";
}
}
?>

Related

is there a way to show command only after the option is selected in php

I can't figure out on how to put the selected code after it has selected the option.
I am using laravel, but i dont think it has to do with laravel framework...
<select id="idjenisuniform" name="idjenisuniform" style="width: 100%;">
<option value=""></option>
#foreach($idjenisuniform as $g)
<option value="{{$g->id}}" >{{$g->badanuniform}}</option>
#endforeach
</select>
(the idjenisuniform is from the controller, it works), but I just don't know how to do it after it has done choosing from the option.
Example
it chooses police -> the id is 1
I want to make:
if the option from it is 1, then it will display other option to show what group is he in. For example detective.
In conclusion I am trying to make a select option and after it has choose it, it will proceed to the next select option corresponding to the previous id from option.
please help.
Since you are wanting an effect that depends on user interaction, it would be better to use javascript for the effect you want. With php, the choice has to go all the way back to the web server to get processed, then the result is sent all the way back to the browser and the whole web page will refresh as a result. With javacript, everything happens in the browser.
But, you asked for a php solution, so here's the most simple way.
Say the first select element is named "select-one" and the second select element is named "select-two"
Create two forms. Notice that the second form has an ID.
[form action="/url/" method="whatever"]
[form id="other-form" action="/url/" method="post"]
In the main form (the one without an ID), place all your form elements. In addition, place another hidden element with the same name as the first select element ("select-one");
[form]
[input type="hidden" name="select-one"]
... all other elements
[/form]
Now when you add the first select element, give it a new attribute so that it is associated with "other-form" instead of the main form. Also, give it an ID.
[select id="select1" name="select-one" form="other-form"]
You DO have to add a bit of javascript, but it's not much. If you don't have any other javascript set up, just put this at the bottom of the web page, just above the [/body] tag.
[script]
const select1 = document.querySelector('#select1');
select1.addEventListener('change', (event) => event.target.form.submit());
[/script]
The javascript will submit the form which #select1 is associated with. Since we assigned the element to "other-form", that is the form that will get submitted.
For the php:
I haven't used Laravel in a very verly long time so I'll just give some vanilla php here.
$options_one = ['One', 'Two', 'Three'];
$options_two = [
'One' => ['Foo', 'Bar', 'Baz'],
'Two' => ['Boom', 'Bang', 'Bam'],
'Three' => ['Fee', 'Fie', 'Fo', 'Fum']
];
$select_one = (isset ($_POST['select-one']) ? $_POST['select_one'] : false;
// do some input validation
Now for the forms:
<form id="other-form" method="post" action = ""></form>
<form id="main-form" action="">
<input type="hidden" name="select-one" value="<?php echo $select_one ?>">
<!-- This element is assigned to "other-form" -->
<select form="other-form" name="select-one" id="select1">
<option value="">Select One...</option>
<?php foreach($options_one as $option) {
$option = ($select_one === $option) ? "<option selected>$option</option>" : "<option>$option</option>";
echo $option;
}?>
</select>
<select name="select-two">
<?php
$options = ["The first choice has not been selected"];
if (array_key_exists($select_one, $options_two)) {
$options = $options_two[$select_one];
}
foreach ($options as $option) {
echo "<option>$option</option>";
}
?>
</select>
<!-- other inputs in your form -->
</form>

Fetch data to select tag from oracle database

function display_docs()
{
global $con;
$query="select doctor_name from doctors";
$result=oci_parse($con,$query);
oci_execute($result);
while($row=oci_fetch_array($result))
{
$doctor_name=$row['DOCTOR_NAME'];
echo '<option value="'.$doctor_name.'">'.$doctor_name.'</option>';
}
}
<select name="doctor" class="form-control" >
<?php display_docs();?>
</select>
I have problems with my code, I don't know where is a bug, I can't see the result in the select tag.
Expected output: I must take all information from SQL developer where I am saving data about doctors and show it in the select tag.
My output: nothing in the select tag.
I am calling javascript function into HTML code
I have no problems with connecting to the database

How to remove all html tags from textarea if textarea is dynamic?

code:
<script>
$(document).ready(function(){
$('#temp').val(function(i,val) {
return $('<div>').html(val).text();
});
});
</script>
<textarea id="temp"><?php echo $fetch['description']; ?></textarea>
In this code I have a textarea where I am fetching its value from database. Now, In my database table column it have text with multiple tags like tag P,ul,br and more. So, How can I remove these tags from textarea ?Please help me.
Thank You
I would use the PHP function strip_tags() for that:
<textarea id="temp"><?php echo strip_tags($fetch['description']); ?></textarea>
The basic function with general syntax is below plz try with this function
string strip_tags ( string $str [, string $allowable_tags] )

Javascript / Php : set textarea value

I have the following script, which returns 2 values from my database.
$(document).ready(function() {
<?
$link=new mysqli($serveur,$login,$pass,$base);
mysqli_set_charset($link, "utf8");
$r=mysqli_query($link, "select sujet,corps from mail where type='Création_rationnaire'");
while($row = mysqli_fetch_array($r)) {
?>
document.getElementById("sujet").value="<? echo $row[sujet];?>";
document.getElementById("te").value="<? echo $row[corps];?>";
<? }mysqli_close($link); ?>
});
Here are my 2 forms, one is a classic Input, the other is a textarea.
<input id='sujet' class="form-field">
<textarea id="te" class="textarea" rows="9" cols="70"></textarea>
The problem is : my SQL request works in MySQL, but when "corps" is echoed as above, nothing appears in the Inputs, like the script was crashing... Only "sujet" can be echoed successfully. So... why, just why ? Thanks in advance for whoever helps me.
EDIT : all I can echo in the "te" textbox is a single string like this : echo 'something';... but nothing else works...
Try this
document.getElementById("sujet").value="<? echo $row['sujet'];?>";
document.getElementById("te").text="<? echo $row['corps'];?>";
or if you use jquery
var message = <?php echo $row['corps']; ?>;
$("#te").val(message);
Textarea does not have a value but it does have text.
in an input box you would have <input type="text" value="example" /> and in a text area the value is inside the element like so
<textarea>example</textarea>
A other way is to use innerHtml (javascript) or html (jquery) .
But note that html tags will be display with one of these options
document.getElementById("te").innerHTML="<? echo $row['corps'];?>";
<textarea> doesn't have value property. Since you are using jQuery to bind document ready, you can use jQuery to set the value.
$("#sujet").val("<? echo $row[sujet];?>");
$("#te").html("<? echo $row[corps];?>");
What is the value of $row[corps]? Is it empty string? Does it contain double quote, or newline characters? If it contains any of them, it will break your javascript source code. What does javascript source code look like when you check source code inside the browser?
It works by inserting the values directly into the plain html forms. I usually use this javascript function because I have tons of forms to fill in my program, and it never failed until now... So my function above was good, but we still don't know why it failed in this particular case...
Problem solved anyways... thanks to everyone.

How can I send value inside select event?

I have onchange event inside a select input, I try execute a javascript function but I need insert inside one value get from php as follows:
<?php
print "<select name='sel_reg' id='testsel2' onchange=\"loaddiver('city',this.value ".$_REQUEST['data_loc'].");\">";
?>
The problem come from $_REQUEST['data_loc'] if i put inside no works nothing if i don´t use this , all works perfectly , i need get this 2 values inside but i don´t know how i can do this
You don't have a comma after this.value:
onchange="loaddriver('city', this.value, $_REQUEST['data_loc']);
Try This.
<?php
?>
<select name="sel_reg" id="testsel2" onchange="loaddiver('city',this.value, <?php echo $_REQUEST['data_loc'] ;?>)">
<?php
?>
First thing: Your data is uneascaped, so if some html special char ("'<> etc.) occurrs in the string it'll mess up your html.
Second thing: You need apostrophes around your string and you need to add a comma after this.value:
<?php
print "<select name='sel_reg' id='testsel2' onchange=\"loaddiver('city', this.value, '".htmlentities($_REQUEST['data_loc'], ENT_QUOTES)."');\">";
?>

Categories

Resources