Populate 1 form field based on another - javascript

Is there an easy way to populate one form field with duplicate content from another form field?
Maybe using jQuery or javascript?

You just have to assign the field values:
// plain JavaScript
var first = document.getElementById('firstFieldId'),
second = document.getElementById('secondFieldId');
second.value = first.value;
// Using jQuery
$('#secondFieldId').val($('#firstFieldId').val());
And if you want to update the content of the second field live, you could use the change or keyup events to update the second field:
first.onkeyup = function () { // or first.onchange
second.value = first.value;
};
With jQuery:
$('#firstFieldId').keyup(function () {
$('#secondFieldId').val(this.value);
});
Check a simple example here.

In Native Javascript:
var v1 = document.getElementById('source').value;
document.getElementById('dest').value = v1;

It is easy in javascript using jQuery:
$('#dest').val($('#source').val());

Related

How to bind 2 input fields dynamically added in a table with Jquery

I am not very familiar with javascript/Jquery Syntax, I would like to bind 2 input text fields that were dynamically added to a table inside a loop. The main goal is to automatically fill the second text field with text from the first one. I was able to do it for 2 static text field by doing that.
$(document).bind('input', '#changeReviewer', function () {
var stt = $('#changeReviewer').val();
stt = stt.replace(/ /g,'.')
$("#changeReviewerEmail").val(stt + "##xxxxxx.com");
});
I have tried a few things but when I try to get the value of the first input, it always returns empty. Thanks.
Check this code
$(document).on('input', '#changeReviewer', function() {
var stt = $('#changeReviewer').val();
stt = stt.replace(/ /g, '.');
$("#changeReviewerEmail").val(stt + "##xxxxxx.com");
});
$('#addbtn').click(function() {
$('div').empty().append(`<input id='changeReviewer'><input id='changeReviewerEmail'>`);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button id='addbtn'>add inputs</button>
</div>

how to pass a value to a data-attribute?

How do I pass one data-attribute value to another?
I have the following input:
<input type="radio" class="d-none" name="varieties" value="option_0" data-price-package-value-id-0="2 625">
Where I need to transfer the value of data-price-package-value-id-0 to the following element:
<li id="front_0" data-value="1 625">
Image Preview
Here's the JavaScript I have so far:
// Radio buttons prise
$(document).ready(function(){
$('input[name="varieties"]:checked').change(function() {
var package_select = this.attr('data-price-package-value-id-0');
var dataval = document.getElementById("0").attr('data-value');
dataval = package_select;
});
});
I also have a range input that already pulls the value out of li this already works but in another function,
now I have a task to pass the value from radio to li
First you should probably not be using ID's that start with a number, as it makes it harder to select in CSS and jQuery, but here you go:
$(document).ready(function(){
$('input[name="varieties"]').change(function() {
var package_select = $(this).attr('data-price-package-value-id-0');
$(document.getElementById("0")).attr('data-value', package_select );
});
});
attr() is a jQuery method. If you want to do this with vanilla javascript, then you will want to use
this.getAttribute('data-price-package-value-id-0')
this.setAttribute('data-price-package-value-id-0', newValue)
If you want to use jQuery then use
$(this).data('price-package-value-id-0') //getter
$(this).data('price-package-value-id-0', newValue) //setter
Or you can use attr() but do not intermix the use of attr() and data()
$(this).attr('data-price-package-value-id-0') //getter
$(this).attr('data-price-package-value-id-0', newValue) //setter
const element = document.getElementById('front_0');
element.setAttribute('data-value', 'my spectacular new value');

trouble wrapping my head around how to get values out of an html.for textbox in a cshtml page

I am having trouble retrieving the contents of a textbox which is created by html.textboxfor
cshtml is like this
<div class="lx-row">
<div class="lx-width-300 lx-margin-top">
#Html.TextBoxFor(m => m.NumberOfProperties, new { #class = "form-control"
id = "divnumofprop", type="number", val="2"})
jQuery:
var n1 = function ($) {
$('input=#divnumofprop').innerText;
alert(n1);
};
I have tried this many different ways but always get that the value is undefined, not sure what I am doing wrong. scope is a concern here as well since the values are in a jQuery slider and slides get saved to db and swapped out with new content on clicking to move to next slide.
.val() function have to used here to fetch value of an input box.
It should be like:
$('#divnumofprop').val();
Also your code should
function () {
var n1 = $('#divnumofprop').val();
alert(n1);
};
To get the textbox value, you can use the jQuery val() function.
For example,
$('input:textbox').val() – Get textbox value.
$('input:textbox').val("new text message") – Set the textbox value.
In your case do as shown below :
Use $("input[id='divnumofprop']").val(); instead of $('input=#divnumofprop').innerText;
jQuery:
var n1 = function () {
var inputValue= $("input[id='divnumofprop']").val();
alert(inputValue);
};

