How to change the value of this input code with javascript? - javascript

This is the javascript -
<script src='//www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load('search', '1', {language: 'en', style: google.loader.themes.BUBBLEGUM});
google.setOnLoadCallback(function() {
var customSearchOptions = {};
var orderByOptions = {};
orderByOptions['keys'] = [{label: 'Relevance', key: ''} , {label: 'Date', key: 'date'}];
customSearchOptions['enableOrderBy'] = true;
customSearchOptions['orderByOptions'] = orderByOptions;
var customSearchControl = new google.search.CustomSearchControl('001216773833632189276:ki_enp2eefa', customSearchOptions);
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.setAutoComplete(true);
customSearchControl.draw('cse', options);
}, true);
</script>
And its returning input code is with table column-
<td class="gsc-search-button">
<input type="button" value="Search" class="gsc-search-button" title="search">
</td>
Here i want to set the value GO. How can i get it ?

if you only have 1 element in your page follow this:
var searchField = document.getElementsByClassName("gsc-search-button")[0];
searchField.value = "GO";
Example : http://jsfiddle.net/uN2NV/
for multiple elements Try this:
var searchField = document.getElementsByClassName("gsc-search-button");
for(var i =0; i<searchField.length;i++)
{
searchField[i].value = "GO";
}
Example: http://jsfiddle.net/uN2NV/1/
For distinct element among multiple elements that share the same class:
var searchField = document.getElementById("distinct");
searchField.value = "GO";
Example: http://jsfiddle.net/uN2NV/2/

document.querySelector(".gsc-search-button").value = "GO";

if you want just that element, give it an ID
then search for it
var btn = document.getElementById("searchButton");
btn.value = "GO";
If you know that this will be the only item on the page with this class, or want to select all elements with the gsc-search-button class, then one of the other answers will work without modifying the markup.

Related

how to insert a value of each iterations dynamically in an id using jquery?

