CODEWITHSUNDEEP
jqueryhtml
fahmi hammadi
fahmi hammadi

Reputation: 78

change whole field of html element using jquery

Is it possible to change the whole field of input using jQuery from this

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

to this

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

from what I read in jquery manual I can change type, value etc how about change the whole context of field, since I'm new to javascript I don't find the solution yet.

Upvotes: 1

Views: 49

Answers (3)

Eddie
Eddie

Reputation: 26844

in jQuery you can change the attribute by

Example: Changing type from hidden to file and adding attribute 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">

Example: (On reverse) Changing type from file to hidden and removing attribute 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()

Upvotes: 1

Abasaheb Gaware
Abasaheb Gaware

Reputation: 547

You can't use php code in javascript.

You can change all attributes from js or jquery.

Like this=>

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

to remove attributes:

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

Upvotes: 0

void
void

Reputation: 36703

type and value are attributes on the input fields. And to change these using jQuery you can use .attr() method.

$("#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>

Upvotes: 1

Related Questions