I have a table of rows and each row has an edit button. When I click the button I can set row values to form controls on a form.
I'm expecting that when I call $('#txtFirstName').empty() it should clear the text in txtFirstName. Instead, the text is not cleared, and when I call the form again it shows the old text in that control.
Is there a way to clear text in the control?
$('#btnClear').click(function () {
$('#txtFirstName').empty();
$('#txtLastName').empty();
}
The source code shows as data was cleared.
<tr>
<td>
<label for="employee_FirstName">First Name</label>
</td>
<td>
<input class="form-control" data-val="true" data-val-required="The First Name field is required." id="txtFirstName" name="employee.FirstName" placeholder="First Name" style="width:400px" type="text" value="" />
</td>
<td>
<span class="field-validation-valid" data-valmsg-for="employee.FirstName" data-valmsg-replace="true"></span>
</td>
</tr>
<tr>
<td>
<label for="employee_LastName">Last Name</label>
</td>
<td>
<input class="form-control" data-val="true" data-val-required="The Last Name field is required." id="txtLastName" name="employee.LastName" placeholder="Last Name" style="width:400px" type="text" value="" />
</td>
<td>
<span class="field-validation-valid" data-valmsg-for="employee.LastName" data-valmsg-replace="true"></span>
</td>
</tr>
This information might be coming from the cache, but I'm not sure.
As #RoryMcCrossan said in his comment above, what you're looking for is jQuery.val.
Get the current value of the first element in the set of matched elements or set the value of every matched element.
jQuery.empty does not do what you think it should.
Remove all child nodes of the set of matched elements from the DOM
Because you are trying to change the value of an element, instead of removing elements from the DOM, you should use jQuery.val.
As a side note, you have a syntax error in your JavaScript above. You are missing a closing parenthesis ) at the end of the argument list of $('#btnClear').click. Whether that was a copy and paste error or not, I thought I would point it out.
Also note that instead of applying jQuery.val to each element you want to clear, you can select the elements by class and apply jQuery.val to the returned jQuery object, which will apply the operation to every element with the matching class.
Here's a simple example:
$('#clear').click(function() {
$('.form-control').val('');
});
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<input class="form-control">
<input class="form-control">
<input class="form-control">
<button id="clear">Clear</button>
Related
<form id="pricecal">
<input type="text" onchange="calprice()" class="form-control round-corner-fix datepicker" data-provide="datepicker" placeholder="Check in" value="" required />
<input type="text" onchange="calprice()" class="form-control round-corner-fix datepicker" data-provide="datepicker" value="" placeholder="Check Out" required />
<input type="hidden" onchange="calprice()" id="noroom" value="" name="room" />
<input type="hidden" onchange="calprice()" id="noguest" value="" name="guest" />
</form>
my code perfectly works on input text but not on input type hidden
i tried following ways i dont want to loop for every input
function calprice(){
alert('Textarea Change');
}
$(document).on('change', 'form#pricecal input', function(){
alert('Textarea Change');
});
$("form#pricecal input").bind("change", function() {
alert('Textarea Change');
});
As you have bound event on the elements that can be triggered whenever you update your input's value:
$('input[type="hidden"]').trigger('change');
Put this line just after that line of code which causes the value change.
type=hidden
These fields should not be rendered and provide a means for servers to store state information with a form. This will be passed back to the server when the form is submitted, using the name/value pair defined by the corresponding attributes. This is a work around for the statelessness of HTTP. Another approach is to use HTTP "Cookies".
Refer this link
I have some HTML in my page within a DIV.. There are multiple instances of it throughout the page, and its setting textbox (or other items)..
Id like to do a JQuery search and replace all occurrences of the HTML within a DIV (apexir_rollover_content) to change the item to a simple display.. There are multiple instances of the DIV..
Here is an html snippet..
<div id="apexir_rollover_content" style="height: 210px;">
<a href="javascript:void(false);">
<input type="text" value="" maxlength="2000" size="6" name="f05"></input>
</a>
<a href="javascript:void(false);">
<input type="text" value="23162" maxlength="2000" size="6" name="f05"></input>
</a>
I want to change the line below so that it just has the value as standard text..
<input type="text" value="23162" maxlength="2000" size="6" name="f05"></input>
I can't do a global replace, as there will be other textbox items that I need to keep...
If someone could help, Id be grateful...
Thx
Normally you would want to have a class or id to find the correct element. Since you do not have this, you can
1: use a jQuery selector to find the input element that needs to be replaced
jQuery("input[type='text']")
2: move one element above
.parent()
3: and replace the input field
.html('<input type="text" value="23162" maxlength="2000" size="6" name="f05"></input>')
I have created a jsFiddle with the code: http://jsfiddle.net/sdhxybj1/
This is the JS jQuery code that you can use:
jQuery("input[type='text']").parent().html('<input type="text" value="23162" maxlength="2000" size="6" name="f05"></input>')
Moreover, if You intend only replace as in the previous solution only some inputs the jquery statement can be filtered as in the following:
$("input[type='text']").filter('[name="f05"]').parent().html('<input type="text" value="23162" maxlength="2000" size="6" name="f05"></input>');
But if You intend to replace each anchor with the inner input so You could use:
$('#apexir_rollover_content a').each(function() {
var innerEle = $(this).children();
$(this).replaceWith(innerEle);
});
I have some Angular JS validation working on my wizard steps app and errors appear when the user enters a character in the input field and removes it. I am wondering how do I get the error to show after the user is on the input field and does not enter anything? (They tab onto the field and tab off without entering anything) I hope this makes sense....
<td>
<label>Your Name</label>
</td>
<td>
<input class="form-control" type="text" name="name" ng-model="user.name" required />
<span class="error" ng-show="user.validate.step1.name.$invalid && !user.validate.step1.name.$pristine">Required Field
</span>
Use ng-blur:
<td>
<label>Your Name</label>
</td>
<td>
<input class="form-control" type="text" name="name" ng-model="user.name" ng-blur="blur=true" required />
<span class="error" ng-show="user.validate.step1.name.$invalid && blur">Required Field
</span>
The easiest/best way would probably by marking the control as dirty by using ng-blur:
<input class="form-control" type="text" name="name" ng-model="user.name" required ng-blur="user.validate.step1.name.$dirty = true"/>
The next 1.3 beta version(beta 12) will have a $touched you can use to check for it, but none of the current versions have that yet.
I want to copy this input from page A and paste to page B
Let say this is Page A :
<input type="text" class="Name" id="cName" Value="Hey" readonly/>
<input type="number" class="Qty" id="cQty" Value="1" readonly/>
<input type="text" class="Price" id="cPrice" Value="10" readonly/><button class="" id="copy">Copy/?Add to Page B?</button>
This is Page B:
<ol><button class="" id="add">Add</button>
<li>
<input type="text" class="Name" id="pName" Value="" readonly/>
<input type="number" class="Qty" id="pQty" Value="" />
<input type="text" class="Price" id="pPrice" Value="" readonly/><button class="" id="cancel">Cancel</button>
</li><input type="text" class="Name" id="" Value="" readonly/>
<input type="number" class="Qty" id="tQty" Value="Total Quantity" readonly/>
<input type="text" class="Price" id="tPrice" Value="Total Price" readonly/></ol>
I read that I can't copy and paste, so is there another way of it? like adding Page A input text straight to Page B input text, like "add to shopping carts?"
Thanks for all the expert here.
If you have no option to use server-side programming, such as PHP, you could use the query string, or GET parameters.
In the form, add a method="GET" attribute:
<form action="b.html" method="GET">
<input type="text" name="serialNumber" />
<input type="submit" value="Submit" />
</form>
When they submit this form, the user will be directed to an address which includes the serialNumber (for example) value as a parameter. Something like:
http://www.example.com/display.html?serialNumber=XYZ
You should then be able to parse the query string - which will contain the serialNumber parameter value - from JavaScript, using the window.location.search value:
// from b.html
document.getElementById("write").innerHTML = window.location.search; // you will have to parse
// the query string to extract the
// parameter you need
See also JavaScript query string.
The alternative is to store the values in cookies when the form is submit and read them out of the cookies again once the b.html page loads.
See also How to use JavaScript to fill a form on another page.
You can take this value either by form post method or use browser cookies and very easy to implement.
And the methods varies as per your programming language.
I am trying to load JQuery DatePicker in two text fields, so I am using the following code
$(function() {
$('#DOB, #SignupDate').datepicker();
});
and here is the HTML for both fields:
<div class="field field_input">
<label for="DOB">D.O.B</label>
<input type="text" name="DOB" value="">
</div>
<div class="field field_input">
<label for="SignupDate">Signup Date</label>
<input type="text" name="SignupDate" value="">
</div>
It is loading just fine in the DOB field but it is not loading in the SignupDate field. Can someone please tell me what I am missing here and how to solve it?
Thanks for your time
You try to select the #DOB and #SignupDate.
$('#DOB, #SignupDate')
It means get element by id DOB and SignupDate but you have no element with id="DOB" nor
id="SignupDate"
So please use
<input type="text" id="DOB" name="DOB" value=""> //<- note id="DOB"
<input type="text" id="SignupDate" name="SignupDate" value=""> //<- note id="SignupDate"
You need to have an id attribute on your inputs. Two reasons:
In your jQuery code, # indicates an id selector, not a name selector.
The for attribute on the labels should correspond with an id attribute on another element, not the name attribute.
Given that this is probably a form, you still want to keep the name attribute, but you probably just want a matching id attribute.