I need to insert value of each iteration in id="funDirName" and id="addr1" and i have added the below code block for reference:
$(document).ready(function() {
var types = [];
var address1 = [];
var otherTypes = [];
$("input[id*='street_address_']").each(function(index) {
otherTypes.push($(this).val());
address1 = otherTypes[index].split(',');
var obj = {};
obj.funName = address1[0];
obj.addr1 = address1[1];
types.push(obj);
console.log("address1");
console.log(address1);
console.log(types);
var funDirName = address1[index].funName;
$('#funDirName').text(funDirName);
$('#addr1').text(address1[1]);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id = "funDirName" style = "margin: 0;" ></p>
<p id = "addr1" style = "margin: 0;" ></p>
// try to change
$('#addr1').val(address1);
// into
$('#addr1').text(address1);
/* val() method works only with form elements like inputs
*/

How to change a field type in netsuite?

I am trying to create an online form using Netsuite.
We have a set for predefined fields like firstname, lastname, etc.
In the same we have a
NLSUBSCRIPTIONS
tag but the field type by default is drop down with multiple select option.
How can I change this drop down to a checkbox?
If you use a custom template you can hide the drop-down and iterate its options to create your own checkboxes.
e.g.
<div class="regFieldWrap">
<span class='cbExpand hideNsLabel'><NLCUSTENTITY_LIST_FIELD></span><input class="otherShadow valid" type="text" name="custentity_list_field_other"><span class="multiProto cbHolder"><input type="radio" name="custentity_list_field"><label class="cbLabel"></label></span>
</div>
and then
<script>
jQuery(function($){
// convert multi select to checkbox
$("span.multiProto").each(function(){
var proto = this;
var selName = $(proto).find("input").attr("name");
var otherCB = null;
$("select[name='"+selName+"']").css({display:'none'}).each(function(){
var sel = $(this);
var isReq = sel.hasClass('inputreq');
if(isReq) sel.removeClass('inputreq');
sel.find("option").each(function(){
if(!this.value) return;
var newby = $(proto.cloneNode(true));
var cb = newby.find("input").val(this.value);
if(isReq) cb.addClass('cb_selectone');
newby.find("label.cbLabel").text(this.text);
$(newby).removeClass('multiProto');
if((/\bother\b/i).test(this.text)){
var otherField = $("input.otherShadow[name='"+ selName+"_other']").each(function(){
var newOther = this.cloneNode(true); // strange but it gets around an IE issue
$(this).remove();
$(newby).find("input").data("conditionalOther", newOther);
newby.get(0).appendChild(newOther);
});
otherCB = newby;
} else proto.parentNode.insertBefore(newby.get(0), proto);
});
sel.get(0).options.length = 0;
});
if(otherCB) proto.parentNode.insertBefore(otherCB.get(0), proto); // make sure this is the end element
});
});

On Change not firing when input value is entered

I cannot figure out why my input is not showing the results of my calc. based on the input change. I have checked to see if there is an output in the console.log and there is, I am use an IDE environment to develop an have noticed errors when coding that don't involve the code it is the IDE I'm wondering if this is the case? Or is there something not right with the code on my part.
Any help would be appreciated
HTML
<td>InPut</td>
<td>
<input class="" id="bhp_1" type="number" value="440">
</td>
<td>OutPut</td>
<td>
<input class="" id="bpm_l60" type="number" value="567.11">
</td>
JavaScript
var manualEntry = function(){
var bhp = parseFloat($('#bhp_1').val());
var bhp2 = parseFloat($('#bhp_2').val());
var bhp3 = parseFloat($('#bhp_3').val());
var bhp4 = parseFloat($('#bhp_4').val());
var bhp5 = parseFloat($('#bhp_5').val());
var bhp6 = parseFloat($('#bhp_6').val());
var bhp7 = parseFloat($('#bhp_7').val());
var bhp8 = parseFloat($('#bhp_8').val());
var bhp9 = parseFloat($('#bhp_9').val());
var bhp10 = parseFloat($('#bhp_10').val());
var bhp11 = parseFloat($('#bhp_last').val());
return {
val: bhp,
val2: bhp2,
val3: bhp3,
val4: bhp4,
val5: bhp5,
val6: bhp6,
val7: bhp7,
val8: bhp8,
val9: bhp9,
val10: bhp10,
val11: bhp11
}
}
manualEntry();
// console.log(manualEntry());
//Filter for return object
var bhpKeys = Object.keys(manualEntry())
var bhpmatchingKeys = bhpKeys.filter(function(key) {
return key.indexOf('val', 'val2', 'val3', 'val4', 'val5', 'val6','val7','val8','val9','val10','val11') !== -1
});
var bhpmatchingValues = bhpmatchingKeys.map(function(key) {
return manualEntry()[key]
});
var bpm_l60 = function() {
var mySpline = new MonotonicCubicSpline(
[4000, 8000, 15000, 20000, 25000, 30000, 35000, 40000, 60000, 80000, 100000], bhpmatchingValues);
var total = mySpline.interpolate(43592.990983668795);
$('#bpm_l60').val(+total.toFixed(2));
$('#bpm').val(+total.toFixed(2));
return total;
};
bpm_l60();
Onchange listener
document.getElementById("bhp_1").onchange = (function() {
manualEntry();
bpm_l60();
});
Here is a Code pen example of the problem I'm having.
http://codepen.io/coryk/pen/zqgPyz?editors=1011
Put your js code inside
window.onload = function() { }
Where are you calling the onchange listener? If it's before the <input> elements are created, it won't work. You're already using jQuery, try
$(document).on("change", "#bhp_1", function () {
manualEntry();
bpm_l60();
});
Try changing your onchange event to the following:
document.getElementById("bhp_1").onchange = function() {
manualEntry();
bpm_l60();
}
What you are currently doing is wrapping your function in an additional method call () which is not the correct syntax to use for binding an onchange event to an element.

Populate multiple fields with javascript

I am new to javascript and I can't populate many fields with one click.
<script>
function addTxt(txt, field)
{
var myTxt = txt;
var id = field;
document.getElementById(id).value = myTxt;
}
</script>
<input type="text" name="xx" id="info" autofocus="required">
<p>x</p>
I've got 3 more fields.
Thanks.
You can use
function addTxt(txt, ids)
{
for (var i=0, l=ids.length; i<l; ++i) {
document.getElementById(ids[i]).value = txt;
}
}
And call it like
addTxt('Some text', ['id1', 'id2', 'id3']);
You can populate multiple fields. I have shared a jsfiddle link. You can populate multiple fields using this code.
function addTxt(_val, _id,_no)
{
var _myTxt = _val;
var _id = _id;
for(var i=1;i<=_no;i++){
document.getElementById(_id+i).value = _myTxt;
}
}
Click here to see DEMO
I think you don't need a function to do this.
Just use
document.getElementById('id1').value
= document.getElementById('id2').value
= document.getElementById('id3').value
= 'Some text';
Or, if you think document.getElementById is too long, use a shortcut:
var get = document.getElementById;
/* ... */
get('id1').value = get('id2').value = get('id3').value = 'Some text';
Try getting the elements by tagName or by className instead of by id, then using a for loop to iterate through each one.

Javascript: Problem regarding creating a dropdown list using javascript?

I'm trying to create a dropdown list from an array on my overlay (div element) using javascript.
In this example,
spcodelist = [u'CA125', u'HCM112', u'HCM147', u'HCM97', u'HKI128', u'HKI158', u'HKS161', u'HKS231', u'TKA230']
Here are related lines of code:
var pcode_form = document.createElement('form');
div.appendChild(pcode_form);
var pcode_select = document.createElement('select');
pcode_form.appendChild(pcode_select);
var i = 0;
var spcodelist = document.getElementById('spcodelist').value;
spcodelist = spcodelist.replace("[","");
spcodelist = spcodelist.replace("]","");
var spcodearr = new Array();
spcodearr = spcodelist.split(', ');
for (i=0;i<=spcodearr.length;i++){
spcodearr[i] = spcodearr[i].replace(/u'/g,"");
spcodearr[i] = spcodearr[i].replace(/'/g,"");
var pcode_option = document.createElement('option');
pcode_option.text = spcodearr[i];
pcode_option.value = spcodearr[i];
pcode_select.appendChild(pcode_option);
}
With this code, the dropdown list works fine but code after it will not work any more. I don't know what's the problem? How can I solve it? Or is there any better solution? Thank you very much.
I don't know what you are doing wrong, but the following works fine and should work in any browser. I've added a remove button so you can add and remove the select as often as you like.
<script type="text/javascript">
function addSelect(id) {
var div = document.getElementById(id);
var pcode_form = document.createElement('form');
pcode_form.id = 'f0';
div.appendChild(pcode_form);
var pcode_select = document.createElement('select');
pcode_form.appendChild(pcode_select);
var spcodelist = document.getElementById('spcodelist').value;
// Do replaces in one go
spcodelist = spcodelist.replace(/[\[\]\'u ]/g,'');
var spcodearr = spcodelist.split(',');
for (var i=0, iLen=spcodearr.length; i<iLen; i++) {
pcode_select.options[i] = new Option(spcodearr[i],spcodearr[i]);
}
}
</script>
<button onclick="addSelect('d0');">Add select</button>
<button onclick="
var el = document.getElementById('f0');
el.parentNode.removeChild(el);
">Remove form</button>
<div id="d0"></div>
<textarea id="spcodelist" style="display:none">[u'CA125', u'HCM112', u'HCM147', u'HCM97', u'HKI128', u'HKI158', u'HKS161', u'HKS231', u'TKA230']</textarea>

Categories

Resources