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

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

Related

how do I create a javascript function that changes the html when a form submit button is pushed in django

I can easily update the html when it's not part of the form's submit or button. Or even when it's just a pure button element (rather than an input from a form). However, when I try to append a string to the class "chatGoesHere", nothing happens. The consolealso quickly reloads since the form is going to \send.
I'm happy to post my views.py and urls.py, however, I'm pretty sure the issue is inside of my html document below:
<p class="chatGoesHere" id="chatGoesHere"> 1st Item! </p>
<form action="\send\" method="post">
<input type="text" name="userMessage" />
<input type="submit" value="Send to smallest_steps bot" class="sendButt" id="sendButt" />
</form>
<script>
var btn = document.getElementById("sendButt");
btn.addEventListener("click", updateChat);
function createMenuItem(name) {
let li = document.createElement('p');
li.textContent = name;
return li;
}
const td = document.getElementById('chatGoesHere');
td.appendChild(createMenuItem("TEST2"))
function updateChat(){
const td = document.getElementById('chatGoesHere');
td.appendChild(createMenuItem("TEST3"))
}
</script>
I'd like it so that every time a user pushes the submit button of the form something gets added to the page without the page reloading.
Thank you
You need to use django with sockets.
Take a look at this walk through.
Helped me to do the same thing a few years ago!
https://channels.readthedocs.io/en/stable/tutorial/part_2.html

How to make a function which will trigger download of specific file for specific key entered by user?

I have made a text box and a button. Now can anyone please help me making a function of how I can do this?
I want the user to enter a specific alphanumeric key which will be given by the website end in some other way. It will be alphanumeric. The user will have to enter the key in the text box and then click on the button to download a specific file that only the alphanumeric key can access. Then if the key match with a particular file, it will get downloaded. There will be already available so many other files too but one with the matched key will get downloaded. Please help me...
My code :
<center>
<input class="keyBox" type="text" placeholder="Enter your download key">
<br><br>
<div class="text-center">
<button type="submit" class="btn btn-style btn-primary">Download</button>
</div>
</button>
</center>
I don't know your exact requirements, but this should work, assuming you have a server with an API endpoint that takes the key as a query parameter. (Adjust the generated URL according to your requirements.)
<!-- Add this after the HTML in your question -->
<script>
function onClick(event) {
// You should change the button's type to "button".
// Then you won't need this line.
event.preventDefault()
const inputElement = document.querySelector('input')
const filename = inputElement.value
location.href = `/path/to/${filename}`
}
const button = document.querySelector('button')
button.addEventListener('click', onClick)
</script>
As long as the API endpoint returns the correct Content-Disposition headers, the browser should attempt to download the file instead of navigate to the URL.
You should probably use id attributes so that document.querySelector doesn't select the wrong elements. Then you can use document.getElementById instead.

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.

<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!');
});

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).

Categories