如何从具有相同ID的动态创建的元素中选择.val（）或div .text（）？

Question

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?

Answer 1

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";

Answer 2

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>";
}

Answer 3

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
}

Answer 4

You can use $(selector).prop('tagName') to get the name of the tag and use .val() or .text() accordingly. You can also use document.getElementById(id).nodeName in pure Javascript.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="test"></select> <script> console.log($('#test').prop('tagName')); console.log(document.getElementById('test').nodeName); </script> 

You could also use a ternary operator to check if the value is undefined before assigning the value to a variable.

var value = $('#type').val()!==undefined?$('#type').val():$('#type').text();

Demo:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="createTag"> <option value="select">Select</option> <option value="div">Div</option> </select> <br/> <input type="text" placeholder="Enter value or text or element" id="val"/> <br/> <button onClick="createTag()">Create Tag</button> <button onClick="getValueOfType()">Get Value</button> <p/> <script> function createTag(){ var tag = $('#createTag').val(); $('#type').remove(); var elem = document.createElement(tag); var val = $('#val').val(); if(tag=="select"){ elem.innerHTML = "<option value='"+val+"' selected>"+val+"</option>"; } else { elem.textContent = val; } elem.id = "type"; document.body.appendChild(elem); } function getValueOfType(){ var elem = $('#type'); if(!elem.length){ alert("No element created yet."); } else { if(elem.prop('tagName')=="SELECT"){ alert(elem.val()); } else { alert(elem.text()); } } } </script> 

Answer 5

您可以使用简单优雅的三元条件获取文本或值：

var result = $("#type").val() !== undefined ? $("#type").val() : $("#type").text();