[英]set readonly property to false for an html text input on clicking on Edit
I need to set readonly false when i click on Edit and when i click on edit button should change to save button.当我单击“编辑”时,我需要将 readonly 设置为 false,当我单击“编辑”按钮时,应更改为“保存”按钮。 i made two input box type="submit".
我做了两个输入框类型=“提交”。 i need to make all the fields editable when i click on edit.
当我单击编辑时,我需要使所有字段都可编辑。 please help me to find out the answer.
请帮我找出答案。
<form role="form" data-toggle="validator" method="post">
<div class="container padd bpadd">
<?php if(isset($account_list)){ print_r($account_list);exit;
}?>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<!-- Name -->
<div class="form-group">
<div class="form-item">
<input type="text" name="RMName" value="<?= isset($accountList['name']) ? $accountList['name'] : '' ?>" id="inputName" readonly="readonly" class="readonlyinput"/>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-item">
<div class="form-group">
<input type="email" id="inputEmail" name="inputEmail" value="<?= isset($accountList['email']) ? $accountList['email'] : '' ?>" readonly="readonly" class="readonlyinput" />
</div>
</div>
</div>
<!--
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-item">
<div class="form-group">
<input type="password" name="password"value="<?= isset($accountList['password']) ? $accountList['password'] : '' ?>" id="InputPassword" readonly="readonly" />
</div>
</div>
</div>
-->
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-item">
<div class="form-group">
<input type="text" name="dob" value="<?= isset($accountList['dob']) ? $accountList['dob'] : '' ?>" id="InputDob" readonly="readonly" class="readonlyinput"/>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-item">
<div class="form-group">
<input name="Phone" type="text" id="InputNumber" value="<?= isset($accountList['phone_number']) ? $accountList['phone_number'] : '' ?>" readonly="readonly" class="readonlyinput"/>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<!-- Name -->
<div class="form-group">
<div class="form-item">
<input type="text" name="OrgName" value="<?= isset($accountList['organisation']) ? $accountList['organisation'] : '' ?>" id="InputOrgName" readonly="readonly" class="readonlyinput"/>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<!-- Name -->
<div class="form-group">
<div class="form-item">
<input type="text" name="OrgId" value="<?= isset($accountList['organisation_id']) ? $accountList['organisation_id'] : '' ?>" id="InputOrgId" readonly="readonly" class="readonlyinput"/>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="form-item">
<div class="form-group">
<input type="text" name="City" value="<?= isset($accountList['city']) ? $accountList['city'] : '' ?>" id="InputCity" readonly="readonly" class="readonlyinput" />
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="form-item">
<div class="form-group">
<input type="text" name="State" value="<?= isset($accountList['state']) ? $accountList['state'] : '' ?>" id="InputState" readonly="readonly" class="readonlyinput" />
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="form-item">
<div class="form-group">
<input type="text" name="Country" value="<?= isset($accountList['country']) ? $accountList['country'] : '' ?>" id="InputCountry" readonly="readonly" class="readonlyinput" />
</div>
</div>
</div>
</div>
</div>
<div class="bbutton">
<footer class="footer text-center">
<div class="button-panel">
<div class="bbutton">
<input type="submit" class="button" title="Edit" value="EDIT" onclick="inputToggle()"/>
<a><input type="submit" class="button" title="Save" value="SAVE" hidden="hidden"/></a>
</div>
</div>
</footer>
</div>
</form>
</div>
<script>
function inputToggle()
{
}
</script>
Use this function.使用此功能。 Suppoesing
.edit
class of edit button假设
.edit
类的编辑按钮
$('.edit').on('click', function(){
$('input').prop('readonly',true);
});
But don't set this property initially
但是不要一开始就设置这个属性
Use .prop
to toggle readonly
property of the :input
elements.使用
.prop
切换:input
元素的readonly
属性。
Also note, e.preventDefault()
as submit
button will submit and relaod
the form.另外值得注意,
e.preventDefault()
作为submit
按钮将提交和relaod
形式。
var edit = true; function inputToggle(e) { e.preventDefault(); $(':input').prop('readonly', edit = !edit); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <form role="form" data-toggle="validator" method="post"> <div class="container padd bpadd"> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12"> <!-- Name --> <div class="form-group"> <div class="form-item"> <input type="text" name="RMName" value="" id="inputName" readonly="readonly" class="readonlyinput" /> </div> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="form-item"> <div class="form-group"> <input type="email" id="inputEmail" name="inputEmail" value="" readonly="readonly" class="readonlyinput" /> </div> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="form-item"> <div class="form-group"> <input type="text" name="dob" value="" id="InputDob" readonly="readonly" class="readonlyinput" /> </div> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="form-item"> <div class="form-group"> <input name="Phone" type="text" id="InputNumber" value="" readonly="readonly" class="readonlyinput" /> </div> </div> </div> <div class="col-md-12 col-sm-12 col-xs-12"> <!-- Name --> <div class="form-group"> <div class="form-item"> <input type="text" name="OrgName" value="" id="InputOrgName" readonly="readonly" class="readonlyinput" /> </div> </div> </div> <div class="col-md-12 col-sm-12 col-xs-12"> <!-- Name --> <div class="form-group"> <div class="form-item"> <input type="text" name="OrgId" value="" id="InputOrgId" readonly="readonly" class="readonlyinput" /> </div> </div> </div> <div class="col-md-6 col-sm-6 col-xs-6"> <div class="form-item"> <div class="form-group"> <input type="text" name="City" value="" id="InputCity" readonly="readonly" class="readonlyinput" /> </div> </div> </div> <div class="col-md-6 col-sm-6 col-xs-6"> <div class="form-item"> <div class="form-group"> <input type="text" name="State" value="" id="InputState" readonly="readonly" class="readonlyinput" /> </div> </div> </div> <div class="col-md-6 col-sm-6 col-xs-6"> <div class="form-item"> <div class="form-group"> <input type="text" name="Country" value="" id="InputCountry" readonly="readonly" class="readonlyinput" /> </div> </div> </div> </div> </div> <div class="bbutton"> <footer class="footer text-center"> <div class="button-panel"> <div class="bbutton"> <input type="submit" class="button" title="Edit" value="EDIT" onclick="inputToggle(event)" /> <a> <input type="submit" class="button" title="Save" value="SAVE" hidden="hidden" /> </a> </div> </div> </footer> </div> </form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.