Develop Reference

Get input field value from Elementor Pro Form

I created a form using Elementor Pro Form widget. Now I want to write some code and I need to get the value of the input fields from the Elementor Pro Form. How can I do that?
Here is what I did:
Created a form with the Elementor Pro Form widget. Fields: Email, Website URL. I added ID to both of them.
Email input field id: email
Website URL input field ID: websiteurl
Submit button ID: analysee
Imported HTML widget to my page and tried to DOM the value of the Website URL input field. I added an Event Listener to the button (that works). When the button is clicked it should alert the value of the Website URL input field.
When I do that I get the following error:
Uncaught TypeError: Cannot read properties of null (reading 'value')
at HTMLButtonElement.<anonymous>
Here is my code:
<script>
let analyse_dugme = document.getElementById("analysee");
let website_url = document.getElementById("websiteurl");
analyse_dugme.addEventListener("click", function(){
alert(website_url.value);
});
</script>
How can I solve this?
Thank you for your time.

You can use the val() property to retrieve the input's value, by doing something like this:
jQuery(document).ready(function($) {
$('#theForm').submit(function() { // #theForm to select the whole form
let analyse_dugme = $("#email").val(); // get the email value
let website_url = $("#websiteurl").val(); // get the website url value
});
});
Or you can do something like this and get an associative array with just the values:
$('#theForm').submit(function() {
var $inputs = $('#theForm :input');
var values = {};
$inputs.each(function() {
values[this.name] = $(this).val();
});
});

JavaScript Button input and output reset

I'm working with a button and a text label in javascript and HTML. I have a code that clears the input text label, but i also need the same button to clear the output message it gives = "helloNameOP". How would I add the 2 in the same function? I have both my codes listed below, that work perfectly separated, but I cant figure out how to put them together to work simultaneously.
What I have tried:
//for removing the Input text label:
onclick = document.getElementById("helloNameInput").value="";
//for removing the Output message recieved:
inputField = document.getElementById("helloNameOP")
document.getElementById('helloNameOP').textContent = " "
I'm not a javascript person, more of a kotlin gal, so I'm trying to learn.

If I’m understanding correctly, you can get a reference to the button, and then add an event listener.
document.getElementById("the-button-id").addEventListener("click", function () {
document.getElementById("helloNameInput").value = "";
document.getElementById("helloNameOP").textContent = "";
});

Get user input (items) and reprint them on the screen in a sorted order

So, i am very new, i am taking a course in web design.
My assignment is to build a form that takes user input 10 fields and sort the input then display it back in the web page with the current date and time.
I'll sort the time/date later for now..
First i created a form with all the said input fields using a table.
input type="text" required="required" name="Propellers" maxlength="20" value=""
and so on...
Then i wrote a function using variables and then put the variables in an array named accessories:
<script>
function gopro() {
parts.sort();
parts.reverse();
var input = document.getElementById("Propellers").value;
var input = document.getElementById("Batteries").value;
var input = document.getElementById("Gimbal").value;
var input = document.getElementById("Micro_HDMI").value;
var input = document.getElementById("Camera_Housing").value;
var input = document.getElementById("Carry_Bag").value;
var input = document.getElementById("Stabilization").value;
var input = document.getElementById("Karma_Drone").value;
var input = document.getElementById("Karma_Grip").value;
var input = document.getElementById("Hero_6_Camera").value;
var accessories = [Propellers, Batteries, Gimbal, Micro_HDMI, Camera_Housing, Carry_Bag, Karma_Drone, Karma_Grip, Hero_6_Camera];
document.getElementById("parts").innerHTML = accessories;
}
</script>
Then I call the function when button is clicked onclick="gopro()
to display (return) the input values on the page:
id="parts"
But when i click the submit button the form just resets. Wondering why the form just resets instead of producing output on the web page?
thx

form gets submitted to its action attribute, if no action is provided, form is submitted to current page url
use e.preventDefault() in your function at start and then make calculations
Also in your code, you have assigned the input variable all the values one by one so how the accessories variable will have values you want???

Alternative to keyup for pulling value from radio field

I am trying to edit a bit of code which is close to working. I want the text to first show "RSVP" but then pull the value of the radio box when someone selects it and uses it as the text of the main text.
https://jsfiddle.net/spadez/7gyrd08w/4/
It nearly works but this code snippet doesn't seem to pick up the value of the radio box. I think it's perhaps because keyup doesn't work on radio fields but I'm not sure how I can get this value.
function initInput() {
input = document.getElementById('input');
input.addEventListener('keyup', updateText);
input.value = 'RSVP';
}

You can use change, this will only trigger when the value changes.
function initInput() {
input = document.getElementById('input');
input.addEventListener('change', updateText);
input.value = 'RSVP';
}
Edit: I didn't provide an updated fiddle as I assume you can get it working from there.

Input loses focus when value of another input is set dynamically

I'm working with jQuery in a .NET MVC project.
I use the following code to update a total on my form whenever a key is pressed or the value changes on the Quantity or Amount fields.
$(document).ready(function() {
$('##Html.IdFor(i => i.Form.Qty), ##Html.IdFor(i => i.Form.Amount)')
.change(calculateTotal)
.keyup(calculateTotal);
});
function calculateTotal() {
var qty = $('##Html.IdFor(i => i.Form.Qty)').val();
var amount = $('##Html.IdFor(i => i.Form.Amount)').val();
$('##Html.Id("TotalCost")').val((qty * amount).toFixed(2));
}
Whenever a key is pressed, the input (either quantity or amount) loses focus. I have narrowed this problem down to the last line in calculateTotal(). It seems setting the value of TotalCost removes focus from the source input of the event.
I'd like to find a work around.
EDIT:
As per #Christian Varga's suggestion, further testing has shown that this is not a jQuery problem. Rather it is interference from jquery.inputmask.