We Keep Coding

Dynamically changing href value on an <a> when clicking on it

This is the HTML page, I am working on:
<div class="container">
<form id="script-approval-form" action="" method="post">
<h3 class="title-submitted">Script Approval</h3>
<h5> Below you will find the script that needs to be approved before being used: </h5>
<fieldset>
<textarea id = "textarea-script-approval" class="textarea-approval"
type="textarea" tabindex="1" required autofocus></textarea>
</fieldset>
<fieldset>
<input class="email-box" placeholder="Your Email Address (if clarification is needed)"
type="email" pattern=".+#COMPANY.com"
oninvalid="this.setCustomValidity('E-mail MUST end with #COMPANY.com')"
value="{{ user_info.email }}" tabindex="2" required>
<button id = "what" class="submit-btn" type="submit"><a id = "submit-lnk" class="submit-link"
href = "#"
>
Submit for Approval</a>
</button>
</fieldset>
</form>
</div>
It's a form with a pre-filled text-area and a submit button. The text-area is automatically filled in with this JS script:
const url = window.location;
const urlObject = new URL(url);
const script = urlObject.searchParams.get('authorize')
var decodedScript = window.atob(script);
document.getElementById("textarea-script-approval").value = decodedScript;
It gets the encoded base64 URL parameter (EXAMPLE: url.com/script_approval?authorize=DScdsaCs) and puts it as normal text in the page textarea. However, if the user clicks the submit button/link, he will be sent to another page. I need to pass the script in text form to the next page as well, so for this reason I have to:
Get current textarea value
Encode it in base64
Change href link to /script-sent?script=${encoded_string}
The next page will be opened with the same URL parameter
I will then use my old JS script to decode and get the string into my other pages textareas/input places
What I tried:
<script>
document.getElementById("submit-lnk").onclick = function() {
var script=document.getElementById("textarea-script-approval").value;
var encodedScript = window.btoa(script);
document.getElementById("submit-lnk").href = `/script-sent?authorize=${encodedScript}`;
return false;
};
</script>
I know for sure that the encodedScript contains the correct value. The problem comes after that when I change the href. Even though its written syntactically correct, the page just reloads or nothing happens. I tested the templated string and it shows fine as well. Can someone please give me any guidance? Thank you!

You can remove the anchor tag from within the button.
<button id = "what" class="submit-btn" type="submit">
<!-- remove this -->
<a id = "submit-lnk" class="submit-link" href = "#">Submit for Approval</a>
</button>
Instead of replacing the href you can simply redirect to the page directly
<script>
document.getElementById("submit-lnk").onclick = function () {
var script = document.getElementById("textarea-script-approval").value;
var encodedScript = window.btoa(script);
// instead of replacing the href you can simply redirect to the page directly
window.location.href = `/script-sent?authorize=${encodedScript}`;
return false;
};
</script>

Looks like the action on the form is blank. Try entering the path to the next page there.
Or use local storage to pass data in browser cache.

