Adding value to an Input field on click - javascript

I have this structure on form,
<input type="test" value="" id="username" />
<span class="input-value">John Smith</span>
Fill Input
when user click on the Fill Input ,
the data from span which has class input-value will be added to value, after clicking a tag the code should be look like this,
<input type="test" value="john Smith" id="username" />
<span class="input-value">John Smith</span>
Fill Input
there are many forms element/input on the single page.

You can do it like this:
$('a.fill-input').click(function() {
$(this).prevAll("input:first").val($(this).prev(".input-value").text());
});
Instead of looking only for the classes, this looks for the span and input just before the button you clicked...this means it works no matter how many of these you have on the page.
Unlike your example though, the value will be John Smith, with the same casing as it has in the span, if you actually want lower case, change .text() to .text().toLowerCase().

$('a.fill-input').click(function() {
$('#username').val($('.input-value.').text());
});

This should suffice for all inputs that you have so structured. It doesn't depend on the names of the elements. Note that prevAll returns the elements in reverse order so you need to look for the first input, not the last in the preceding inputs.
$('.fill-input').click( function() {
var $input = $(this).prevAll('input[type=test]:first');
var $value = $(this).prev('span.input-value');
$input.val($value.text());
});

try:
$('a.fill-input').click(function(e){
$('#username').val($('span.input-value').text());
e.preventDefault();
return false;
});

Related

Merging search terms from 2 separate input fields

So I have javascript code to prepend "tag:" or "vendor:" before every search term, but I wanted to hide that from the user, so I created a hidden input field to send the code but it's not properly prepending the "tag:" and "vendor:" before every word. and instead inputs the entire string, then the search terms.
<form method="get" action="/search" id="search-home">
<button type="submit" value="search"></button>
<input type="hidden" name="type" value="product" />
<input type="hidden" name="q" class="searchtext" />
<input type="text" name="red" placeholder="Search"/>
</form>
<script>
$(document).on('submit','#search-home',function(){
var searchtext = $('.searchtext').val();
$('.searchtext').val("tag:"+searchtext+"* OR vendor:"+searchtext+"*");
});
</script>
Here's what the Url looks like with the code
http://zzz.co/search?type=product&q=tag%3A+OR+vendor%3A&red=tote#fullscreen=true&search=home
Here's what it's supposed to look like.
http://zzz.co/search?type=product&q=tag%3Atote+OR+vendor%3Atote#fullscreen=true&search=home
You're getting an empty value and inserting it here:
$(document).on('submit','#search-home',function(){
var searchtext = $('.searchtext').val(); // <- HERE
$('.searchtext').val("tag:"+searchtext+"* OR vendor:"+searchtext+"*");
});
What you should be doing is getting the user given query, which is the input you named "red".
$(document).on('submit','#search-home',function(){
var searchtext = $('input[name="red"]').val();
$('.searchtext').val("tag:"+searchtext+"* OR vendor:"+searchtext+"*");
});
With the above fix, your URL will look similar to:
http://zzz.co/search?type=product&q=q=tag%3Atote+OR+vendor%3Atote&red=tote.
I do not know where you're getting your hashbang(#) from, but I would assume it will append at the end as before.
If you want to get rid of the red=tote part, you have a few options. Emptying the value via $('input[name="red"]').val(''); will make it appear in your url as red=. If you want it gone entirely, you should use $('input[name="red"].remove();.
I would also advise having your "on" hook attached to the form, not the entire document. This is just a good practice to avoid using unnecessary resources as this hook will bubble every time a form is submitted, regardless of the selector. Instead, consider:
$('form#search-home').on('submit', 'button[type="submit"]', function() { ... };
That way it will only bubble when a submit event happens on that specific form, greatly reducing the possible instances those resources are used.

Can’t Make Only One .children( ) Show Up When Using the onkeyup Event

Long time reader, first time poster. I’ve tried looking for an answer everywhere. I’m really stuck.
I have a form with two label tags, each containing an input and a select tag:
<body>
<form action="Page_Form.php" method="post">
<label class="try">Main Product: <input type="text" autocomplete="off" name="main_product" id="main_product" maxlength="30" onkeyup="getNames(this.value)"/>
<select multiple="multiple" class="results" id="results" onchange="displayResult(this)"><option></option></select></label>
<label class="try">Secondary Product: <input type="text" autocomplete="off" name="secondary_product" id="secondary_product" maxlength="30" onkeyup="getNames(this.value)"/>
<select multiple="multiple" class="results" id="results" onchange="displayResult(this)"><option></option></select>
</label>
</form>
</body>
When the user writes something, the tag with the class ".results" shows up, using the onkeyup event. Here's my JavaScript:
<script type="text/javascript">
function getNames(value) {
if(value != "") {$("label").children(".results",$(this)).show();} else {$("label").children(".results",$(this)).hide();}
}
function resultsHide() {
{$(".results").hide();};
}
window.onload = resultsHide;
</script>
The problem is, both of the select tags show up simultaneously, and I want only the direct child select tag of the label tag to show up.
I’ve tried using .children() and. find (), in any variation I could think of.
Is there a way to make only the direct child show up?
Here is a Live Demo.
Thank you so much for helping me out.
First remove the onkeypress attributes from the elements and do the binding through jquery, so this will actually point to the element.
also add a common class to the elements you want to have the same behavior (i used class products), like this
<input type="text" class="product" autocomplete="off" name="main_product" id="main_product" maxlength="30"/>
Try this code instead
$(function(){
$('.product').on('keyup', getNames);
});
function getNames() {
var value = this.value,
results = $(this).siblings('.results');
if (value != "") {
results.show();
} else {
results.hide();
}
}
The idea is to start traversing the DOM from the element you already have (the input in this case) towards the element you want (since they are related)
Demo at http://jsfiddle.net/gaby/xNu53/25/
You need to distinguish between the two selects when showing/hiding.
Something like this:
if($(product).hasClass("main")) {
$("label").children(".results.main",$(this)).show();
}
else {$("label").children(".results.main",$(this)).hide();}
Take a look at this modified version.
http://jsfiddle.net/xNu53/33/

How to remove the values with jquery on deleting characters in textbox

I have this code
<input type="hidden" value="[{"value":1,"label":"Emmoia Boently"},{"value":6,"label":"John Smith"}]" name="group[users][]" id="users">
<input type="text" value="Emmoia--Boently, John--Smith, " name="autocompleter_group[users][]" id="autocompleter_userss" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
Now my problem is the current javascript is adding the values from textbox to the hidden feilds.
But when i delete the text then it don't deletes from the hidden input fields.
So i want to do in jquery that when i start deleting the text in main textbox then the value gets deleted in the hidden input field as well.
just like we do in SO when we delete the tag characters in ask question page
$("#autocompleter_userss").on("keyup", function() {
$("#users").val($(this).val());
});
Fiddle
UPDATE: Seems like you're looking for a tag editor. See this post for exhaustive links :)
$('input#1').change(function(){
$('input#hidden').val($(this).val());
});
Additionally, you could try some data-binidng libaries like knockout.js among others.

Assign the value to different field ID?

I have a form with a unique identifier field that the user needs to enter, when passing this value it needs to appear in different field id. so for instance. the field that user enters the unique code in is called "unique" and the copy needs to be in "message", how can i achieve that?
<div data-role="fieldcontain">
<label for="pins" id="pinLabel"><span style="color:#f22300">*</span> Unique Code:</label>
<input data-mini="true" name="pins_r" id="pins" placeholder="9 alphanumeric characters"/>
</div>
<input type="hidden" id="msg" name="msg" value=pins>
Thanks
There are two ways to do this with JavaScript.
Method 1)
Have an onchange event on the unique field such that whenever the value is changed, change it in a hidden field called message.
<input type="text" id="unique" name="unique" onchange="setMessage(this);">
<input type="hidden" id="message" name="message">
function setMessage(field) {
document.getElementById('message').value = field.value;
}
Method 2)
Use ajax to post the form instead, that way you can build the fields yourself.
ie. post message= document.getElementById('unique').value
Both the above are greatly improved if you use JQuery or another JS helper framework.
If you want your values to be set in the label at the same time, it is entered.
You can do some thing like this.
$(document).ready(function() {
$('#pins').keypress(function() {
setTextValueForPins(this);
});
});
function setTextValueForPins(textPin)
{
$('#pinLabel').text($('#textPin').val());
}
If you want the value to be set after the user have entered the value, you can use the change event.
PS: Not tested the code , let me know if you face any Issues.

