Develop Reference

How to get either select .val() or div .text() from dynamically created elements with same id?

Depending on the user type, my page dynamically creates either a select element (for admins to change) or a div with text (for regular users) using the same id.
if ($user_type == 'admin') {
echo "<tr><td>Type:</td><td><select id='type' >";
echo "<option value='student' >student</option><option value='teacher' >teacher</option>";
echo "</select></td></tr>";
}
else echo "<tr><td>Type:</td><td><div id='type'>" . $user_type . "</div></td></tr>";
When the page submits, I need either the .val() from the select element or the .text() from the div element.
I can't use .val() on the div element and I can't use .text() on the select element.
Is there a way in jQuery / javascript to get one or the other, depending on which element type was created?

make the else statement as so (use input[type=hidden], to use the .val())
else echo
"<tr>
<td>Type:</td>
<td>
<!-- div to show the value -->
<div>$user_type</div>
<!-- hidden input type to get the value via jQuery .val() -->
<input type='hidden' id='type' value='$user_type'>
</td>
</tr>";
Oh by the way, you can use PHP variables inside strings that are defined with double quotes echo "$someVar";

Since you are printing out from PHP the HTML out put, by the same time you can print a Javascript variable who has what method use to get the value/text. Then, use the variable in your Javascript to perform one query or other.
Something like :
if ($user_type == 'admin') {
echo "<tr><td>Type:</td><td><select id='type' >";
echo "<option value='student' >student</option><option value='teacher'>teacher</option>";
echo "</select></td></tr>";
echo "<script> var method = 'val'</script>";
}
else
{
echo "<tr><td>Type:</td><td><div id='type'>" . $user_type . "</div></td></tr>";
echo "<script> var method = 'text'</script>";
}

You can check it with the following simple code in javascript:
if(document.getElementById("type").tagName == "SELECT") {
//Your code for admin
}
else
{
//Your code if it is not admin
}

You can have the text or the value with a simple and elegant ternary condition :
var result = $("#type").val() !== undefined ? $("#type").val() : $("#type").text();

Passing values from a php generated table to modal

I got a table generated in PHP:
<tbody>
<?php
$results = DB::select()->from('users')->execute();
foreach ($results as $user) {
echo "<tr id='".$user['id']."'>
<input type=\"hidden\" id='userNameHidden' value='".$user['username']."'>
<input type=\"hidden\" id='userEmailHidden' value='".$user['email']."'>
<td class='username'>".$user['username']."</td><td class='email'>".$user['email']."</td><td class='lastlogin'>".date('d/m/Y',$user['last_login'])."</td><td class='logins'>".$user['logins']."</td><td><a class='editThis'><i class=\"small material-icons\">mode_edit</i></a> delete</i> </td></tr>";
}
?>
My question is, how to make the edit/delete buttons work on a modal that is opened on the same site? I just want to pass values from <td> to <input type="text"> on the modal.

You can send it with GET or POST method to another php file and than work with them there. If you want to work on the same page you can get it via JavaScript:
var value = document.getElementById ( "userNameHidden" ).innerText;
After that:
document.getElementById ( "inputid" ).value = value;
If you would like to create a login system definately use POST or GET (not recommended) to pass the values.
If you want it to happen with a button click. You can make a funcion and a button to go with it:
<button onclick="delete()">Delete</button>
And the js:
function delete(){
var value = document.getElementById ( "userNameHidden" ).innerText;
document.getElementById ( "inputid" ).value = value;
}

Using Javascript to pass an input value as a variable

I'm using JavaScript to try and pass the value of a hidden input field as a variable into the url path below, but when I inspect the code, I'm seeing 'undefined' where I want the variable to be.
I would really like to get this issue solved. Any idea why the value is 'undefined' instead of the value of the hidden input field?
var userID = "";
userID = $('#userID').val();
document.write("<input type='hidden' id='userID'>");
document.write("<a href='http://sample/folder/" + userID + "/Documents/Forms/All.aspx'><li>test</li></a>");

