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();
};

create hyperlink with hyperlink+inputbox

I have a user profile page which url's first part is static and last part is dynamic like this
View profile
I want to create an inputbox where i can type id in input box and given id auto complete hyperlink with input-box value like this.
Type user ID [input-box]
View profile
please tell me how can i do this.

I'd use jQuery for that, i.e:
$( "#in" ).keyup(function() {
var value = $(this).val();
$( "#out" ).text( ' View profile ' );
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="in">
<p id="out"></p>
PS: How is JavaScript different from Java?

You can replace the URL with JavaScript using the location.replace function. You can tie that to a button's onclick event.
Type user ID: <input type='text' id='userid'>
<button type='button' onclick="location.replace('http://mywebsite.com/view/'+document.getElementById('userid').value);">View Profile</button>
You will likely want to add some error handling code. What if the User ID field is blank? What if they type "Mushroom" and you expect a number? What if they type ../../../index.html? If it is just for you, then you can assume you will type something valid.

Your code can be like this,
user ID: <input type="text" id="user_id" value="" onkeypup="javascript:change_url(this.value);”>
View profile
The above code calls a javascript function, change_url() on each key up.
You can write the function either in the header between [head] tags or at bottom before [/body] tag.
<script type="text/javascript">
function change_url(input_user_id) {
//-- get the value of old href
var x = document.getElementById("view_profile").href;
//-- append input-field user id
x = x + "" + input_user_id;
//-- set href value back with appened user_id
document.getElementById("view_profile").href = x;
}
</script>

<form> is causing problems with my JavaScript code

I have simplified my code down to a very basic level to try to figure out why, when I add a form to any of my HTML pages that contain Javascript, the page renders twice: once with the JavaScript and once without, putting me back where I started.
Here's the simple HTML:
<form action="test.php" method="post">
<div class="section">
<fieldset>
<p id="myP"></p>
<button type='submit' name='NewClassTypes' value='NewClassTypes' id='save_button'>Save</button>
</fieldset>
</div> <!-- ends section -->
</form>
<script type="text/javascript" src="inc/js/scripts.js"></script>
So all I have is an empty paragraph and a Save button.
Then I have this Javascript code that just simple writes "Hello world!" to the paragraph element, when the Save button is clicked:
var saveButton = document.getElementById("save_button"); // Save button
var displaySomeText = function () {
var myParagraph = document.getElementById("myP");
myParagraph.textContent = "Hello World!";
}
saveButton.onclick = displaySomeText;
The problem is that when I click on the Save button, "Hello world!" displays for a brief second and then disappears.
BUT it works just fine IF I remove the FORM element.
Any ideas why this might be happening?
In the real code I need to submit data to the database, and I want to be able to use _POST to get the data I need out of all my inputs.

The reason is, after clicking on the submit button, it "submits" the form. Try changing the button's type="button" and this will not happen:
<!------vvvvvvvvvvvvv Change this!!! -->
<button type='button' name='NewClassTypes'
value='NewClassTypes' id='save_button'>Save</button>
Else, you need to give return false in your function. That would also work:
var displaySomeText = function () {
var myParagraph = document.getElementById("myP");
myParagraph.textContent = "Hello World!";
return false; // Add this!
}

The submit button type has a special functionality: it causes the form it is put in to be submitted by the browser. Putting a click handler on it does not prevent this from happening. So, the result is what is expected.
In order to not submit the form, you need to change the button type:
<input type='button' name='NewClassTypes' value='NewClassTypes' id='save_button'>Save</button>
In this case, the action property of the form doesn't make sense, as well as the method - they both are not used.

You may find it easier to use jQuery when troubleshooting issues like that.
$('#save_button').on('click', function(e){
e.preventDefault(); // don't submit the form as usual.
$('#myP').text('Hello World!');
});

pass HTML link id to js AJAX function through modal plugin

I have over 1.5 million dynamically created (php/html/js) web pages that contain lists of up to 300 people, to whom I need to allow visitors to send messages by using a popup form that is triggered by link next to each person's name. I'm using the PopEasy jquery modals plugin http://thomasgrauer.com/popeasy/ .
All these modals/forms are identical, except for a unique recipient ID associated with each link that needs to be passed through to the AJAX code that fires to save the message to that person's record when the modal's form's Send Message btn is clicked (e.g. "1001', '1002' in the examples below).
For each page, I could dynamically create up to 300 form DIVs, one for each link, but would rather find a clever way to transfer the recipient ID with just one modal/form DIV, to cut down the bandwidth. I should be ok, if I can reference the ID of the link from within the AJAX code (as the "u" var in the example below).
Ideas?
(my competencies: js: "barely any" / html and php: "average".
Here is the code that works for just two links/divs/forms:
<a id="1001" class="modalLink" href="#modal_1001">Send msg</a>
<a id="1001" class="modalLink" href="#modal_1002">Send msg</a>
// the plugin uses the class to fire, and the href to know which of several DIVs of
// that class to use; if the a#id isn't needed, I can strip the "modal_" part out of
// the href to save having to parse it
<div id="modal_1001" class="modal">
<form method="post" action="">
<textarea>(write your msg here)</textarea>
<button type="button" onclick="storeMsgAjax(1001,1234)">Send message</button>
</form>
Close Form
</div>
<div id="modal_1002" class="modal">
<form method="post" action="">
<textarea>(write your msg here)</textarea>
<button type="button" onclick="storeMsgAjax(1002,1234)">Send message</button>
</form>
Close Form
</div>
And here is the js modal plugin function:
$(document).ready(function(){
$('.modalLink').modal({
trigger: '.modalLink', // id or class of link or button to trigger modal
olay:'div.overlay', // id or class of overlay
modals:'div.modal', // id or class of modal
animationEffect: 'slideDown', // overlay effect | slideDown or fadeIn | default=fadeIn
...(other options)...
close:'.closeBtn' // id or class of close button
});
});
And here is the AJAX code:
function storeMsgAjax(s,u)
{
var m = document.getElementById("msgtxt").value;
var url = "http://ifinallyfoundu.com/storeMsg.php?s="+s+"&m="+m+"&u="+u+"&t=" + Math.random();
xmlHttp2 = GetXmlHttpObject();
if (xmlHttp2 == null) {alert("Browser does not support HTTP Request"); return;}
xmlHttp2.onreadystatechange = function()
{
if (xmlHttp2.readyState == 4 && xmlHttp2.status == 200)
{
var formSaveResults = xmlHttp2.responseText;
document.getElementById("modal_"+s).innerHTML = formSaveResults+'<br><br>Close Form' ;
}
}
xmlHttp2.open("GET", url, true);
xmlHttp2.send(null);
}

Looks like I can add an onclick script to each link to put the ID in the innerHTML of a hidden page element, which should be accessible to the AJAX routine. I'm sure there is probably a more elegant solution, but this seems to work.

Refresh button using image in JavaScript

I am trying to make a refresh button, using an image (.jpg), in JavaScript for a website that every time it refreshes two images changes (uploaded from a database) but it wont work for some reason. This is my code so far:
<div align="center">
<SCRIPT LANGUAGE="JavaScript">
var body = document.getElementsByTagName("body")[0];
var s = document.createElement("input");
s.src = "/Volumes/playground_people/s1267664/html/dwd/buttons/next_btn.jpg";
s.type = "image";
body.appendChild(s);
document.write('<form><input type=button value="Next" onClick="history.go()"></form>')
</script>
</div>

Since it does not get clear to me what you actually want to achieve I can only guess what could help you.
The first thing is that your "Next"-input is missing some quotation marks around the type:
document.write('<form><input type="button" value="Next" onClick="history.go()"></form>');
I would advise you to put the form directly into the div-container instead of using the document.write.
Are you trying to add the image in the script to the button you defined below?
Then you have to refer to it, e.g. with an id:
<div align="center">
<input type="button" id="nextBtn" value="Next" onClick="location.reload(true)">
<script language="JavaScript">
var b = document.getElementById("nextBtn");
b.src = "/Volumes/playground_people/s1267664/html/dwd/buttons/next_btn.jpg";
b.type = "image";
</script>
</div>
I also removed the form, since it sends the image coordinates to the reloaded page, and used location.reload instead of history.go().
This code adds the image to the button, which refreshes the page when clicked.