Javascript text box value and focus order - javascript

I have the following Javascript:
function PageOnLoadHandler() {
outputFieldElement = document.getElementById("ConsultantCode"); //
var position = window.location.href.search("\\?");
if (position != -1) {
var querystring = window.location.href.substring(position);
outputFieldElement.value = querystring;
}
outputFieldElement.focus();
}
For the following html (cut down):
<body onload="PageOnLoadHandler();">
<br/>Enter Consultant Name:
<input name="ConsultantCode" type="text" id="ConsultantCode" size="30" />
<br/><center id="ErrorMessage"></center>
</body>
It gets the current url string, and attempts to put the querystring section of it into a textbox. My problem is that this only works if I comment out the outputFieldElement.focus() line. If this line is present- either before or after setting the value (or both), I can't see the value inside the textbox until I type- then the value appears! Any ideas?
I would like to both have the value, and set the focus to the textbox.
A complication- this isn't on a PC, its on a Mitel IP telephone. So I haven't been able to find out what browser it is using.

try using
window.onload = PageOnLoadHandler;
instead of using <body onload="....

Related

How to hide certain characters within an html input list?

I have an html input list, with an associated datalist, defined as follows:
<input list="mylist" id="my-input" name="friend-name"
placeholder="Begin typing friend's name here..."
required class="form-control">
The list itself (and the associated datalist) is working fine. However, each of my entries are of the form: "String [numeric_id]"
What I am wondering is if there is any way that I can somehow hide
the [numeric_id] part before the form is submitted.
I have looked at the pattern attribute, but that seems to limit the
actual data allowed in the input, which isn't what I want - I just
want the part between square brackets [] to be hidden, but still
submitted to the form.
It would be ok to move it to another input of type=hidden as well.
Is there any possible way to do that?
#isherwood, here is my form tag:
<form action="/chat_forwarding/modal_edit_msg.php" id="fwd-form" method="POST" class="form-inline" style="display: block;">
If you're not using any framework that support binding, you should listen to input events and update a hidden input based on that.
This is a function that may give you the idea:
let realInput = document.getElementById('real-input');
let userInput = document.getElementById('user-input');
userInput.addEventListener('input', function(value) {
const inputValue = value.target.value;
realInput.value = inputValue; // update the hidden input
const userInputResult = inputValue.match(/\[[^\[]*\]/); // the regex for [numberic_id]
if (userInputResult) {
userInput.value = inputValue.substring(0, [userInputResult.index - 1]); // -1 is to remove the space between the 'string' and the '[numeric_id]'
}
});
I should have mentioned that my input is also using Awesomplete (and jQuery). For this reason, binding normal events like keyup did not work (the event would fire whenever a user typed a key). I was able to achieve the functionality I wanted with the awesomplete-selectcomplete event as follows (this will add a hidden input element with value of the id from a string of the form "String [id]"):
$("#my-input").on('awesomplete-selectcomplete',function(){
var fullStr = this.value;
//alert(fullStr);
var regex = /\[[0-9]+\]/g;
var match = regex.exec(fullStr);
//alert(match[0]);
if (match != null) // match found for [id]
{
var fullName = fullStr.substr(0,fullStr.lastIndexOf("[")-1);
var x = match[0];
var id = x.substr(1, x.lastIndexOf("]")-1);
//alert(id);
$('#fwd-form').prepend('<input type="hidden" name="h_uid" value="' + id + '">');
$('#my-input').val(fullName);
}
});

How to put Parameter only with Javascript through URL in the website

I am using the software rimacon.
And i am using this URL: http://www.jabra.com.de/Support/warranty-checker
I want to send the Value of the serial number from Javascript (rimacon) into this input of this website: (see picture)
In this website, i click the mouse on the right and click "inspect Element/ Element Untersuchen". I get this HTML-Code:
<input type="text" class="serial-number">
i would like to change this into:
<input type="text" class="serial-number" value="xXx">
then i write URL like:
http://www.jabra.com.de/Support/warranty-checker/?xXx="0QYG06DF3FA"
or i would like to change this CODE into:
<input type="text" class="serial-number" name="PUT-Serial-number">
then i write URL like:
http://www.jabra.com.de/Support/warranty-checker/?PUT-Serial-number="0QYG06DF3FA"
i tried some Code with setAttribute or createAttribute and so on to get this fixed:
for example:
//var x = document.getElementsByClassName("serial-number").href="http://www.jabra.com.de/Support/warranty-checker";
var x = document.querySelectorAll("input.serial-number[href^='http://www.jabra.com.de/Support/warranty-checker']");
var y = x.innerHTML = "value="+seriennummer;
alert("y: "+y);
alert("Länge : "+y.length);
//var attr = document.createAttribute("Value");
//attr.value=seriennummer;
//var attr = x.setAttribute("Value",seriennummer);
//alert("attr: "+attr.value);
// this shall open window and show the serialnumber in this websites
url = escape("http://www.jabra.com.de/Support/warranty-checker");
var hpwindow = window.open("http://xxx:8081/sprungxbrett.php?TARGET="+url);
hpwindow.focus();
This Code is in function of onclick().
Please I need your Help! Is there some way to get fixed this JS-Code!
Because in "Inspect element/Element Untersuchen", you can add Attribute Value into this
<input type="text" class="serial-number" value="0QYG06DF3FA">
then this serial number truly display in the input this website.
Thank you very much.
this should solve getting the URL params as JSON format (wont show anything here, try any test file with url params, ex: test.html?this=that&that=this)
<p id="result"> result: </p>
<script>
function getUrlVars() {
var map = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
map[key] = value;
});
//get your values as JSON, one of the following
console.log(map);
document.getElementById("result").innerHTML += JSON.stringify(map);
return map;
}
getUrlVars()
</script>

