使用jquery更改html元素的整个字段

Question

是否有可能使用jQuery改变整个input领域

<input type="file" id="dok_npwp_link" class="upload required" name="dok_npwp_link" accept="image/*" />

对此

<input id ="dok_npwp_link" type="hidden" name="dok_npwp_link">

从我在jquery手册中读到的内容，我可以更改类型，值等，如何更改整个字段的上下文，因为我是javascript的新手，我还没有找到解决方案。

Answer 1

在jQuery中，您可以更改属性

---

示例：将类型从hidden更改为file并添加属性accept

$(function() {
  $("#dok_npwp_link").attr("type", "file"); /* Changing type to file */
  $("#dok_npwp_link").attr("accept", "image/*"); /* Adding attr accept */
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="dok_npwp_link" type="hidden" name="dok_npwp_link">

示例:(反向）将类型从file更改为hidden并删除属性accept

$(function(){
	$("#dok_npwp_link").attr("type", "hidden"); /* Changing type to hidden */
	$("#dok_npwp_link").removeAttr("accept"); /* Removing attr accept */
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" id="dok_npwp_link" class="upload required" name="dok_npwp_link" accept="image/*" />

Doc：.attr()，.removeAttr()

Answer 2

type和value是输入字段的属性。要使用jQuery更改这些，您可以使用.attr()方法。

$("#dok_npwp_link").attr({
  type: "hidden",
  value: "some value"
})

// To verify the value
console.log($("#dok_npwp_link").val());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="dok_npwp_link" class="upload required" name="dok_npwp_link" accept="image/*" /><br>

Answer 3

你不能在JavaScript中使用PHP代码。

您可以从js或jquery更改所有属性。

像这样=>

$('input-field').attr('type',"value");
$('input-field').attr('name',"value");
$('input-field').val("value");

删除属性：

$('input').removeAttr('attribute-name');