My code works well. When I typed everything in the Input 1, output text is displayed in the textarea with this difference that for each SPACE will be included a coma , means SPACE will be replaced by a coma ,. This is OK.
Now I want to typed everything in the Input 2, the typed text of Input 2 to be added in textarea with this difference the previous text is not removed and new text to be added.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#t1").keyup(function() {
$('#textarea').val($(this).val().replace(/\ /g,','));
});
});
</script>
</head>
<body>
<p>Input 1:
<input type="text" id="t1"/></p>
<p>Input 2:
<input type="text" id="t2"/></p>
<p>Textarea:</p>
<textarea cols="20" rows="5" id="textarea"></textarea>
</body>
</html>
You can save the previous text from input 1 in one variable and concat it with the text from input 2 and Paste it in the Textarea using val() method.
I assume your previous text refer to input 1, then try this:
$("#t2").keyup(function() {
var t1 = $('#t1').val();
var t2 = $(this).val().replace(/\ /g,',');
$('#textarea').val(t1 + t2);
});
I got the impression from your answers. The following code works well and output is what I want.
Is this code principle and standard?
$("#t1, #t2").keyup(function() {
var t1 = $('#t1').val().replace(/\ /g,',');
var t2 = $('#t2').val().replace(/\ /g,',');
$('#textarea').val(t1 + t2);
});
Related
I have a following situation.
I have a variable bOk into a HTML page. I'd like to update this variable every time a checkbox.checked property was changed.
I think the best way should be using jscript but I don't know how to start this.
That is the reason I did not put a code in this question.
Is there a way to somebody to help me?
Using the onclick event, you can get the state of the checkbox with jQuery whenever it is clicked.
document.getElementById("checkbox-id").onclick = function() {
var bOk = $("#checkbox-id").is(":checked")
}
document.getElementById("checkbox-id").onclick = function() {
var bOk = $("#checkbox-id").is(":checked")
alert(bOk);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox-id"/>
<input id="chkok" type="checkbox" />Tick
#{var BOK = "Hi..";}
<input type="hidden" value=#BOK id="hdnbok">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#chkok').click(function ()
{
alert($("#hdnbok").val());
})
});
trying to do the boolean "Binding element attributes" thing from the Guide.
The javascript is:
window.App = Ember.Application.create();
window.App.NumberTextField = Ember.TextField.extend({
valueChanged: (function() {
return this.get("controller").set("isNotCompleteId", this.get("value").length !== 6);
}).observes("value")
});
window.App.LandingController = Ember.ObjectController.extend({
isNotCompleteId: true
});
window.App.Router.map(function() {
return this.route("landing", {
path: "/"
});
});
The template is:
<h3>Example:</h3>
<script type="text/x-handlebars">
<p>
<a href="#"
{{bindAttr disabled="isNotCompleteId"}}>
Join number:
</a>
{{view App.NumberTextField valueBinding="idEntered" size="8"}}
<p>{{idEntered}}</p>
</p>
</script>
This jsfiddle shows (what I think is the) bad behavior: http://jsfiddle.net/csterritt/AaTpd/11/
Inspect the "Join number:" link in the Result pane. It doesn't have the "disabled" attribute (I believe it should). Changing the text in the text box until it has six characters doesn't change the attribute (it should, at six chars).
If I change line 7 of the HTML to {{bindAttr class="isNotCompleteId:foo:bar"}} it works as expected (although the class starts as "bar", and so, the controller attribute starts as false even though I set it to true...???).
Bug? Confusion on my part?
Thanks!
I've created an order form, of which has a large array of fields. I'm now adding coupon functionality so that we can start to give customers discount codes etc.
What's the best way of submitting a single field (the coupon code) using ajax after a "apply coupon" button has been clicked so that the price can be updated on the front end probably using UJS(?) - obviously the final price calculation would happen on the backend?
Cheers.
I would recommend using a JS framework to do Ajax requests. If you JQuery, then you can use the example given to understand how to do a simple post.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form action="/" id="searchForm">
<input type="text" name="s" placeholder="Search..." />
<input type="submit" value="Search" />
</form>
<!-- the result of the search will be rendered inside this div -->
<div id="result"></div>
<script>
/* attach a submit handler to the form */
$("#searchForm").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $( this ),
term = $form.find( 'input[name="s"]' ).val(),
url = $form.attr( 'action' );
/* Send the data using post and put the results in a div */
$.post( url, { s: term },
function( data ) {
var content = $( data ).find( '#content' );
$( "#result" ).empty().append( content );
}
);
});
</script>
</body>
</html>
I have a problem with document.getElementById('editor').value, because I can't get the value. The textarea of YUI Editor is not a normal TextArea.
<script>
function viewValue
{
alert(document.getElementById('editor').value);
}
</script>
textarea:
<div class="editor" >
<textarea id="editor" name="editor">
</textarea>
</div>
Documentation: http://developer.yahoo.com/yui/editor/#getdata
<script>
//Put the HTML back into the text area
oEditor.saveHTML();
//The var html will now have the contents of the textarea
var html = oEditor.get('element').value;
alert(html);
</script>
For fields in my ASP.NET MVC view that have been attributed as required, is there any way for the framework to render some sort of indicator automatically that the field is marked as required in metadata?
Should be able to do this with CSS since MVC3 adds in those custom attributes to the element:
<input data-val="true" data-val-required="The Username field is required." id="Username" name="Username" type="text" value="" />
You could key off the data-val-required in CSS like so:
input[data-val-required] {
background:red
}
or set a background image of an asterisk etc.
I did that way because my required fields must be dynamic (defined in a configuration file)
Add at the end of your View:
<script type="text/javascript">
$('input[type=text]').each(function () {
var req = $(this).attr('data-val-required');
if (undefined != req) {
var label = $('label[for="' + $(this).attr('id') + '"]');
var text = label.text();
if (text.length > 0) {
label.append('<span style="color:red"> *</span>');
}
}
});
</script>
I modified Renato Saito's answer to include more field types (all types of input and select lists) and use the jQuery namespace instead of the generic $. Here is my revision:
<script type="text/javascript">
// add indicator to required fields
jQuery('input,select').each(function () {
var req = jQuery(this).attr('data-val-required');
if (undefined != req) {
var label = jQuery('label[for="' + jQuery(this).attr('id') + '"]');
var text = label.text();
if (text.length > 0) {
label.append('<span style="color:red"> *</span>');
}
}
});
</script>
Here is one that will attach a red asterisk to the right side of anything with the attribute 'data-val-required'.
<script type="text/javascript">
$('[data-val-required]').after('<span style="color:red; font-size: 20px; vertical-align: middle;"> *</span>');
</script>
Adding html attribute is not enough. This will only cause javascript validation error. If you want to indicate that the field is required you'd probaly want to add an asterisk to it. You can do it by means of extenssion method of HtmlHelper. You can find a thorough explanation here
Indicating required field in MVC application
A Small Modification Is Done From My Side.
Actually I had primary keys (Identity Columns in DB). That I did no want to highlight.
So I Used Below Code Snippet to select only input[type=text] fields that has required attribute in annotation.
$("[data-val-required]").not(":hidden").not(":radio").not(":checkbox").after('<span style="color:red;max-width:10px;min-height:30px;">*</span>');