How to grab value of read-only text field and use in angular js result

I have a textfield that is read only and pulling it's value from the query string. I can't get the value set in an output of javascript when bound with AngularJS.
<input type="text" class="form-control accountNumber" name="accountNumber" id="accountNumber" ng-model="accountNumber" ng-controller="main" data-placement="top" readonly>
function main($scope) {
var url = window.location.href;
var accountId = url.substr(url.indexOf("=") + 1);
$scope.accountNumber = accountId;
}
The account number needs to be placed into the "publisherId" field within the resulting javascript:
<script type="text/javascript" src="//cdnstatic.domain.com/"></script>
<script type="text/javascript">
window.addEventListener("load", function(e) {
var playerH = new Player({
adTag:"{{adTag}}",
fontElClass:"{{fontTag}}",
playerClass:"{{playerClass}}",
publisherId: "{{accountNumber}}"<===NEEDS TO BE REPLACED WITH VALUE FROM READ ONLY FIELD
});
});
</script>
To clarify:
1) function main($scope){} grabs the URL (which is also displayed in the textfield which is readonly), does some work on it and the value is stored in accountId.
2) That value is then supposed to be set in $scope.accountNumber, and used in the "publisherId:" field.
The resulting JavaScript is displayed to the user as text(not to be run on the page), and should have the {{accountNumber}} replaced with the value of the accountId.
The issue is that when the field is read only, its not showing the account number. It is also not setting the value in the publisherId field.
Here's my plnkr : Link,
I think your problem is that your controller is not defined for the entire view, just for your input.

Display Form Input as Stylized String - Javascript

I am trying to take input from a number field and display it somewhere else on the page.
Here is my HTML
<input id="dollar" type="text" name="mytextfield2" onkeyup="updateDollarDisplay();">
<div id="dollarValue"></div>
and my javascript
function convertDigitsToArray(number){
var s = parseInt(number).toString(10).split("").map(Number);
return s;
}
function updateDollarDisplay() {
var amount = $('#dollar').value;
var a = convertDigitsToArray(amount);
console.log(a[0]);
$('#dollarValue').text(a[0]);
}
Running the exact code in a javascript interpreter works fine, it gives me each digit as an element in the array. When I try to do the same through the HTML page it gives me NaN each time. Any ideas?
Fiddle here: http://jsfiddle.net/7mzo8eb5/2/ I'd like it to show to input in the grayed div on each input.
The problem is with var amount = $('#dollar').value;
value is not an attribute, but val is a function. Should be: var amount = $('#dollar').val();

displaying user content as typed in

When a user types in some value in a text box it should be displayed in a td as it is.
This is the code I've tried with a div,
<input type="text" name="userStr" id="userStr" onKeyUp="processValue()"/>
<div id="disp">
</div>
<script type="text/javascript" >
function processValue() {
var userval = document.getElementById("userStr").value;
//alert('userval'+userval);
document.getElementById("disp").innerHTML = userval;
}
I enter the value, &lt&gt &#40 &#41 &#35 &#38 , but it is showing as <> ( ) # &
instead of the original string (&lt&gt &#40 &#41 &#35 &#38 )
What is the standard way to do this.
While I typed stackoverflow showed exactly the same, I'll now view the source, but looking for insights from you.
Thanks.
Try:
document.getElementById("disp").innerHTML = userval.replace(/&/g, '&').replace(/</g, '<');
Alternatively, you could set the element text, but you'd have to deal with browser variation.

Categories

Resources