Make text in ajax generated input field selectable - javascript

I can't make text in ajax generated input field selectable on click.
<input type="text" class="form-control input-lg" id="url" value="">
<script>
$.ajax({
...
element.append('<input type="text" id="test" value="' + 'https://' + location.host + '/' + data[0].data + '">')
}
});
return false;
});
</script>
<script>
$('input').on('focus', function (e) {
$(this)
.one('mouseup', function () {
$(this).select();
return false;
})
.select();
});
</script>
I can select all text on click in #url input, beside text in ajax generated input.
All I want is to make text in both static inputs and ajax generated inputs selected on click.

$('body').on('focus', 'input', function () {
$(this).select();
});

Related

Dynamically get value of input tag onkeypress in jquery

I want to get the value from input tag dynamically.Here is my script code-
$(document).ready(function () {
var v = "";
$("#upload").keypress(function () {
v = $("#upload").val();
alert("value = " + v);
});
$("#upload").keyup(function () {
v = $("#upload").val();
alert("value = " + v);
});
});
And input tag,
<input type="text" name="amount" placeholder="Enter Your Amount" id="upload" required />
So when I press a numeric key in this input tag, I want to get the value instantaneously.Now it is showing first value in alert box after the second key is pressed.But I want to get the value of input concurrently.How is this possible.
you need to use INPUT event. it's fire when user change in text box any time. I hope it helps you.
$(function () {
var v = "";
$("#upload").on('input', function () {
v = $(this).val();
console.log("value = " + v);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="amount" placeholder="Enter Your Amount" id="upload" />

I have a row from a html table in the form : $(row).text(). How do I feed this into a input type="hidden" element

I have two html tables: stockdataTable which gets its data from a database call.
result table which is empty initially and dynamically has rows appended to it when a user clicks a row in the stockdataTable.
I capture the selected row using
row = $(this).clone(); and append it to resultTable.
I have a html form "buyTrade" which has 3 elements, one of type hidden, a text field to enter a value, and a submit button.
how do I copy the row data of result table onto the hidden element in the form?
<script type="text/javascript">
var row
$(document).ready(function () {
$("#tabs").tabs();
$('#stockdataTable tr').click(function (event) {
row = $(this).clone();
$('#resultTable').append(row);
$("#resultTable").on("append", "tr", function () {
alert($(this) + " was added");
}, function () {
alert($(this) + " was removed");
});
$(row).click(function (event) {
$(this).remove();
var row = $(this).text();
});
});
});
function reg() {
alert($(row).text());
$('tradeDetail').val("$(row).text()");
return true
}
</script>
Form code:
<form name="buyTrade" method="GET" action="/Stock/BuyServlet" onsubmit="return reg()">
<input type="hidden" name="tradeDetail" value="" id="tradeDetail"></input>Qty:
<input type="text" name="qty">
<input type="submit" value="Buy">
</form>
Check this out:
var row
$(document).ready(function () {
$("#tabs").tabs();
$('#stockdataTable tr').click(function (event) {
row = $(this).clone();
$('#resultTable').append(row);
$("#resultTable").on("append", "tr", function () {
alert($(this) + " was added");
}, function () {
alert($(this) + " was removed");
});
$(row).click(function (event) {
var row = $(this).text().replace(/ /g,''); // replace whitespaces
$(this).remove();
reg(row); // call to reg function
});
});
});
function reg(text) {
alert(text);
$('#tradeDetail').val(text);
return true
}
You need to declare a function with arguments, and then call it when you need. I change $('#tradeDetail').val(text) because you miss #. Note that $(this).remove() is moved after reading his properties, otherwise you can't get the text if it's removed.

jQuery selector + variable target match

HTML
<form id="myForm">
<input type="text" id="fname">
<input type="text" id="sname">
<input type="text" id="email">
<input type="tel" id="phone">
<select id="status">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<input type="submit" value="send">
</form>
...
<div id="output_fname"></div>
<div id="output_sname"></div>
<div id="output_email"></div>
<div id="output_phone"></div>
<div id="output_status"></div>
Request:
Please help me figure out how to pass all the values from input, select, etc.. (what might show up in a form) into a "preview" (in this case - into the div's).
PS:I have tried this (force me to paste the script numbers of times i have inputs and matching output_ divs - at least with my knowledge today):
$("#fname").on("focusout",function(){
setTimeout($.proxy(function(){
$("#output_fname").text(this.value);
},this),10);
});
But is there a possibility to do something like:
<input type="text" class="grab-val" id="fname">
and then:
.val() from (all inputs)
.this class="grab-val" and
send to (output_ + matching id)........ //something like that
OR (sorry for all the back and forward, but with this question I want to solve a problem but I also kindly ask for a lesson...)
What would a good solution be to create a preview on submit - before sending data into db. Data sent after a "is-the-data-correct-"-submit-button.
You can just give your preview divs a class of "preview"
<div class="preview" id="output_fname"></div>
<div class="preview" id="output_sname"></div>
<div class="preview" id="output_email"></div>
<div class="preview" id="output_phone"></div>
<div class="preview" id="output_status"></div>
Then on the preview button submit
$('.preview').text(function(){
return $('#' + this.id.replace('output_','')).val();
});
I've created two JS Fiddles:
This one updates the preview realtime: http://jsfiddle.net/ChrisBerragan/zcspmfmd/5/
..and this displays the preview on submit: http://jsfiddle.net/ChrisBerragan/ub3y4ycj/15/
The realtime one has a function to bind the value of the registered input id to the text of the registered target id:
function bindToElement(sourceElement, targetElement) {
var source = jQuery('#' + sourceElement),
sourceType = source[0].tagName,
target = jQuery('#' + targetElement);
switch (sourceType) {
case 'INPUT':
source.on('keyup', function (event) {
var sourceValue = event.target.value;
target.text(sourceValue);
});
break;
case 'SELECT':
target.text(source.val());
source.on('change', function (event) {
var sourceValue = event.target.value;
target.text(sourceValue);
});
break;
}
}
bindToElement('fname', 'output_fname');
bindToElement('sname', 'output_sname');
bindToElement('email', 'output_email');
bindToElement('phone', 'output_phone');
bindToElement('status', 'output_status');
.. but a simple loop would allow you to save the repetition.
The preview on submit version has a function to convert a form into a previewable form - you simply provide the function with the formId and the previewAreaId and when the preview button is click it runs a showPreview function that finds every element in the form that is an input or a select and that isn't an input type 'button' and creates a div in the preview area with the value and adds a submit button to the form to confirm:
function previewOnSubmit (formId, previewAreaId) {
var form = jQuery('#' + formId),
previewButton = jQuery('#previewFormButton'),
formInputs = form.children().filter(function (index, element) {
var tag = element.tagName,
inputType = jQuery(element).attr('type'),
tagIsValidInput = (tag === 'INPUT' && inputType !== 'button') || tag === 'SELECT';
return tagIsValidInput;
}),
preview = jQuery('#' + previewAreaId);
function showPreview () {
var confirmationButton = jQuery('<input type="submit" value="Confirm" />');
preview.empty();
jQuery.each(formInputs, function (index, element) {
var value = element.value,
inputPreview = jQuery('<div>' + value + '</div>');
preview.append(inputPreview);
});
form.append(confirmationButton);
}
previewButton.on('click', function (event) {
event.preventDefault();
showPreview();
});
}
previewOnSubmit('myForm', 'myFormPreview');
Hope these help!

Ajax Submit nicEdit

I'm using nicEditor on one of my projects and i want to submit the content using jQuery from plugin. Here is my code
<script type="text/javascript">
bkLib.onDomLoaded(function() {
new nicEditor().panelInstance('txt1');
});
</script>
<script>
$(document).ready(function()
{
$('#submit-from').on('submit', function(e)
{
e.preventDefault();
$('#submit').attr('disabled', ''); // disable upload button
//show uploading message
$(this).ajaxSubmit({
target: '#output-login',
success: afterSuccess //call function after success
});
});
});
function afterSuccess()
{
$('#submit-from').resetForm(); // reset form
$('#submit').removeAttr('disabled'); //enable submit button
$('#loadding').html('');
}
</script>
<form id="submit-from" action="submit.php" method="post">
<input type="text" id="title" name="title" />
<textarea id="txt1" name="txt1" ></textarea>
<input type="submit" id="submit" value="Submit"/></div>
</form>
I'm using
jQuery from plugin: http://malsup.com/jquery/form/
nicEdit: http://nicedit.com/
All work fine except what ever in the nicEdit doesn't seems to be posting. If i remove the nicEdit text area will post fine. Can someone point me out the problem. Really appropriate your help.
Try this:
// Get values from NICEditors
$('textarea').each(function () {
var id_nic = $(this).attr('id');
var nic = nicEditors.findEditor(id_nic);
if (nic) nic.saveContent();
});
I think you should encode the HTML of the contenteditable div of nicEdit and then pass that value to the textarea when you try to submit the form.
$(document).ready(function()
{
$('#submit-from').on('submit', function(e)
{
e.preventDefault();
$('#submit').attr('disabled', ''); // disable upload button
//show uploading message
var encodedHTML = String($('.nicEdit-main').html())
.replace(/&/g, '&')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/</g, '<')
.replace(/>/g, '>');
$('#txt1').val(encodedHTML);
$(this).ajaxSubmit({
target: '#output-login',
success: afterSuccess //call function after success
});
});
});

jQuery Class Selector Problem

I'm trying to write code that makes an alert sound if focus has left the text field with a class "mandatory", and that field is empty.
Basically if a user leaves a mandatory text field without writing anything, it will prompt them.
Here's my code, it doesn't work:
$(document).ready(function(){
$('.mandatory').blur(function(){
if($(this.id).val() == "")
{
alert('Field:' + this.id + ' is mandatory!');
}
});
});
You're using this.id when you should be using this:
if($(this).val() == "")
{
alert('Field:' + this.id + ' is mandatory!');
}
To explain: inside an event handler, this is the DOM element upon which the event was triggered. As you can see from the documentation for the $ function (note that the jQuery function and the $ function are the same thing), you can use a DOM element to build a jQuery selection.
Note that you could optimise this further by discarding the jQuery constructor and simply using this.value instead.
Assuming you're using jquery:
$(document).ready(function(){
$('.mandatory').blur(function(){
if($(this).val() == "") {
alert('Field:' + $(this).attr('id') + ' is mandatory!');
}
});
});
Your code wont work if the user has entered white space
Use
$.trim()
instead
$(document).ready(function(){
$('.mandatory').blur(function(){
if($.trim($(this).val()) == "")
{
alert('Field:' + this.id + ' is mandatory!');
}
});
});
Guess you were tryin to do this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script>
$(function(){
$('.mandatory').each(function (){
$(this).blur(
function(){
if($(this).val() == ""){
alert("empty");
}
})
});
});
</script>
<div id='header'>
<input type="text" class="mandatory"/>
<input type="text" class="mandatory"/>
<input type="text" class="mandatory"/>
<input type="text" class="mandatory"/>
<input type="text" class="mandatory"/>
<input type="text" class="mandatory"/>
<input type="text" class="mandatory"/>
</div>
and this is working

Categories