Develop Reference

how to extract input value from a wordpress theme form

let's explain, am using a wordpress theme for my website but am facing a difficulty to extract from my form the various input value.
Anytime i click on the EventListener button the input value is null meanwhile i have a text inside the input box
i tried these lines of code
code result
if(window.location=="https://liqwidity.com/submit-listing/profile/"){
var input = document.querySelectorAll('.hp-field--text');
var inputValue = input[0].value
document.querySelector('.button-primary').onclick = function(){
console.log(inputValue)
}

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.

Configuration form with a custom control in leaflet

I'm trying to create a custom control using leaflet; here you can see the jsfiddle: https://jsfiddle.net/1tca13f3/
When the user clicks on the submit button, i need to read the value from the dropdown and the one from the text field.
This...
L.DomEvent.on(this._container, 'click', this._doSomething, this);
...as predictable, doesn't work.. and I can't read the values from the input fields. How can I do this?

The main issue you are having is that you are just alerting the string 'clicked' in your _doSomething() function. You need to look up all the values and then you can do what ever you want with those values. Here is some quick code that will at least get you going in the right direction.
_doSomething: function(event){
if(event.target.className === 'leaflet-control-opt-submit') {
var select = document.querySelector('.leaflet-control-opt-dropdown');
var input = document.querySelector('.leaflet-control-opt-input');
console.log(select.value, input.value)
}
}
it first checks to make sure the event.target is the submit button if it is it looks up the values from the inputs and for now we just console.log() them you can do whatever you want from then on with the values.

Not able to populate textarea value if it's updated?

On click of a button, I am showing a popup with one text area and a submit button.
I am able to enter a value in the textarea (e.g.: "hello1"), and when clicking on the submit button, I am checking the textarea's entered value, it gives me "hello1", and fades out the pop up. (as expected)
Issue: the second time, I click the same button again, I entered the value "hello2", and after submitting, it shows me the last entered value in an alert and fades out.
Below is my code:
function onCalChange(cal) {
// inputField = cal.inputField;
startDate = cal.date;
var calVal = this.id;
popup2(calVal);
}
function popup2(calVal) {
idValue = calVal.split("-");
$('.popup2').css('display','block');
//$('.popup2').addClass('pop_up_bckgd');
$(".popup2").append("<div class='pop_up_bckgd'></div>");
$(".popup2").append("<div class='pop_up_container'><form>\n\
\n\
\n\
<label style='margin-left:65px;margin-top:40px;'class = 'label-value' for = 'reason-for-change-" + idValue[2] + "'>Reason for change</label>\n\
<br>\n\
<textarea id='reasontxt" + idValue[2] + "'style = 'width: 74%;margin-left: 62px;height:100px' class = 'text-box' name = 'reason' required></textarea>\n\
<br>\n\
<div style = 'text-align:center'><input class = 'submit-value2' type = 'button' value = 'Submit' name = 'submit1' onclick= 'clicksubmit(idValue[2]);' '></div ></form>")
}
function clicksubmit(id) {
var idNum= parseInt(id);
if ($('#reasontxt' + idNum).val() == "") {
// alert("1");
$('#reasontxt' + idNum).next(".validation").remove();
$('#reasontxt' + idNum).after("<div class='validation' style='color:red;margin-top:5px'>Please enter Reason for change Field</div>");
} else {
alert('2');
alert($('#reasontxt' + idNum).val());
$('#reason' + (idNum)).val($('#reasontxt' + idNum).val());
// $('#reasontxt' + idNum).val() == ""
$('.popup2').fadeOut();
}
}

After making he change specified by erkaner on the comments, I was able to reproduce the issue by copying your code into this JSFiddle: http://jsfiddle.net/v2djohhw/ (I had to make another minor change to hardcode the value of calVal for testing).
From what I saw, the issue is:
Every time that you click on the button, a form with a textarea and a submit button are appended to the popup (using $(".popup2").append(...));
the id of the textarea depends on the id of the button that was clicked (calVal);
so if the same button is clicked several times [or the button is different but it has an id which third part (as you are splitting it and only using the third value idValue[2]) matches the one of a previously clicked button], you will be appending multiple textarea over time, all of them with the same id.
when you submit, and read the value of the textarea, as there are multiple with the same id, the browser will take the value of the first textarea with the specified id.
Because of that you get always the same value that is the one of the first textarea.
How to fix it? Avoid having multiple elements with the same id.
One possible solution: delete the content of the .popup2 box every time you are going to display it, that way you make sure that the id of the textbox is really unique and you don't face unexpected errors:
$(".popup2").html("");
You can see it working here: http://jsfiddle.net/v2djohhw/1/
If you don't want to (or you cannot) delete the content of the .popup2 box, and want to show all the previous textareas, another solution would be keeping track of the number of times the button was clicked and add that value into the id of the textarea. That way you'll make sure the textbox id will be really unique.
You can see it on this other fiddle: http://jsfiddle.net/v2djohhw/2/

Replace text links with URL-s JavaScript

I have an order submitting form where I want to replace URL texts with corresponding HTML links. I've found the following code on Stackoverflow:
get_url = function() {
var urls = document.getElementById('w_descr').firstChild;
urls.nodeValue = replaceURLWithHTMLLinks(urls.nodeValue);
}
function replaceURLWithHTMLLinks(text) {
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/ig;
return text.replace(exp,"<a href='$1'>$1</a>");
}
I'm calling the get_url() function on click even of the form submitting button. It works fine. However the submitted orders have a feature of editing. If you edit an order and click on the Submit button again, the function will work again and will duplicate the existing link.
Could anybody help me to figure out how can I prevent that to happen? I mean - how to modify the script above to not to duplicate the links which are already in HTML form.
Thanks in advance.

Always store the text 'plain' (without the links), and only add the links when outputting the text for display.
When outputting the text for editing, output the 'plain' text.