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

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.

JavaScript/HTML | Making HTML paragraph equal to User Input

I'm beginner in HTML and I wanted to know, how I can make a paragraph in the HTML-Body equal to a text that the user has written into a textbox in the HTML-Body using a JavaScript function. Are there any ways to do that? And another question: What is happening, when the user clicks on a "Submit" button? Does HTML write all the input of the user into variables?
(EDIT) So, here's my code (HTML):
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
<link href="stylesheet.css" rel="stylesheet">
</head>
<body>
<div class="input-text">
<input type="user-answer" id="uA1">
<p id="paragraph"></p>
<input type="button" onClick="inp.input();" value="Write Text">
</div>
</body>
</html>
JavaScript:
var inp = document.getElementById('uA1');
var p = document.getElementById('paragraph');
inp.addEventListener('input', function() {
p.textContent = inp.value;
});
It still doesn't work.

When clicking 'submit' button browser serialise content of the containing that button form to url-encoded string (name1=value1&name2=value2&etc=etc) and perform the http request described in the form tag (action and method attributes). It will not create any variables or save its. All values already saved in properties of form elements (nodes of DOM tree).
To sync your input with paragraph you have to add event listener to that input that will listen if user insert any text there and then use inputs value as text content of the paragraph.
var inp = document.getElementById('myArea');
var p = document.getElementById('myP');
inp.addEventListener('input', function(){
p.textContent = inp.value;
});
See it on jsFiddle.
You can see that in this example I used the property value of the textarea DOM node (selected by it's id). That's the place where the data of the form is stored but until you click 'submit' button.

For the question about what happens when user click on "submit" button, generaly all the information included in your input are stored in php variable. I don't think you want to work with php, but this is as easy as it :
<form method = "post" action = "next.php">
<div>
<input id = "id" name = "id" placeholder = "your id here..." />
<input id = "pass" name = "pass" placeholder = "your pass here..." />
</div>
<div>
<input id = "btn_valid" value = "Valid information" />
</div>
</form>
In this example, I made a short form, with two input to let user type his id and his password. If you specified the "name" tag (like I did in the two input "id" and "pass"), you will be able to get them in your php "next.php" file like this (in another page, in this case in the page "next.php") :
<?php
$id = $_POST['id'];
$pass = $_POST['pass'];
?>
Because you specified to go to "next.php" in the form parameters, you will be able to get these data by calling "$_POST['name-of-the-input']". And it works for all kind of element which can have a "name" tag !
Last information, a php file can contains html, javascript, or php code ! But you need to execute it via a server (like Xampp).

save page as html along with contents

I have a simple JS function that lets the user input their first and last name and onclick displays their full name.
Is there a way to include the user's submitted content in the text field when the user saves the page as html and reopens it?
function getFullName() {
var firstName, lastName, fullName;
firstName = document.Application.txtFirstName.value;
lastName = document.Application.txtLastName.value;
fullName = firstName + " " + lastName;
document.Application.txtFullName.value = fullName;
}

The simplest workaround would be that if a user enters text into an input element and then—before submitting—prints the page to PDF (Menubar > File > Print > Save as PDF or the like), their content is included in the resultant PDF file. Would that help?
Otherwise, you could write a function to be executed upon click of your button, and have that function first preventDefault (preventing it from reloading the page and clearing the form fields, if its type="submit"), and then have it write their name to a variable and prompt them to save the page:
http://jsbin.com/yelun/1/edit
<form id="nameForm">
First Name<br />
<input type="text" name="first" /><br />
<br />
Last Name<br />
<input type="text" name="last" /><br />
<br />
<button type="submit" onclick="processForm(event)">Submit</button>
</form>
var processForm = function(event) {
event.preventDefault();
var form = document.getElementById('nameForm');
var firstName = form.first.value;
var lastName = form.last.value;
var fullName = firstName + ' ' + lastName;
alert('Hello, ' + fullName + '. Please now save this page as HTML via your browser\'s `File` menu.');
};
Additionally, you could try wrapping your button in an a or area element, setting that element's href to your web page's URL, and adding a download attribute to that element. This is not something I can easily demo in a generic online sandbox, but the download attribute:
…indicates that the author intends the hyperlink to be used for downloading a resource.
Essentially, it makes the browser download the linked location, rather than navigating the browser to the linked location.
If you can't wrap the button or its text in an a or area to your liking, you could create, style, and script a div to look like a button, and wrap that div in an a or area.

How to pass javascript prompt value to a view

Is there a way to pass a js popup value directly to a python/django view, or is necessary to capture this value with a javascript function and then do an ajax call?
For example:
<form>
<input type="text" name="name"/>
<input type="submit" id="submit"/>
</form>
<script type="text/javascript">
function myFunction() {
$('#submit').click(function() {
var name=prompt("Please enter your name","");
});
}
</script>
If it can be done directly, how would this be done?

You would have to do something along the lines of:
$('#submit').click(function() {
var name = prompt("Please enter your name", "");
$.post('/url/to/django/handler', {'name': name});
});
to get the value the user filled out in the prompt back to your django app.

If you want to modify the current view, you can use Javascript to modify the DOM, as in:
$('#myDiv').html(name)
Which will replace the contents of the div with id "myDiv" with the value you captured in "name".
If you're talking about a different view entirely, then you're always going to have to do a server call (via AJAX or a form submission) to get the value from the client to the server!