You should be able to do what you need to do with jQuery
jQuery('#what').click(function(){
jQuery('#script-approval-form').attr('action','insert link here');
jQuery(this).click();
};

IFrame object returning null when referenced from HTA containing the IFrame

I am tryting to automate a repeated task of form filling using HTA. I am opeing the web page into an IFrame. the very First page is the Login page. I am ABLE to access the username and password elements of that page (Displayed in IFrame) easily, and hence able to autologin by clicking a button in HTA. But now, the next page contains a textbox, which i need to fill and then again click a button. Now, i have a button in HTA. When i click this button , i want that the text box should populate with the value i have provided. But instead, i get this error, Unable to set property 'value' of a null reference. On this displaying this object using an alert, it displays 'null'. I am not getting, why i am able to reference the elements on login page and why not on inside pages.
Below is my code :
<html>
<head>
<HTA:APPLICATION
APPLICATIONNAME="HTA"
SYSMENU="YES"
NAVIGABLE="YES"
>
<meta http-equiv="x-ua-compatible" content="ie=11">
<title>HTA</title>
<script type="text/javascript">
window.resizeTo(700,700);
</script>
<script type="text/javascript" >
function Start() {
var iframePage = document.getElementById("iframeid").contentDocument;
var userId = iframePage.getElementById("userid");
var passwd = iframePage.getElementById("pwd");
var form = iframePage.getElementById("login");
userId.value='uu';
passwd.value='pp';
form.submit();
}
function Show() {
document.getElementById("iframe").style.display = "block";
}
function FillRncntl() {
var iframePages = document.getElementById("iframeid").contentDocument;;
var runcntl = iframePages.getElementById("PRCSMULTI");
runcntl.value='test';
}
</script>
</head>
<body>
<form class="form" name="form">
<input class="links" type="button" value="Show PIA" onclick="Show();" />
<input class="links" type="button" value="Login" onclick="Start();" />
<input class="links" type="button" value="Enter Runcontrol" onclick="FillRncntl();" />
</form>
<br>
<div class="iframe" id="iframe" style="display:none">
<iframe application="no" src="www.xyz.com" width="600" height="600" id="iframeid">
</div>
</body>
</html>
-Show PIA button shows login page . Working Fine.
-Login button is used to login automatically. Working Fine.
-Enter Runcntl button is used to fill some textbox. NOT Working Fine.
Its not only with this text box, i have same issues with other elemts from this page as well.
PS : Its a Peoplesoft Intranet Website.

PeopleSoft content is contained within an iFrame itself so you need to grab the targetContent iFrame and search for the element in there.
The initial PeopleSoft login page is not displayed within an iFrame.
I changed the last element ID so that this will work on the component: PeopleTools->Process Scheduler->System Process Requests
function FillRncntl() {
var iframePages = document.getElementById("iframeid").contentDocument;
var targetContent = iframePages.getElementById("ptifrmtgtframe").contentDocument;
var runcntl = targetContent.getElementById("PRCSRUNCNTL_RUN_CNTL_ID");
runcntl.value='test';
}

Inserting the URL output of Javascript in HTML as HREF

I have a form on my website where inputs are given by visitors. After submitting it, they get redirected to the URL generated by Javascript on base of their inputs.
Thus to illustrate: If they give Data1 and Data2 as input, they get redirected to www.example.com/ajaData1+Data2
Actually, I don't want to redirect them to any URL. I want that they get a href to see after they click on the submit button so that they can choose whether they want to go to that URL or not.
This one is my JavaScript
<script type="text/javascript">function goToPage(){
var date = $('input[name=date]:checked').val();
var time = $('input[name=time]:checked').val();
var subject = $('input[name=subject]:checked').val();
window.location.href ="http://bay02.calendar.live.com/calendar/calendar.aspx?rru=-"+date+"-"+time+"-"+subject+"-";}</script>
And this one is the html code that I want to modify. My question is how I can insert the output of the javascript into the href section of my HTML?
<div class="group submit">
<label class="empty"></label>
<div><input name="submit" type="submit" onclick="goToPaget()" value="Get your appointment!"/></div>
</div>
<div id="form-message" class="message hide">
Thank you for your request
<div id="output" class="message hide "></div>
<h4>Add To Calender</h4>
</div>

Something like this:
document.querySelection("div#form-message h4 a").setAttribute(
"href",
PUT YOUR VALUE HERE
);

Solution using jQuery selector to set the href of your anchor after generating the string from user input:
$('.group.submit').on('click', 'input[type="submit"]', function(){
var date = $('input[name=date]:checked').val();
var time = $('input[name=time]:checked').val();
var subject = $('input[name=subject]:checked').val();
var link = "http://bay02.calendar.live.com/calendar/calendar.aspx?rru=-"+date+"-"+time+"-"+subject+"-";
$('a[title="Add To Calender"]').attr('href', link);
$('#output').removeClass('hide');
}))
Add this code to your script and it should generate the appropriate link and assign the href to your "Add To Calender" anchor.

Maybe you can do with this:
<script>
$(document).ready(function(){
$('#modalon').click(function() {
$.ajax({
$('#imgloada4b').hide(); // hide old image
var urload = "<?php bloginfo('template_url') ?>/img/loading.gif";
$('#modal1Desc').html("<img href="/img/loading.gif" id='imgloada4b' src='"+urload+"'>"); // show new
});
});
});
</script>
it's very simple solution, not absolute good, but it's a solution, first hide te old image and add another in the parent element of image.

How to change iframe source pieces with javascript?

