Post username on page - javascript

Is there some way i can do like i can fetch and show text inputs ?
Like this:
document.getElementById('input_id')
<input type="text" placeholder="username" id="input_id">
and then the output will be like this:
document.showElementById('box_id')
<div id="box_id">Welcome + text input</div>

With this:
var name = document.getElementById('input_id').value;
document.getElementById('box_id').innerHTML = "Welcome " + name;
That's it.
EDIT
Checking at your code, it looks that you want to create a showElementById method
Trivial, but just in case:
function showElementByIds(inputId, divId){
var name = document.getElementById(inputId).value;
document.getElementById(divId).innerHTML = "Welcome " + name;
}
Then, to use it:
showElementByIds('input_id', 'box_id');
Cheers

var username = document.getElementById('input_id').value;
document.getElementById('box_id').innerHTML = 'Welcome ' + username;

Related

Displaying Name from Browser link

is possible for example, to put this on browser
https://www.mywebsite.com/index.html + one X name, let's say Pedro
and once it opens it has a text
Automatically replace this with the name from domain link
So it would say,
Hi "Pedro", is possible? thanks!
You could do the following if your url looks like this.
https://www.example.com/Pedro
In order to ensure the DOM has loaded wrap it in a DOMContentLoaded event listener.
document.addEventListener("DOMContentLoaded", function(event) {
let name = window.alert(this.href.substr(this.href.lastIndexOf('/') + 1));
let new_h3 = document.createElement('h3');
new_h3.innerHTML = `Hi ${name}`;
document.getElementById("nameHolder").appendChild(new_h3);
});
or else you could do the following which is a bit more succinct.
let name = window.alert(this.href.substr(this.href.lastIndexOf('/') + 1));
document.getElementById("nameHolder")..innerHTML = "<h3>" + `Hi ${name}` + "</h3>";
Provided you can pass it as a query (i.e. https://www.mywebsite.com/index.html?Pedro), you should then be able to do something like this:
var name = decodeURIComponent(window.location.search.substring(1));
document.getElementById("nameHolder").innerHTML = "<h3>" + name + "</h3>";
Where you have some HTML element with an id of nameHolder.

jQuery append implementation is breaking

So I have this code that I am trying to alter –
Original:
jQuery(document).ready(function() {
var name = '';
var firstLastName = '[[T6:[[E48:[[S334:fr-id]]-[[S334:px]]:cons.first_name]]]] [[T6:[[E48:[[S334:fr-id]]-[[S334:px]]:cons.last_name]]]]';
var screenname = '[[T6:[[S48:0:screenname]]]]';
if (screenname) {
name = screenname;
} else {
name = firstLastName;
}
var splitName = name.split('');
var nameCheck = splitName[splitName.length-1];
jQuery('#personal_page_header h2').html("Support " + name + "'s Fundraiser" );
});
someone wrote this up and are no longer here, and what I'm trying to do now is figure out how to instead of replace the existing text, add to it.
So right now what this code does is it replaces the h2 content with the constituents registered name, or screenname.
What I'm trying to do now is append to that so that it will say something like
<h2>
Welcome to my fundraiser
<br/>
"Support" + name + "'s Fundraiser"
</h2>
but unfortunately what I tried breaks the code and stops it from working.
what I tried to do is this:
jQuery('#personal_page_header h2').append('<span><br />"Support " + name + "'s Fundraiser"</span>' );
I've tried to do a variety of other things that gave the same unsuccessful result.
Any help would be really appreciated!
Thanks
This should work for you:
jQuery('#personal_page_header h2').append("<span><br/>Support " + name + "'s Fundraiser</span>");
You've just got your quotations a little out of place.
You need to concatenate your code correctly, so if you'd like to keep the " use ' to concatenate. Further you need to escape the ' inside the string with \:
jQuery('#personal_page_header h2')
.append('<span><br />"Support ' + name + '\'s Fundraiser"</span>');

How to set the src of an img tag?

I have a javascript function that is getting the values of other html elements and I want to pass those values to the image tag. How do I Pass that?
My Function is below:
<script type="text/javascript">
function submitValues()
{
var firstname = document.getElementsByName("firstname")[0].value;
var lastname = document.getElementsByName("lastname")[0].value;
}
<img src="firstname=get_javascript_valuehere;lastname=get_javascript_valuehere;/>
Put an id on your image tag and use the following:
document.getElementById("myImg").src = "firstname=" + firstname + ";lastname=" + lastname + ";";
That's at least what you've asked for, but I imagine there is more to this question if you'd like to elaborate.
Use jQuery's .attr() method to modify the attribute of an element.
function submitValues() {
var firstname = $("[name=firstname]").val();
var lastname = $("[name=lastname]").val();
$("img").attr("src", "firstname=" + firstname + ";lastname=" + lastname + ";");
});
function submitValues()
{
var firstname = document.getElementsByName("firstname")[0].value;
var lastname = document.getElementsByName("lastname")[0].value;
var img = document.getElementById('fullName');
img.setAttribute("src","firstname"+firstname+"lastname"+lastname+";");
}
Add an id to the img to query it using the document.getElementById(), then set the src attribute using this code.
It should work.

String concatination in javascript

<script type="text/javascript">
function Msg1(){
var a="noida";
id=1;
document.getElementById('myText').innerHTML = '<p onclick="nice(id)">'+a+'</p>';
}
function Msg2(){
document.getElementById('myText').innerHTML = 'Try message 1 again...';
}
</script>
<input type="button" onclick="Msg1()" value="Show Message 1" />
<input type="button" onclick="Msg2()" value="Show Message 2" />
<p id="myText"></p>
when i click on Show Message 1 it send id as a charecter not 1 i want to it send me 1
Thanks
You could do something like:
'<p onclick="nice(\"' + id + '\")">'+a+'</p>';
Or:
'<p onclick="nice(' + escape(JSON.stringify(id)) + ')">'+a+'</p>';
But this gets very unreadable very quickly.
Using this method you can't send things that aren't easily serializable. A more robust, and involved, solution would use the DOM API and EventListener API.
Example:
var id = { foo: "bar" };
var p = document.createElement("p");
p.addEventListener("click", function () {
nice(id);
});
p.innerText = "ipsum lorem";
document.body.appendChild(p);
You already have concatenation right near where you need it:
'<p onclick="nice('+id+')">'+a+'</p>';
make your innerHTML as
'<p onclick="nice(\"' + id + '\")">'+a+'</p>'
Replace your Msg1() Javascript function as below
function Msg1(){
var a="noida";
var id = 1;
document.getElementById('myText').innerHTML = '<p onclick="nice(\"' + id + '\")">'+a+'</p>';
}

SPServices GetCurrentUser write variable into div

I don't know JavaScript but I need to use SPServices on my company intranet. I need to write the fieldNames into some divs on my page, how do I do this? Here's the SPServices script:
<script type="text/javascript">
$( document ).ready(function(){
var thisUsersValues = $().SPServices.SPGetCurrentUser({
fieldNames: ["FirstName", "LastName", "Picture", "JobTitle", "WorkPhone", "WebSite",],
debug: false
});
</sript>
Thanks!
var thisUsersValues = $().SPServices.SPGetCurrentUser({
fieldNames: ["FirstName", "LastName"],
debug: false
});
var name = thisUsersValues.FirstName + " " + thisUsersValues.LastName;
alert('Your name: ' + name);
I tested this and this is the correct usage. Just use "." syntax, or you could use thisUserValues['FirstName']; and thisUserValues['LastName']; to retrieve the properties.
From there, the other answer posted by Cana was correct:
var userDescription = "<div>" + name + "</div>";
var obj = $("#someObjId").append(userDescription);
I know this is old (I'm new to the site) but here is another option based off your JavaScript using DOM. It pulls the currentuser into a variable and using a DOM inserts into a div. This also works with an input field. Notice the .src for the picture.
<script type="text/javascript" language="javascript">
$(document).ready(function() {
var userdetails = $().SPServices.SPGetCurrentUser(
{
fieldNames: ["ID","EMail","UserName","FirstName","LastName","Picture","JobTitle","WorkPhone","Office"],
debug:false
});
document.getElementById('NameExample').innerHTML = (userdetails.FirstName + " " + userdetails.LastName);
document.getElementById('PhotoExample').src = (userdetails.Picture);
document.getElementById('EmailExample').innerHTML = (userdetails.EMail);
document.getElementById('TitleExample').innerHTML = (userdetails.JobTitle);
document.getElementById('OfficePhoneExample').innerHTML = ("Office" + " " + userdetails.WorkPhone);
document.getElementById('nameInputField').value = (userdetails.FirstName + " " + userdetails.LastName);
document.getElementById('emailInputField').value = (userdetails.EMail);
document.getElementById('OfficePhoneField').value = (userdetails.WorkPhone);
document.getElementById('titleInputField').value = (userdetails.JobTitle);
});
</script>
<div>
<span id="OfficePhoneExample"></span></br>
<span id="EmailExample"></span></br>
</div>
Maybe this could help you :
var $userDescription = "<div>"+ thisUsersValues.toString() +"</div>";
$("#yourDivID").append($userDescription);

Categories