Actually I want to enable the input text by clicking on edit button and if I click again on that edit button, the input text should be in disable mode. I am able to enable but how to disable. here is my code:
<script>
function toggle(){
document.getElementById("Name").disabled = false;
document.getElementById("email").disabled = false;
document.getElementById("contact").disabled = false;
}
</script>
<form>
<input type="text" class="form-control"
name="name" id="Name" maxlength="30" value="<?=$name; ?>" disabled/>
<input type="text" class="form-control" name="pan" id="pan" value="<?=$pan; ?>" disabled />
<input type="email" class="form-control" name="mail" id="email" value="<?=$email; ?>" disabled />
<input type="number" class="form-control" name="mobile" id="contact" maxlength="10" value="<?=$mobile; ?>" disabled />
<input type="button" name="edit" id="edt" class="btn btn-primary btn-lg btn-block login-button" value="Edit"
onclick="toggle()" >
</form>
please suggest what i have to make changes in the code.
To achieve this you simply need to invert the current value of the disabled property on the required elements. To do that, use the ! operator before the current setting, like this:
function toggle() {
document.getElementById("Name").disabled = !document.getElementById("Name").disabled;
document.getElementById("pan").disabled = !document.getElementById("pan").disabled;
document.getElementById("email").disabled = !document.getElementById("email").disabled;
document.getElementById("contact").disabled = !document.getElementById("contact").disabled;
}
<form>
<input type="text" class="form-control" name="name" id="Name" maxlength="30" value="<?= $name; ?>" disabled/>
<input type="text" class="form-control" name="pan" id="pan" value="<?= $pan; ?>" disabled />
<input type="email" class="form-control" name="mail" id="email" value="<?= $email; ?>" disabled />
<input type="number" class="form-control" name="mobile" id="contact" maxlength="10" value="<?= $mobile; ?>" disabled />
<input type="button" name="edit" id="edt" class="btn btn-primary btn-lg btn-block login-button" value="Edit" onclick="toggle()">
</form>
<button value="false"></button>
$('#btn_pause_resume').click(function () {
if ($(this).data('value')==='false') {
alert('Resumed...');
$(this).data('value', 'true');
} else {
alert('Paused...');
$(this).data('value', 'false');
}
});
try this out you should get the idea
You can try it this way. Ask if the element is disabled or not and then set the disabled value based on that.
function toggle() {
document.getElementById("Name").disabled = document.getElementById("Name").disabled ? false : true;
document.getElementById("email").disabled = document.getElementById("email").disabled ? false : true;
document.getElementById("contact").disabled = document.getElementById("contact").disabled ? false : true;
document.getElementById("pan").disabled = document.getElementById("pan").disabled ? false : true;
}
<input type="text" class="form-control" name="name" id="Name" maxlength="30" value="<?=$name; ?>" disabled/>
<input type="text" class="form-control" name="pan" id="pan" value="<?=$pan; ?>" disabled />
<input type="email" class="form-control" name="mail" id="email" value="<?=$email; ?>" disabled />
<input type="number" class="form-control" name="mobile" id="contact" maxlength="10" value="<?=$mobile; ?>" disabled />
<input type="button" name="edit" id="edt" class="btn btn-primary btn-lg btn-block login-button" value="Edit" onclick="toggle()">
function toggle() {
var enable = (this.disabled);
document.getElementById("Name").disabled = enable;
document.getElementById("pan").disabled = enable
document.getElementById("email").disabled = enable;
document.getElementById("contact").disabled = enable;
};
<input type="text" class="form-control" name="name" id="Name" maxlength="30" value="<?=$name; ?>" disabled/>
<input type="text" class="form-control" name="pan" id="pan" value="<?=$pan; ?>" disabled />
<input type="email" class="form-control" name="mail" id="email" value="<?=$email; ?>" disabled />
<input type="number" class="form-control" name="mobile" id="contact" maxlength="10" value="<?=$mobile; ?>" disabled />
<input type="button" name="edit" id="edt" class="btn btn-primary btn-lg btn-block login-button" value="Edit" onclick="toggle()">
Related
How to disable require in inputs with name = "item_name",name="description" and name="quantity" when i click purpose and enable the require in purpose textarea by using javascript.
Edit: What I really mean is when i submit the form by clicking ADD, only the input with name item_name description quantity are required and When I submit the form by clicking Purpose, the textarea will be the one who is required
Here is my code:
<form action="../function/add_item.php" method="post">
<input id="autocomplete" name="item_name" placeholder="Item Name" required>
<input type="text" name="description" placeholder="Description placeholder="Quantity"" required>
<input type="number" name="quantity" required>
<button name="submit" type="submit" class="btn btn-default">ADD</button>
<textarea placeholder="Purpose (e.g. Office Use)" name="purpose" required></textarea>
<button name="purpose" type="submit" class="btn btn-info">Purpose</button>
</form>
I assume this is the code you might be looking for:
$(function() {
$('[type=submit]').on('click', function() {
if($(this).attr('name') == 'submit') {
$('[name=item_name], [name=description], [name=quantity]').attr('required', 'required');
$('[name=purpose]').removeAttr('required');
} else if($(this).attr('name') == 'purpose') {
$('[name=purpose]').attr('required', 'required');
$('[name=item_name], [name=description], [name=quantity]').removeAttr('required');
}
});
});
Add an id to your button
<button id="purpose" type="submit" class="btn btn-info">Purpose</button>
Then
$(function() {
$('#purpose').click(function() {
$('#item_name').removeAttr('required');
$('#description').removeAttr('required');
$('#quantity').removeAttr('required');
$('textarea').attr('required','1');
});
});
Try this one. I just added up some javascript and add id's
document.getElementById('purpose').onclick = function() {
document.getElementById("name").required=false;
document.getElementById("des").required=false;
document.getElementById("qnt").required=false;
}
<form action="../function/add_item.php" method="post">
<input id="name" name="item_name" placeholder="Item Name" required>
<input id="des" type="text" name="description" placeholder="Description placeholder="Quantity"" required>
<input id="qnt" type="number" name="quantity" required>
<button name="submit" type="submit" class="btn btn-default">ADD</button>
<textarea placeholder="Purpose (e.g. Office Use)" name="purpose" required></textarea>
<button id="purpose" name="purpose" type="submit" class="btn btn-info">Purpose</button>
</form>
I'm stuck on part of my project where user should just keep filling the form and new lines should be added automatically when user focused on last input in the form. I'm not forged in JS/jQ so maybe one of you could help me... It is working but still just from the 1st line, not from the duplicated ones. Thanks is advance
<form class="form-inline" method="post" action="loadin.php">
<!-- form header -->
<hr>
<div class="form-group">
<select class="form-control" name="vendor" id="vendor">
<?php
foreach($vendors_ as $v){
echo"<option value='".$v['ID']."'>".ucfirst($v['name'])."</option>";
}
?>
</select>
<input type="text" class="form-control" name="invoice" id="invoice" placeholder="Faktrura">
<input type="text" class="form-control" name="date" id="date" placeholder="Datum" value="<?php echo date("Y-m-d") ?>">
<button type="submit" name="LoadItems" class="btn btn-default"><i class="fa fa-check" aria-hidden="true"></i> Nahrát</button>
</div>
<hr>
<!-- form lines -->
<div class="duplicate" style="margin-bottom: 5px;">
<div class="form-group">
<input type="hidden" class="form-control cleanVal" name="row[]" id="row">
<select class="form-control" name="category[]" id="category">
<?php
foreach($types_ as $t){
echo"<option value='".$t['ID']."'>".ucfirst($t['name'])."</option>";
}
?>
</select>
<input type="text" class="form-control cleanVal" name="item[]" id="item" placeholder="Položka">
<input type="text" class="form-control cleanVal" name="package[]" id="package" placeholder="Balení">
<input type="text" class="form-control cleanVal" name="amount[]" id="amount" placeholder="Množství">
<input type="text" class="form-control cleanVal" name="price[]" id="price" placeholder="Cena">
<input type="text" class="form-control cleanVal" name="atest[]" id="atest" placeholder="Atest">
<input type="text" class="form-control cleanVal" name="batch[]" id="batch" placeholder="Sarže">
<input type="text" class="form-control cleanVal" name="expire[]" id="expire" placeholder="Expirace" style="width:80px">
<input type="text" class="form-control cleanVal x" name="vat[]" id="vat" placeholder="DPH" style="width:45px">
</div>
</div>
</form>
$(".duplicate:last input").focus(function() {
count++;
var $clone = $('.duplicate:last').clone();
$clone.find("input,select").each(function(){
$(this).attr({
id: $(this).attr("id") + count,
});
});
$("form").append($clone);
$(".duplicate:last .cleanVal").val('');
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
As last element is being changed every time new elements are appended, listen the event on the parent body or any other fixed parent.
var count = 0;
$('body').on('focus', ".duplicate:last input", function() {
count++;
var $clone = $('.duplicate:last').clone();
$clone.find("input,select").each(function() {
$(this).attr({
id: $(this).attr("id") + count,
});
});
$("form").append($clone);
$(".duplicate:last .cleanVal").val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form class="form-inline" method="post" action="loadin.php">
<hr>
<div class="form-group">
<select class="form-control" name="vendor" id="vendor">
</select>
<input type="text" class="form-control" name="invoice" id="invoice" placeholder="Faktrura">
<input type="text" class="form-control" name="date" id="date" placeholder="Datum" value="">
<button type="submit" name="LoadItems" class="btn btn-default"><i class="fa fa-check" aria-hidden="true"></i> Nahrát</button>
</div>
<hr>
<div class="duplicate" style="margin-bottom: 5px;">
<div class="form-group">
<input type="hidden" class="form-control cleanVal" name="row[]" id="row">
<select class="form-control" name="category[]" id="category">
</select>
<input type="text" class="form-control cleanVal" name="item[]" id="item" placeholder="Položka">
<input type="text" class="form-control cleanVal" name="package[]" id="package" placeholder="Balení">
<input type="text" class="form-control cleanVal" name="amount[]" id="amount" placeholder="Množství">
<input type="text" class="form-control cleanVal" name="price[]" id="price" placeholder="Cena">
<input type="text" class="form-control cleanVal" name="atest[]" id="atest" placeholder="Atest">
<input type="text" class="form-control cleanVal" name="batch[]" id="batch" placeholder="Sarže">
<input type="text" class="form-control cleanVal" name="expire[]" id="expire" placeholder="Expirace" style="width:80px">
<input type="text" class="form-control cleanVal x" name="vat[]" id="vat" placeholder="DPH" style="width:45px">
</div>
</div>
</form>
Fiddle Demo
You must define your focus event as bellow:
$('body').on('focus', ".duplicate:last input", function() {
// codes here
}
i have a situation here , where i have a form in which i have some similar rows and when i submit the form , i want the quantity value to be displayed which was initial , it is returning the initial value of only first row , i know it will do so , but not sure of the solution
html code :
<form class="editcart" method="post" action="">
<input type="text" class="pid" name="pid" value="${product.pid}" hidden/>
<input type="text" class="spid" name="spid" value="${product.sub_pid}" hidden/>
<input type="text" class="cartid" name="cartid" value="${product.cart_id}" hidden/>
<input type="text" class="quantity" name="quantity" value="20" readonly="readOnly"/>
<input type="button" value="Edit" class="enable"/>
<input type="submit" value="Save" class="save" hidden/>
<input type="text" class="pid" name="pid" value="${product.pid}" hidden/>
<input type="text" class="spid" name="spid" value="${product.sub_pid}" hidden/>
<input type="text" class="cartid" name="cartid" value="${product.cart_id}" hidden/>
<input type="text" class="quantity" name="quantity" value="5" readonly="readOnly"/>
<input type="button" value="Edit" class="enable"/>
<input type="submit" value="Save" class="save" hidden/>
<input type="text" class="pid" name="pid" value="${product.pid}" hidden/>
<input type="text" class="spid" name="spid" value="${product.sub_pid}" hidden/>
<input type="text" class="cartid" name="cartid" value="${product.cart_id}" hidden/>
<input type="text" class="quantity" name="quantity" value="4" readonly="readOnly"/>
<input type="button" value="Edit" class="enable"/>
<input type="submit" value="Save" class="save" hidden/>
</form>
and jquery code is :
$(document).ready(function(){
var init = $('.quantity',this).val();
$('.enable').click(function(){
$(this).prev('.quantity').prop('readOnly',false);
$(this).hide();
$(this).next('.save').fadeIn();
});
$('.editcart').submit(function() {
var quant = $('.quantity',this).val();
var pid = $('.pid',this).val();
var spid = $('.spid',this).val();
var cartid = $('.cartid',this).val();
alert("the init value is : "+init);
return false;
});
});
fiddle
try this:-
var init =0;
$('.quantity',this).each(function(){
init+=parseInt($(this).val());
});
Since you want the value of clicked row use this code:-
$('.save').click(function(){
init=$(this).prev().prev('.quantity').val();
});
Demo
Demo 1
I have a form with the ten text boxes. I have a submit button too. I would like to clear, two text box in row on click of a button in html.
Below is the screen shot:
:
CODE:
<form action="store_number.php" method="POST" name="myform" class="addform" div id="container" enctype="multipart/form-data">
<fieldset>
<legend>Number Details</legend><br>
<div class="fieldwrapper">
<div class="thefield">
<input type="text" class="hint" id="name1" onkeypress='validate1(event)' value="<?php echo $namearray[0];?>" onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }" onblur="if (this.value == '') { this.className = 'hint'; this.value = '<?php echo $namearray[0];?>';}" size="25" name="name1" maxlength="30"/> <input type="text" onkeypress='validate(event)' class="hint" id="number1" value="<?php echo $numberarray[0];?>" onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }" onblur="if (this.value == '') { this.className = 'hint'; this.value = '<?php echo $numberarray[0];?>';}" size="20" name="number1" maxlength="10"/> <img src="img/clear.png" width="24" height="24"></a> </div>
</div>
</fieldset>
<p align="center">
<div class="buttonsdiv">
<p align="center">
<input type="submit" value="Submit" name="submit" id="submit" class="button1" />
</div>
</form>
When I click on the red cross button for a particular row, I would like get to name and number textbox to have value Name and Number.
I tried to submit button button but then it is clashing with the FORM. Reset doesn't work too.
How do I achieve this?
It's hard to tell without the actual HTML, but assuming your code looks something like this:
<div>
<input type="text"><input type="text"><button>X</button>
</div>
You'll probably want to add a listener <button onclick="clearRow(this)"> and a JS function to clear the input fields:
function clearRow(button) {
var inputs = button.parentNode.getElementsByTagName('INPUT');
inputs[0].value = 'Name';
inputs[1].value = 'Number';
}
Edit: You added your HTML code. Just attach the listener to your <img> tag.
Edit2: I can't seem to find the beginning of that <a> tag in that one long line. You may have to adapt the first line of clearRow to account for further nesting of the "X button".
Here is a proof of concept, even though it's rather ugly and bloated, it gets the job done.
There are prettier ways to solve this, but this one should be easy to understand:
Example: http://codepen.io/anon/pen/JKtmh
<input type="text" id="1a" value="Name"/><input type="text" id="1b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('1a').value!='Name') || (document.getElementById('1b').value!='Number')) {((document.getElementById('1a').value='Name') && (document.getElementById('1b').value='Number'))};"/><br/>
<input type="text" id="2a" value="Name"/><input type="text" id="2b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('2a').value!='Name') || (document.getElementById('2b').value!='Number')) {((document.getElementById('2a').value='Name') && (document.getElementById('2b').value='Number'))};"/><br/>
<input type="text" id="3a" value="Name"/><input type="text" id="3b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('3a').value!='Name') || (document.getElementById('3b').value!='Number')) {((document.getElementById('3a').value='Name') && (document.getElementById('3b').value='Number'))};"/><br/>
<input type="text" id="4a" value="Name"/><input type="text" id="4b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('4a').value!='Name') || (document.getElementById('4b').value!='Number')) {((document.getElementById('4a').value='Name') && (document.getElementById('4b').value='Number'))};"/><br/>
<input type="text" id="5a" value="Name"/><input type="text" id="5b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('5a').value!='Name') || (document.getElementById('5b').value!='Number')) {((document.getElementById('5a').value='Name') && (document.getElementById('5b').value='Number'))};"/><br/>
<input type="text" id="6a" value="Name"/><input type="text" id="6b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('6a').value!='Name') || (document.getElementById('6b').value!='Number')) {((document.getElementById('6a').value='Name') && (document.getElementById('6b').value='Number'))};"/><br/>
<input type="text" id="7a" value="Name"/><input type="text" id="7b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('7a').value!='Name') || (document.getElementById('7b').value!='Number')) {((document.getElementById('7a').value='Name') && (document.getElementById('7b').value='Number'))};"/><br/>
<input type="text" id="8a" value="Name"/><input type="text" id="8b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('8a').value!='Name') || (document.getElementById('8b').value!='Number')) {((document.getElementById('8a').value='Name') && (document.getElementById('8b').value='Number'))};"/><br/>
<input type="text" id="9a" value="Name"/><input type="text" id="9b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('9a').value!='Name') || (document.getElementById('9b').value!='Number')) {((document.getElementById('9a').value='Name') && (document.getElementById('9b').value='Number'))};"/><br/>
<input type="text" id="10a" value="Name"/><input type="text" id="10b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('10a').value!='Name') || (document.getElementById('10b').value!='Number')) {((document.getElementById('10a').value='Name') && (document.getElementById('10b').value='Number'))};"/>
PS: You should use an ID that doesn't start with a number. HTML validators may not like it.
Assumin that your HTML is something like that :
<form>
<div class="row">
<input type="text" name="name-1" class="nameInput">
<input type="text" name="number-1" class="numberInput">
<button class="cross"> X </button>
</div>
<div class="row">
<input type="text" name="name-1" class="nameInput">
<input type="text" name="number-1" class="numberInput">
<button class="cross"> X </button>
</div>
</form>
If you want to use jQuery; this will do the job :
$(document).ready(function(){
$('button.cross').click(function(){
var $parent = $(this).parent('dv');
$parent.find('input.nameInput').val('Name');
$parent.find('input.numberInput').val('Number');
})
});
I have an HTML form and a button which when the user clicks will check whether or not the form is filled. The details for billing address is input from database using php
<button id="btnConfirm" type="submit" onclick="validate()"style="float: right" value="Confirm Payment" >Confirm Payment</button>
<form id="au" name="paymentform" method="post" action="" >
<fieldset class="billing">
<legend>Billing Details</legend>
<br />
<label class="reglabel" for="fname">First Name:</label>
<input id="fname" name="billingfname" required="" type="text" value="<?php echo $fname ?>" /><br />
<label class="reglabel" for="lname">Last Name:</label>
<input id="lname" name="billinglname" required="" type="text" value="<?php echo $lname ?>" /><br />
<label class="reglabel" for="address">Address:</label>
<input id="address" name="billingaddress" required="" type="text" value="<?php echo $address ?>" /><br />
<label class="reglabel" for="town">Town:</label>
<input id="town" name="billingtown" required="" type="text" value="<?php echo $town ?>" /><br />
<label class="reglabel" for="postcode">Post Code:</label>
<input id="postcode" name="billingpostcode" required="" type="text" value="<?php echo $postcode ?>" /><br />
<label class="reglabel" for="phone">Phone:</label>
<input id="phone" name="billingphone" required="" type="text" value="<?php echo $phone ?>" /><br />
<label id="EmailLabel" class="reglabel" for="email">E-mail:</label>
<input id="email" name="billingemail" required="" type="email" value="<?php echo $email ?>" /><br />
</fieldset>
<fieldset class="shipping">
<legend>Shipping Details</legend>
<br />
<input name="shippingsame" onclick="fillShipping(this.form)" type="checkbox">Check
this box if billing address and shipping address are the same <br />
<label class="reglabel" for="fname">First Name:</label>
<input id="fname" name="shippingfname" placeholder="Required" required="" type="text" /><br />
<label class="reglabel" for="lname">Last Name:</label>
<input id="lname" name="shippinglname" placeholder="Required" required="" type="text" /><br />
<label class="reglabel" for="address">Address:</label>
<input id="address" name="shippingaddress" placeholder="Required" required="" type="text" /><br />
<label class="reglabel" for="town">Town:</label>
<input id="town" name="shippingtown" placeholder="Required" required="" type="text" /><br />
<label class="reglabel" for="postcode">Post Code:</label>
<input id="postcode" name="shippingpostcode" placeholder="Required" required="" type="text" /><br />
<label class="reglabel" for="phone">Phone:</label>
<input id="phone" name="shippingphone" placeholder="Required" required="" type="text" /><br />
<label id="EmailLabel" class="reglabel" for="email">E-mail:</label>
<input id="email" name="shippingemail" placeholder="Required" required="" type="email" /><br />
</fieldset>
</form>
This is the code which Im trying to check whether or not he field is empty, but it doesnt seem to work. It alerts undefined
function validate()
{
var firstname = document.getElementsByName("shippingfname").value;
if (firstname == "")
{
alert('empty');
}
else
{
alert(firstname);
}
}
the function document.getElementsByName returns an array, so you should try this:
function validate()
{
var firstname = document.getElementsByName("shippingfname")[0].value;
if (firstname == "")
{
alert('empty');
}
else
{
alert(firstname);
}
}
Or you can use jquery validation plugin easily. ıt is great for client side validations http://docs.jquery.com/Plugins/validation
getElementsByName() returns an array. Not an individual element. In your example you will want to use the ID attribute to access individual elements.
<input name="shippingsame" id="shippingsame" onclick="fillShipping(this.form)" type="checkbox">
function validate()
{
var firstname = document.getElementByID("shippingfname").value;
if (firstname == "")
{
alert('empty');
}
else
{
alert(firstname);
}
}