How to differentiate between DOM elements in jQuery

I have some code that loops over each row of the table and creates a json object. The elements in the rows can be either of the following:
<input type="text" id="myelem"/>
or
<p id="myelem">foo</p>
Notice that the id attribute for the both is same. This is because on the table there is a button Add a new Row when this button is clicked another row is added to the table with a checkbox. When user submits the form the checkbox goes away and the value they entered turns into <p id="myelem">value they entered</p>
Below is the code I'm using for this.
$('.input-row').each(function(index, row) {
var innerObject = {};
var key = $('#myelem', row).val().toUpperCase();
jsonObject[key] = "bar";
});
The above works fine for textboxes becuse I'm using the .val() function. However, how do I get the data from the row if it contains <p id="myelem">foo</p> ??
my pseudo code would be something like this:
$('.input-row').each(function(index, row) {
var innerObject = {};
/*
if #myelem is a text box then use .val()
if #myelem is a <p> tag then use .html()
*/
var key = $('#myelem', row).val().toUpperCase();
jsonObject[key] = "bar";
});
ids should always be globally unique on a page. If you need multiple elements to be referenced, you should use classes. If you set myelem as a class rather than an id you could then reference it like this
$('.input-row .myelem')
You can check which type the element is with
var value = null;
if($('#myid').is('input')) {
value = $('#myid').val();
}
else if($('#myid').is('p')) {
value = $('#myid').html();
}
IDs are unique. You cannot use more than one ID in the same page. If you do so how should you decide which element to use?
You could use jQuery is() eg if $('#myelem').is ('p'){...}
If still want to stick your development way then below might help you:
$('.input-row').each(function(index, row) {
var innerObject = {};
var c = $('#myelem', row);
var isInputField = c.get(0).tagName.toUpperCase()=="INPUT";
var key =isInputField ? c.val().toUpperCase():c.html().toUpperCase();
jsonObject[key] = "bar";
});
This is to just get you started. You are using .each on class input-row but you have not shown the class in your code that you provided. I have used class instead of id in this example. Use it to work ahead.
Fiddle

Select2 Dynamic elements not reacting to event

I am using Select2 which works great. However I am using below code to create new dynamic select2 drop down but they do not react/open when clicking on them.
var relationshipcounter = 0;
$('#AddMoreRelationships').click(function () {
var $relationship = $('.relationship'); // div containing select2 dropdown
var $clone = $relationship.eq(0).clone();
$clone[0].id = 'id_' + ++relationshipcounter;
$relationship.eq(-1).after($clone);
$relationship.find('select').trigger('change'); // not working
});
Screenshot:
JSFIDDLE:
http://jsfiddle.net/pHSdP/133/
I had this exact problem and, of course, the first thing I tried was a deep copy with data:
el.clone(true,true);
Which did not work. Instead the best method I found was:
el=other_el.clone()_etc; // cloning the old row
el.find('.select2-container').remove();
el.find('select').select2({width: 268});
el in both of these snippets is the div row that contains the select and so the Select2 element.
Essentially what I do in the second snippet is remove the "old" select2 which will always have the class of .select2-container and then recreate it on all found select elements within my new row.
You need to call clone with the true argument to copy over events and data as well. Otherwise only the element gets cloned, not the events that are bound to it.
$relationship.eq(0).clone(true);
Docs:http://api.jquery.com/clone/
Ok so issue is resolved, fiddle:
http://jsfiddle.net/WrSxV/1/
// add another select2
var counter = 0;
$('#addmore').click(function(){
var $relationship = $('.relationship');
var $clone = $("#RelationshipType").clone();
$clone[0].id = 'id_' + ++counter;
$clone.show();
$relationship.eq(-1).after($clone);
$clone.select2({ "width" : "200px" });// convert normal select to select2
//$('body').select2().on('change', 'select', function(){
// alert(this.id);
//}).trigger('change');
return false;
});
After cloning your object you have to reassign event for em:
var $clone = $relationship.eq(0).clone();
$clone.on("click", function_name);
Use .on to bind dynamically inserted elements to events like
$('body').on('click','#AddMoreRelationships',function () {
});

Categories