So I am trying to make a function that can replace the src of the iframe. In the iframe there would be a map with two places. In the html code there are two forms for the place ID-s.
I just cannot get this to work.
Here is the HTML code:
<div id="start">
<label for="startLocation">Start location ID:</label>
<input type="text" id="startLocation" name="startLocation" value="" ><br><br>
</div>
<div id="dest">
<label for="destination">Destination ID:</label>
<input type="text" id="destination" name="destination" ><br><br>
</div>
<button onclick="changeMap()">Show the map!</button><br><br>
</form>
<iframe id="map" width="600" height="450" frameborder="0" style="border:0" src="" allowfullscreen></iframe>
This would be the function:
function changeMap(){
//place IDs to put into url
var start = document.getElementById('startLocation').value;
var dest = document.getElementById('destination').value;
//pieces of the url
var mapSource1 = "https://www.google.com/maps/embed/v1/directions?origin=place_id:";
var mapSource2 = "&destination=place_id:";
var mapSource3 = "&key=AIzaSyDMtNzjQdNk-FX1hz7IWVcNiby1B8xiZeg";
var mapSource = mapSource1+start+mapSource2+dest+mapSource3;
//iframe
var iframe = document.getElementById('map');
//changing the src of the iframe
iframe.src = mapSource;
}

The line
<button onclick="changeMap()">Show the map!</button><br><br>
may be causing the problem.
To begin with, button elements, if not given a type="button", are considered submit buttons. So every time the button is pressed, the form gets submitted and the browser starts loading a different page before the JavaScript has time to do much.
Secondly, I see you are using onclick to attach the event handler. If your script has to be above the form in your HTML, this will result in changeMap being undefined. I would suggest attaching the event handler with JavaScript, something like this:
<button type="button" id="show-map">Show the map!</button><br><br>
var btn = document.getElementById('show-map');
btn.addEventListener('click', changeMap);
Note that because the this is selecting the button element right here, either the script tag must be placed below the button (so the button is around--can't select nothing!) or the JavaScript needs to be placed in a document.onReady function, so that the script won't fire until the page finishes loading (which means the button will be fully loaded).
Unless you're using document.onReady, the order of the script tag and button really matter. If the script references the button, the button comes first. If the button references the script, the script must come first.
Wrapping in some sort of document.onReady is common practice. jQuery has a function ($.ready) that can be used to do this, but if you're brave you can also do it without jQuery.
Also, keep in mind addEventListener doesn't work on older IE. You could polyfill it or use jQuery.

Javascript not changing html background color persistenly

everybody. I'm hoping you can help me here, I'm trying to change the color of the body section of my document through javascript by clicking a button.
There are three buttons, each sets a background color. The problem is: When I click one of 'em, it changes the background color for just a second, then it returns to the originally set color, here's a sample of my code:
<html>
<head>
<script type="text/javascript">
function colorish(my_color){
if (my_color === 'gray'){
document.body.style.background = '#CCCCCC';
}else if (my_color === 'orange'){
document.body.style.background = '#FF9900';
}else if (my_color === 'blue'){
document.body.style.background = '#C1DAD6';
} else {
alert('on else');
}
}
</script>
</head>
<body style="background: orange;">
<form>
<button name="back_color" onclick="colorish('gray')">Gy</button>
<button name="back_color" onclick="colorish('orange')">Oe</button>
<button name="back_color" onclick="colorish('blue')">Be</button>
</form>
</body>
</html>
The script is on a separate file on my environment, but it is the exact same.
If in the script I include:
onload = selector();
function selector(){
var buttons = document.getElementsByName('back_color');
buttons[0].onclick = colorish('gray');
buttons[1].onclick = colorish('orange');
buttons[2].onclick = colorish('blue');
}
It just enters every buttons[].on... assignment and leaves the background set to the last assignment, being blue in this case.
I'm not an expert so maybe there's something I'm missing about html with js.

Without declaring a type for your buttons, they act as though they are type="submit". Since there's no configured action parameter on your <form> element, the action is the same page on which they are accessed. It's not that the background is only appearing for a split second and then returning to the normal color, the page is reloading and defaulting back to that color just as if you had just loaded it.
To stop this behavior, give each of your buttons a type="button":
<button type="button" name="back_color" onclick="colorish('gray')">Gy</button>
<button type="button" name="back_color" onclick="colorish('orange')">Oe</button>
<button type="button" name="back_color" onclick="colorish('blue')">Be</button>
As a side note, if you're not using buttons as part of a form to submit data, you don't need a corresponding <form> node - they will function and be standards-compliant all by themselves.

Removing the <form> tag will fix your problem. Clicking the button submits the form and reloads the page, resetting the page to its original state.