Reading and appending form data live with javascript

I have been searching for the solution to this problem for a while and have to come across an answer that is newbie-friendly enough for me to understand its implementation. Heres my situation:
I am creating a simple, little, Web-based document numbering system that takes data entered into a form and combines it to form a document number. An example would be: A user enters a, Class Code(CCC), Base Number(BBBB), and a Dash number (DDD). The resulting document number would be CCC-BBBB-DDD. Super simple. I have it writing all of this to the database and all that jazz. I would just like to add one user friendly add on.
I want a little live-generate string at the top that shows what the Document number will be as the user edits each field before they actually press submit. Kinda like this example: http://inimino.org/~inimino/blog/javascript_live_text_input
I know almost nothing about javascript so it would be really helpful to know, 1: what the script should look like, 2: And How that script is interfacing with the html form.
Heres what the form looks like:
<form action="submit.php" method="post">
Enter Title:<input type="text" name="title" size="20"><BR>
Enter Class Code:<input type="text" name="class" size="20"><BR>
Enter Base Number:<input type="text" name="base" size="20"><BR>
Enter Dash Number:<input type="text" name="dash" size="20"><BR>
<input type="submit" value="Submit">
Thanks so much for any help you can offer. I'm sure this isn't too hard for someone well versed.
Thomas
From what I'm understanding this should do what you describe.
$('#yourForm input').bind('keyup', function(e) {
var docNum = 'Your Document Number: <br/>'+$('input[name="class"]').val() + '-' + $('input[name="base"]').val() + '-' + $('input[name="dash"]').val();
$('#preview').html(docNum);
});​
For your second question, in how it interfaces with the HTML form. The first jQuery selector #yourForm input is going to look for any <input> that falls under a <form id='yourForm'>. It's then binding the keyup event to fire the function. The function takes the value from the <input> with the name value of class, base and dash as well as some formatting and creates a variable named docNum. docNum is then inserted into the element with the id set to preview, which in the Fiddle example is a div right above the form.
http://jsfiddle.net/nuY2M/
Include this html where you want the document number preview to display:
Document #:
<span id="classPreview"></span>
-
<span id="basePreview"></span>
-
<span id="dashPreview"></span>
Add this script to populate the values:
function updateDocNumPreviewPart(fieldName)
{
var preview = document.getElementById(fieldName + "Preview");
var field = document.forms[0][fieldName];
preview.innerHTML = field.value;
}
function updateDocNumPreview()
{
updateDocNumPreviewPart("class");
updateDocNumPreviewPart("base");
updateDocNumPreviewPart("dash");
}
Finally, add some code to your form fields to call the script:
<input ... onkeyup="updateDocNumPreview()" onchange="updateDocNumPreview()" />

Categories