I'm trying to update an input field value .ckfinder-input via ck finders pop up image selector.
It all works fine until I try and assign the selected image URL to the input field input.val() = fileUrl and get the following error message:
ReferenceError: invalid assignment left-hand side
Could someone shed some light on what I'm doing wrong?
My code is as follows:
$(".ckfinder-modal-button").on("click", function() {
input = $(this).parent().find(".ckfinder-input");
BrowseServer(input);
});
function BrowseServer(input) {
var finder = new CKFinder();
finder.selectActionData = input;
finder.selectActionFunction = function(fileUrl, data) {
input = data['selectActionData'];
console.log(input); //returns Object[input.form-control.ckfinder-input property value = "" attribute value = "null"]
console.log(fileUrl); //returns "/customer_images/header_images/home.jpg"
input.val() = fileUrl; // ReferenceError: invalid assignment left-hand side;
}
finder.resourceType = 'HeaderImages';
finder.removePlugins = 'basket';
finder.popup();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="bootstrap-filestyle input-group">
<input type="text" class="form-control ckfinder-input" name="ckfinder-input">
<span class="group-span-filestyle input-group-btn ckfinder-modal-button" tabindex="0">
<label class="btn btn-default">
<span class="icon-span-filestyle fa fa-cloud-upload"></span>
</label>
</span>
</div>
probably it's because your JavaScript is invalid. You cannot assign a value (fileUrl) to the output of function (input.val()) in:
js
input.val() = 'abc';
You should either:
a) if it is DOM Input Element:
input.value = 'abc';
b) if it's jQuery wrapper for DOM Element:
input.val( 'abc' );
Related
I'm currently trying to build a find and replace program using regular expressions in JavaScript, but I keep getting the following error when I click the "go" button, which is supposed to find and replace the given string, although currently all I'm trying to do is print the found string onto the console:
Uncaught TypeError: projected.value is undefined
Here's the code:
<body>
<textarea name="input" id="inputText" cols="30" rows="10">
</textarea>
<p id="projectedText"></p>
<label for="find">Find: </label>
<input type="text" id="find">
<label for="replace">Replace: </label>
<input type="text" name="" id="replace">
<input type="button" value="Go" id="commit">
</body>
document.getElementById("commit").onclick=findNreplace; //set up go button
//variables
var textToShow = document.getElementById("inputText");
var projected = document.getElementById("projectedText");
var toFind = document.getElementById("find").value;
var toReplace = document.getElementById("replace").value;
// set up text area to project the input into the paragraph
textToShow.addEventListener('input',updateValue);
function updateValue(text) {
projected.textContent=text.target.value;
}
// replace function
function findNreplace() {
var regex = /toFind/;
var found = projected.value.match(regex);
console.log(found);
}
What am I missing?
The <p> element does not have a value property, but you can access its value the same way you updated it with the textContent property.
To match the value of the toFind input instead of exactly matching the "toFind" string, you need to use the variable in the regex.
function findNreplace() {
var regex = new RegExp(toFind, 'g');
var found = projected.textContent.match(regex);
console.log(found);
}
You could also just reuse the input value directly:
function findNreplace() {
var regex = new RegExp(toFind, 'g');
var found = textToShow.value.match(regex);
console.log(found);
}
You will also need to change the element selectors if you intend to get the current value of the inputs in the functions instead of just getting the initial value when the script loads:
var toFind = document.getElementById("find");
var toReplace = document.getElementById("replace");
Update the function to get the current value of the input when it's called:
function findNreplace() {
var regex = new RegExp(toFind.value, 'g');
var found = textToShow.value.match(regex);
console.log(found);
}
At end of this line "var projected = document.getElementById("projectedText")" write .value
Why can't I insert the value of an input into another input? The following example doesn't work:
document.getElementById("input").oninput = () => {
const input = document.getElementById('input');
const output = document.getElementById('output');
// Trying to insert text into 'output'.
output.innerText = input.value;
};
<input id="input" placeholder="enter value of temperature" />
<br>
<input id="output" />
Thank you!
You should use .value instead of .innerText to set the value to an input element, like:
output.value = input.value;
document.getElementById("input").oninput = () => {
const input = document.getElementById('input');
const output = document.getElementById('output');
output.value = input.value;
};
<input id="input" placeholder="enter value of temperature" />
<br>
<input id="output" />
may be this will be helpful. as per my knowledge. your code will not work on IE. because arrow functions are not supported in IE. however error in your code is "value1.innerText" which is not a right property. because in your code you can see.
value1.innerText=currentValue.value
so if you are fetching value using 'value' property of input. you have to assign a same property for another input box.
so function will be something like this.
var convertTemperature = function convertTemperature() {
var currentValue = document.getElementById("currentValue");
var value1 = document.getElementById("value1");
value1.value = currentValue.value;
};
You can get real time value by below code,
jQuery('input#currentValue').change(function(){
var current_value = jQuery('input#currentValue').val();
jQuery('input#value1').val(current_value );
});
I want that the user can see the value of a variable by writing it's name in a textarea, simpliefied:
var money = "300$";
var input = "money"; //user wants to see money variable
alert(input); //This would alert "money"
Is it even possible to output (in this example) "300$"?
Thanks for help!
Instead of seprate variables, use an object as an associative array.
var variables = {
'money': '300$'
}
var input = 'money';
alert(variables[input]);
You can use an object and then define a variable on the go as properties on that object:
var obj = {}, input;
obj.money = "300$";
input = "money";
alert(obj[input]);
obj.anotherMoney = "400$";
input = "anotherMoney";
alert(obj[input]);
A simple way,you can still try this one :
var money = "300$";
var input = "money"; //user wants to see money variable
alert(eval(input)); //This would alert "money"
Here is an answer who use the textarea as asked.
JSFiddle http://jsfiddle.net/7ZHcL/
HTML
<form action="demo.html" id="myForm">
<p>
<label>Variable name:</label>
<textarea id="varWanted" name="varWanted" cols="30" rows="1"></textarea>
</p>
<input type="submit" value="Submit" />
</form>
<div id="result"></div>
JQuery
$(function () {
// Handler for .ready() called.
var variables = {
'money': '300$',
'date_now': new Date()
}
//Detect all textarea's text variation
$("#varWanted").on("propertychange keyup input paste", function () {
//If the text is also a key in 'variables', then it display the value
if ($(this).val() in variables) {
$("#result").html('"' + $(this).val() + '" = ' + variables[$(this).val()]);
} else {
//Otherwise, display a message to inform that the input is not a key
$("#result").html('"' + $(this).val() + '" is not in the "variables" object');
}
})
});
taking value in 1st textbox and want to display it in 2nd..
1st <input type="text" value=" " id = "marks1" name = "marks1" onblur = "myFunction('marks1')" />
2nd <input type="text" value=" " id = "marks2" name = "marks1" disabled = "disabled" />
and on oblur I am calling a function. Whenever I change the value from UI, on function call I am getting the old value i.e. ' ' instead of changed value.
in the variable "value" the old value which i am getting, i am unable to display it on 2nd textbox.
function myFunction( txtname )
{
alert("call");
var txtobj = document.getElementsByName(txtname);
var value = txtobj[0].value;
alert("my value : "+value);
txtobj[1].value = value;
}
I know the code is okay, but it is not working at me. Is there any other way?
Works for me:
function myFunction(element)
{
var txtobj = document.getElementsByName(element);
var value = txtobj[0].value;
txtobj[1].value = value;
}
http://jsfiddle.net/pwTwB/1/
Are you getting an error?
Try it this way:
function myFunction( txtname )
{
var txtobj = document.getElementById(txtname);
var target = document.getElementById("marks2");
target.value = txtobj.value;
}
Here is a simple way to set the next textbox's value.
function moveText(ele){
document.getElementById("marks2").value = ele.value;
}
Then use the following in your html markup
<input type="text" id="marks1" onblur="moveText(this)" />
<input type="text" id="marks2" disabled="disabled" />
I know how to get fields to validate with JavaScript using methods such as getElementById etc. For this instance I need to use the getElementByName method. I have the error 'Cannot read property 'nodeValue' of null in console.log.
Here is code that I used with the getElementByName method which worked
HTML
<button name="button1">Hello</button>
<div class="form-row">
<div class="field w100">
<label for="primary_phone">Primary phone (digits only) *</label>
<input type="text" name="primary_phone" id="primary_phone" placeholder="hello"></input>
</div>
</div>
<div class="form-row">
<label for="confirm_phone">Confirm phone (digits only) *</label>
<input type="text" name="confirm_phone" id="confirm_phone"></input>
</div>
</div>
JavaScript
var btn1 = document.getElementsByName('button1')[0];
var btn1Text = btn1.firstChild.nodeValue;
console.log(btn1Text);
Below is the code that is returning the error.
HTML
<button id="button">Button</button>
JavaScript
function validate() {
var primaryNo = document.getElementsByName('primary_phone')[0];
var confirmNo = document.getElementsByName('confirm_phone')[0];
var primaryValue = primaryNo.firstChild.nodeValue;
var confirmValue = confirmNo.firstChild.nodeValue;
if (primaryValue !== confirmValue) {
alert('Numbers do not match');
} else {
alert('congratulations')
}
};
var btn = document.getElementById('button');
btn.addEventListener('click', validate, false);
Any ideas?
Looks like you might be having input fields whose value you are trying to fetch.
In that case, they don't have any child elements, instead you need to get their value like
var primaryValue = primaryNo.value;
var confirmValue = confirmNo.value;
What is the result of
var btn1 = document.getElementsByName('button1')[0];
in console (console.log(btn1);) ?
Be careful with tag names: button, button1... maybe you have a syntax mistake.