I am attempting to create a way to search for a user by typing their name in a text field, then changing a list below. The easiest way I saw to do this way by using a datalist but it seems that a datalist's search go off the value and not the html of the element.
Is it possible to change the search from looking at the value to the html?
Context:
<input class="mrg-btm" type="text" placeholder="Search..." list="users" />
<datalist id="users" name="formSec" required>
<?php
$get = $users->prepare("SELECT userID,userFirst,userLast FROM users");
$get->execute();
$get->store_result();
$get->bind_result($userID,$userFirst,$userLast);
while($get->fetch()) {
?>
<option value="<?php echo $userID; ?>"><?php echo $userFirst. ' ' .$userLast; ?></option>
<?php
};
$get->close();
?>
</datalist>
As you can see, I am assigning the userID to the value and not the name, I would like to be able to search for the name of the user without having to put it as the value, is this possible?
You can make up attributes in HTML5 by prefixing them with data-. So in your case you need to do it like this:
<option value="<?php echo $userID; ?>" data-userFirst="<?php echo $userFirst ?>" data-userLast="<?php echo $userLast ?>"><?php echo $userFirst. ' ' .$userLast; ?></option>
Now you can use javascript to get the vlues of the attributes.
Related
My drop down is showing blank then when i select the value of dropdown the same value is showing, but i have to show dropdown value as select first then when I click on button the respective value should show
I am doing a Php program
<form class="form-horizontal" name="form" method="post" action="<?php $_PHP_SELF?>">
<label for="courseDisp" class="col-sm-2" style="margin-top:10px;">Course : </label>
<?php
$course="SELECT * from course";
$res= $conn->query($course);
if($res->num_rows>0)
{
echo '<select name="courseDisp" id="courseDisp" class="form-control col-sm-3" style="margin-top:8px;display:inline;padding:10px;">';
echo '<option value="0" selected> -- SELECT --</option>';
while($row=$res->fetch_assoc())
{
echo '<option value='.$row["course_id"].'>'.$row['shortname'].'</option>';
}
echo '</select>';
} else {
echo "0 result";
}
?>
<label for="yearDisp" class="col-sm-2" style="margin-top:10px;">Year : </label>
<?php
$year="SELECT distinct(year) from syllabus";
$res= $conn->query($year);
if($res->num_rows>0)
{
echo '<select name="yearDisp" id="yearDisp" class="form-control col-sm-3" style="margin-top:8px;display:inline;padding:10px;">';
echo '<option value="0">-- SELECT --</option>';
while($row=$res->fetch_assoc())
{
echo '<option value='.$row["year"].'>'.$row['year'].'</option>';
}
echo '</select>';
} else {
echo "0 result";
}
?>
<script type="text/javascript">
document.getElementById('courseDisp').value = "<?php echo $_POST['courseDisp'];?>";
document.getElementById('yearDisp').value = "<?php echo $_POST['yearDisp'];?>";
<input type="submit" class="btn col-sm-2" style="margin-left:15px;margin-top:10px;width:60px;font-weight:bold;font-size:15px;" value="GO" name="btnGo" id="btnGo" />
</form>
I think you are doing it in a wrong way:
your code should look like this
<script type="text/JavaScript">
var valueSelected=document.getElementById('course').value;
alert(valueSelected);// do here according to the need
</script>
This is because there is no $_POST variables present before you submit a form.
$_POST variables can only be 'accessed' whenever a POST form is submitted, so when the form is not submitted, $_POST['course'] will be undefined. If you want to use persistant, but also relative variables, use $_GET.
This can be done the following way:
<script type="text/javascript">
document.getElementById('course').value =<?php echo $_GET['course'];?>";
</script>
(this will cause an error if value is not set, make sure to make exceptions for that, using if statements in PHP)
but the value also needs to be fetched from the URL.
so your url needs to have ?course=<course_value> in it, for example:
https://example.com/index.php?course=Course%201
Click here for more about POST vs GET requests
Instead of setting the value with javascript, you should directly write the selected attribute.
<select name="course">
<?php foreach ($options as $key => $value): ?>
<option value="<?= $key ?>"<?php if ($key == $_POST['course']) echo " selected" ?>>
<?= $value ?>
</option>
<?php endforeach; ?>
</select>
If you have to do this in javascript, keep sure, you use the correct syntax. Your example has a wrong " at the end of the line. Also you should use json_encode, if you want to output vars into javascript. And a last thing - if you don't put this inside the document ready event, the script has to be placed after the select element, which you wan't to manipulate
<select name="course">...</select>
...
<script type="text/javascript">
document.getElementById('course').value = <?= echo json_encode($_POST['course']) ?>;
</script>
Needed to keep the <option value="">-Select-</option>
Im pretty stuck at this code, I really can't see why it should not work, i don't know if some javascript code im running beforehand is interfering?
Only showing relevant part of the code
The first section with javascript updates page when selecting another dropdown, and is placed before the code that im struggling with:
`
<script type="text/JavaScript">
function changeDropDown(){
var elLocation = document.getElementById('form_location_id');
var location = elLocation.options[elLocation.selectedIndex].value;
document.getElementById("form1").action = "choose.php?id=" + location;
document.getElementById("form1").submit();
}
</script>
<form id="form1" name="form1" method="post">
<select size="1" name="form_location_id" id="form_location_id" onchange='changeDropDown(this);'>
<?php
if ($chosen_id == "1") { ?>
<option value = "1" selected><?php echo "dropdown text" ?></option>
<? } else { ?>
<option value = "1"><?php echo "dropdown text" ?></option>
<?php } ?>
</select>
</form>
<form method="post" action="update.php">
<select size="1" id="choice" name="value">
<?php
while($row = mysqli_fetch_array($query)) {
$id = $row['id'];
$number = $row['number'];
>?
<option value = "<?php echo ($id) ?>"><?php echo "ID=" . ($id) . " - #" . ($number) . ""?></option>
<?php
}
mysqli_close($db_conn);
?>
</select>
<input name="submit" type="submit" value="Submit">
</form>
update.php:
<?php
if (isset($_POST['submit'])) {
$chosen_id = $_POST['id'];
}
?>
`
I've only posted the code handling the select option and the post part...
Why is the $chosen_id variable always 0 ?
The while loop works, and fill's the variable, as this is tested with echo command inside the option line
Any help is much appreciated...
$_POST['id'] and <select size="1" id="choice" name="value">
Use $_POST['value']
You are trying to print the wrong key
if you trying to get the value of form_location_id
$chosen_id = $_POST['form_location_id'];
And if you trying to get the value of choice
$chosen_id = $_POST['value'];
This is why when you post a form to php it use html name attribute as key to assign the value to $_POST Array
I'd change Update.php to
<?php
if (isset($_POST['value'])) {
$chosen_id = $_POST['value'];
}
?>
You need to use the form_location_id to get the required value. You are using the wrong key to access the data. You need to use the name of the input. In this case, the input is the select and the name of that is form_location_id. So, you need to do this.
$value = $_POST['form_location_id'];
Try it out and do let me know if it worked out for you.
Thanks for everyone posting idea's - i've actually got it working, the code was actually working, only error was a misplaced tag, which was placed inside a tag, when placed outside this tag it works ;)
Let's say I have a form like this in my CodeIgniter project.
<?php echo form_open(); ?>
<select>
<?php foreach($status_list as $status): ?>
<option value="<?php echo $status->id; ?>"><?php echo $status->name; ?></option>
<?php endforeach; ?>
</select>
<!-- Show this only if status type is, let's say "E" -->
<input type="text" name="E_happened">
<!-- Show this only if status type is, let's say "S" -->
<input type="text" name="S_happened">
<?php echo form_close(); ?>
What I want to do is if an user select one status, according to the it's type, show a text field to get an input.
I've made a way to get a type of the status like this: http://localhost/myapp/index.php/status/type/{status_id} where users can pass status ID and it will "echo" the type of the status.
I want to receive it back to the HTML page via a JavaScript method and show those text input fields. How do I do that?
Thank you. :)
As you have jQuery tag, so i suggest you this:
$('select').change(function(){
var inp = this.value.trim();
$(this).parent().find('input[type="text"][name^="'+inp+'"]').show().siblings(':text').hide();
});
I have posted the sample flow as per you want to do. hope this will helpful for you.
PHP:
<?php echo form_open(); ?>
<select>
<?php foreach($status_list as $status): ?>
<option value="<?php echo $status->id; ?>"><?php echo $status->name; ?></option>
<?php endforeach; ?>
</select>
<!-- Show this only if status type is, let's say "E" -->
<input type="text" id="E_happened" name="E_happened">
<!-- Show this only if status type is, let's say "S" -->
<input type="text" id="S_happened" name="S_happened">
<?php echo form_close(); ?>
JAVASCRIPT :
$('select').change(function(){
var statusId = $(this).val();
var statusType = $.get("http://localhost/myapp/index.php/status/type/"+statusId);
if(statusType == 'E')
{
$('#E_happened').value("what do you want here");
}
if(statusType == 'S')
{
$('#S_happened').value("what do you want here");
}
});
I know this will require the use of AJAX but I don't know where to start with it.
<td class="dataTableContent" valign="top">
<div>
<input id="<?php echo " update_products[ " . $orders_products_id . "] [backorder_date] "; ?>" name="<?php echo " update_products[ " .
$orders_products_id . "][backorder_date] "; ?>" size="10" ?>onChange="backorderDate('
<?php echo $orders_products_id; ?>')" value='
<?php echo tep_date_short($order->products[$i]['backorder_date']); ?>'>
</div>
</td>
So what I have here is an input box that requires users to input a back order date if there is one for their product. Now if you notice I have an event that activates a function onChange for this input box.
function backorderDate(pid)
{
<?php
$prod_id = "<script language='JavaScript'>pid;</script>";
echo $prod_id;
$query_send = tep_db_query("SELECT backorder_date from pos_products WHERE
orders_products_id= '$prod_id' ORDER BY backorder_date DESC");
$final = tep_db_fetch_array($query_send);
?>
alert("There has been a change to the Back Order Date and this may
change the In Stock checkbox.");
alert("<?php echo $final; ?>");
}
Then as you can see above this is the function that is being called. I pass the variable from the input box to the function and I named it 'pid'. Then here is where the problem begins. I need that variable's content in order to call the correct info in a query. Clearly what I have there is wrong and it most likely needs AJAX. Can anyone push me in the right direction?
I'm not a PHP wiz, but I'm guessing that the PHP in your JS function gets parsed and doesn't exist when the function is actually run. Therefore, the script tag is unnecessary.
function backorderDate(pid) {
<?php echo $prod_id ?> = pid;
You can't do SQL from javascript like this. It's not only impossible, it's a huge security risk. Assuming the PHP outputs the input correctly, change your javascript function to look something like this:
function backorderDate(pid)
{
$.ajax ({
url: "backend.php",
data: pid,
success: function(data) {
///do whataever you want here
}
})
}
Then create a PHP file called backend.php where you do your query, process the results, and send back data to your jQuery function.
EDIT:
Looking over this again, I'm not sure what you're trying to do here:
<input id="<?php echo " update_products[ " . $orders_products_id . "] [backorder_date] "; ?>" name="<?php echo " update_products[ " .
$orders_products_id . "][backorder_date] "; ?>" size="10" ?>onChange="backorderDate('
<?php echo $orders_products_id; ?>')" value='
<?php echo tep_date_short($order->products[$i]['backorder_date']); ?>'>
You may mean something like this? :
<input id="<?php echo $update_products[orders_products_id][backorder_date]; ?>"
name="<?php echo $update_products[orders_products_id][backorder_date]; ?>"
size="10"
onChange="backorderDate('<?php echo $orders_products_id; ?>')"
value='<?php echo tep_date_short($order->products[$i]['backorder_date']); ?>'>
Without seeing more of your code, I can't really decipher where all these variables are coming from.
I have a PHP script that generates table rows with hidden input tags that have names like title1, title2 etc and price1, price2 etc. The user has the ability to remove and add rows as they see fit. My question is when I submit the rows how can I read those hidden inputs in order, either through PHP or Javascript?
EDIT: Sorry about the lack of detail. Here's some code:
The PHP that generates the rows
$result = mysql_query("SELECT * FROM `table`");
$i=0;
while ($list = mysql_fetch_array($result))
{
$i++;
$title = $list['title'];
$price = $list['price'];
$plu = $list['plu'];
?>
<tr id="row<?php echo $i; ?>"><td><input type="hidden" name="title<?php echo $i; ?>" value="<?php echo $title; ?>"></td></tr>
<tr><td><input type="hidden" name="price<?php echo $i; ?>" value="<?php echo $price; ?>"></td></tr>
<tr><td><input type="hidden" name="plu<?php echo $i; ?>" value="<?php echo $plu; ?>"> </td></tr>
<?php
}
?>
Now if users can remove rows, I know I can tell exactly how many rows there are, but when it comes time to read them and save them in order I'm lost.
I'm not sure you're guaranteed to get them in order based on location on the page, but since you can name the elements yourself, you could name them title[1], title[2], ...
For example:
<input type="hidden" name="title[1]" value="foo">
...
<input type="hidden" name="title[2]" value="bar">
This will allow you to access the submitted elements in PHP by, for example:
$_POST['title'][1], $_POST['title'][2], etc.
You can use only one or two (for title and price) hidden input rather separate inputs for each values...all you need to do is use some special characters like ';','#' as a delemeter to seperate each values.. and when user delete the row just remove that value from the entire string....you can do it easily using javascript..
so ultimately you will have to submit only one (or two) hidden values...