Your javascript can't find the value because your html is not created.
Try to create it, before getting the value.
document.write("<input type='hidden' id='userID' value='user1234'>");
var userID = "";
userID = $('#userID').val();
console.log(userID);
document.write("<a href='http://sample/folder/" + userID + "/Documents/Forms/All.aspx'><li>test</li></a>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You're getting undefined because the input field doesn't have any value. Make sure you set a default value to the field so that even if nothing is entered into the field, you can still extract a value.
<input type='hidden' id='userID' value="defaultText"/>
Reference (JSFiddle): https://jsfiddle.net/e7zkhhny/
Side-note: It's usually a good idea to put a placeholder on an input field.

You're trying to retrieve a value from an element that does not yet exist on the page. It will exist only after this statement runs document.write("<input type='hidden' id='userID'>");
To work around this,
1) Make sure that the javascript runs only after the hml loads using a $( document ).ready(function() {
$( document ).ready(function() {
var userID = ""
userID = $('#userID').val();
$('#link').attr("href", "http://sample/folder/" + userID + "/Documents/Forms/All.aspx");
}
2) Place the following html on your site:
<input type='hidden' id='userID' value="0">
<a id='link' href=''><li>test</li></a>

Clear or Delete file from textField

I am working with PHP's Yii framework and having issues clearing or deleting the uploaded file from the textfield. Currently, it will delete the content from the fileField, but can't get it to delete the textfield. Any ideas?
UPDATE
I can now clear my textField because I've hard coded my clearFileInputField function by adding $('.getFile').val(""); I reference this in my HTML by adding the 'class' => 'getName' in the input section. While this clears the data, it doesn't remove the file after saving. Any suggestions?
HTML
<div id = "clearContent">
<?php echo $form->labelex($model,'info'); ?>
<?php echo $form->textfield($model,'info', array(placeholder => "No file chosen", readonly => true, 'class' => 'getName')); ?><br>
<?php echo $form->fileField($model,'info'); ?>
<?php echo $form->error($model,'info'); ?>
<input type="checkbox" onclick = "clearFileInputField('clearContent')" href="javascript:noAction();"> Remove File
</div>
JavaScript:
<script>
function clearFileInputField(tagId) {
document.getElementById(tagId).innerHTML = document.getElementById(tagId).innerHTML;
$('.getFile').val("");
}
</script>

I am not sure if I understood the problem you are having correctly. If I understood the question completely wrong, please elaborate and I will try to improve my answer.
If you want to remove the the content (the value attribute) of a text and file input you can use code like the following:
// listen to the click on the #clearnbtn element
document.getElementById('clearbtn').addEventListener('click', function() {
// Remove the value of the #foo and #bar elements
document.getElementById('foo').value = "";
document.getElementById('bar').value = "";
});
If you would like to remove an entire field you can do that like so:
// Retrieves the input element, gets its parents and removes itself from it
var fooElement = document.getElementById('foo');
fooElement.parentElement.removeChild(fooElement)
Or you can set the innerHTML attribute of the parent element to an empty string ('').
document.getElementById('clearContent').innerHTML = "";
https://jsfiddle.net/osjk7umh/1/

Jquery Ajax couldn't get the current focused input element

I have form that has two kinds of input field, 1) input field for ID, 2) input field for name. I already have a mysql database with a table filled with ID and name data. What I want to do is when I type an ID number in the input field for ID, and when it loses focus, the jquery script will automatically fill the input field for name according to the ID number in the database.
So my html input form is something like this:
html :
<input type='text' name='id' class='input_id'>
<input type='text' name='name' class='input_name'>
<br>
<input type='text' name='id'>
<input type='text' name='name'>
jquery script:
$(document).ready(function) {
$('.input_id').blur(function() {
$.post('search_name.php',
{
id: $('.input_id').val()
},
function(data) {
$('.input_name').val(data);
});
});
});
php (search_name.php) code :
<?php
$con = mysqli_connect('localhost','root','','database');
$id = $_POST['id'];
$sql = "SELECT * FROM table WHERE id='$id'";
$query = mysqli_query($con, $sql);
$result = mysqli_fetch_array($query);
$name = $result['name'];
echo $name;
mysqli_close($con);
?>
The problem is in one form, I will have 20 rows of ID and name input field, how do I modify my jquery script so that when ID input field in row 1 loses focus, it will only auto-fill name input field in row 1, the one in row 2 will only auto-fill name input field in row 2 and so on, rather than writing the same script 20 times.
I tried using traversing method such as (this) and (next), but I could not seem to get it working. I also tried using (:focus) method too, I am not sure whether I use it wrongly or it is not meant for this.
All suggestions are welcomed.
Thx in advance.

Assuming they are siblings, use this and next()
$('.input_id').blur(function() {
var inp = $(this);
$.post('search_name.php',
{
id: inp.val()
},
function(data) {
inp.next('.input_name').val(data);
});
});