Value of the Object HtmlInputElement - javascript

In my .html file I have one button and string variable str = "<input type=\"text\" value=\"apple\"" . When i click button i want to alert value of these string . How can i parse string to object and just use something like obj.val() or obj.value to get it's value . I've tried $.parseHTML(str) . it returns me Object HtmlInputElement , but i can't use .val() or .value , even .attr('value') ? Jquery is added and no errors . Please help . Best Regards .

Try this: create jquery object from str and then call .val() on that object, see below code
str = "<input type=\"text\" value=\"apple\">";
var strObj = $(str);
alert(strObj.val());
JSFiddle Demo

If you put your input in your actual html file, and give it an id (e.g. appleInput):
<input type="text" value="apple" id="appleInput"> <!-- Your input -->
Then in your JavaScript:
var str = document.getElementById("appleInput").value;
alert(str);

Related

How to replace the value attribute in an HTML string?

Given:
let mystr = "<input class=\"text-box single-line\" id=\"item_Name\" name=\"item.Name\" type=\"text\" value=\"Luis Tiant\">";
I'd like to remove the text in the value param "Luis Tiant" using JS.
To be clear: I want to change value="Luis Tiant" to value="" in the string itself. This is a string not yet a DOM element. After I remove the value then I'll add it to the DOM.
Get the input element and set its value to '' (empty string).
Example below clears the input value after 2 seconds, so you can see it in action:
setTimeout(() => {
document.querySelector('input').value = '';
}, 2000);
<input class="text-box single-line" id="item_Name" name="item.Name" type="text" value="Luis Tiant">
Update
Question above has been clarified. If you'd like to replace the value attribute in the string itself you can accomplish that using regex and the replace method like so:
let string = "<input class=\"text-box single-line\" id=\"item_Name\" name=\"item.Name\" type=\"text\" value=\"Luis Tiant\">";
console.log(string);
let newString = string.replace(/value=\".*\"/, "value=\"\"");
console.log(newString);
By initializing the ID you can do this as well.
document.getElementById("item_Name").value = "Your new Value Here";
Instead of setting a variable equal to a string of html, then using string manipulation to change the element attributes, I'd suggest using the Document.createElement() method and related APIs to programmatically create the html element. Then you'll have access to methods like Element.removeAttribute()
let mystr = "<input class="text-box single-line" id="item_Name" name="item.Name" type="text" value="Luis Tiant">"
var res = mystr.match(/value=\".*\"/g);
var str = mystr.replace(res, 'value=""');

Jquery with many buttons call a function with sending different parameters

I have a simple code but cant get the values of my input text. Is there any way to do this?
<?php
for ($i=0;$i<3;$i++){
echo ('<input type="text" class="form-control" name="vec" id="vec'.$i.'" value="'.$listOfData0[$i].'">');
echo ('<input type="text" class="form-control" name="drv" id="drv'.$i.'" value="'.$listOfData1[$i].'">');
echo ('<button type="button" name="updateVecButton" id="updateVecButton" value="'.$vec[$i].','.$vell[$i].'" onclick="refreshVec("'.$i.'","'.$vell[$i].'");"></button>');
}
?>
<script>
function refreshVec(i,vell){
alert (i + " "+ vell);
var value0 = $("#vec"+i).val();
var value1 = $("#drv"+i).val();
alert (value0 + " " + value1);
}
</script>
You garbled the HTML by also using double quotes in the onclick attribute. You should see it in the generated HTML.
Try
echo ('<button type="button" name="updateVecButton" id="updateVecButton" value="'.$vec[$i].','.$vell[$i].'" onclick="refreshVec(\''.$i.'\',\''.$vell[$i].'\');"></button>');
instead of
echo ('<button type="button" name="updateVecButton" id="updateVecButton" value="'.$vec[$i].','.$vell[$i].'" onclick="refreshVec("'.$i.'","'.$vell[$i].'");"></button>');
I don't know why but there is space present between refreshVec(" 2","2").
This makes string like " 2" and not "2"
That's why ID selector is selecting wrong id containing that space and you are not getting expected output
I corrected it and it is working now:
echo '<button onclick="refreshVec(\''.$i.'\',\''.$vell[$i].'\');">'.$vec[$i].','.$vell[$i].'</button>';
Note: buttons don't have attribute like value. You should put text inside <button> tag
You should call as an array of inputs. Like,
echo('<input type="text" class="form-control" name="vec[]" id="vec'.$i.'" value="'.$listOfData0[$i].'">');
echo('<input type="text" class="form-control" name="drv[]" id="drv'.$i.'" value="'.$listOfData1[$i].'">');
echo('<button type="button" name="updateVecButton[]" id="updateVecButton" onclick="refreshVec("'.$i.'","'.$vell[$i].'");"/>'.$vec[$i].','.$vell[$i].'</button>');
Change name="vec" and name="drv" As name="vec[]" and name="drv[]"
In your (
onclick="refreshVec("'.$i.'","'.$vell[$i].'");
you should change as
onclick="refreshVec(\''.$i.'\',\''.$vell[$i].'\');
As I think, the reason is you passing parameters with string values.
My solution is
$(this).prop("value");
The .val() is another thing. Thanks for your support.

getElementById or getElementsByName with an array tag

I'm lost with this. First, I made an array in php (reason? Fetch all values of a column into an array, to use later) and "save" like this:
echo '<input type="hidden" name="hidden[]" id="hidden[]" value="'.$to_update.'">';
Then, I made a select with some values and chars, also constructed with php. Like this:
echo '<option value="'. $id .'">'. $desc .'</option>';
The fetched values are correct, $id $desc and $to_update have the value I require.
Then, in php/html I have this code:
<select name="articulo" id="articulo" onchange="myFunc(this.value)">
<input name="updated" id="updated" type="text" />
So, when calling in js is like this (same html, after body tag):
<script >
function myFunc(val) {
var id = document.getElementById("updated");
var valor = document.getElementsByName("hidden");
id.value = valor[val].value;
}
</script>
So, for example, if in select Is 1, 2 and 3 values; one, two and three options, I want to change the input text called updated to another values, like a, b and c.
Is it a better way to do it, or just to fix some code?
I've solved my issue by luck.
I used a push into an array in the PHP with this:
echo "<script>
var pausecontent = new Array();
pausecontent.push('".$to_update."');
</script>";
and then in JavaScript fetch/retrieve/access the array like this:
var valor = pausecontent[val - 1];
id.value = valor;
Works like a charm, without need of another hidden tag.

Javascript, innerHTML <option> numeric value changed to string with escape and double quotes

I have a group of options created by a javascript function in a select block. I make the html string then assign it to the innerHTML of of the select block, but (as debug shows) the value of the options gets changed from integer to string with escapes and double quotes and worse, when I try to access the select value in POST I get null.
Does anybody have an idea about what's happening?
Thanks!!!
options = "<option value=64>2. TWO</option>\n"
options = options + "<option value=65>3. Three</option>\n"
document.getElementById('list').innerHTML = options;
<?php
if ($_POST['action']=="GO"){
// I want to use the value here
echo $_POST['list']
}
?>
<form action = "<?php echo $_SERVER['REQUEST_URI'];?>" method = "POST" id="userform">
<select id = "list"></select><br>
<input type = "submit" name = "action" value = "GO" />
</form>

Set value of input html string with jquery

I have snippet of HTML in a string like this:
var htmlString = '<input type="text" id="someID" name="someID">';
How do I, with jQuery, set its value so that the HTML ends up like this:
'<input type="text" id="someID" name="someID" value="newValue">';
Thanks,
Scott
$(htmlString).attr("value", "newValue");
But this will return jQuery object, not string. You can add it to DOM.
$(htmlString).attr("value", "newValue").appendTo("body"); // you can give any element instead of body
EDIT :
You can use #idor_brad's method. That is the best way or
var htmlString = '<input type="text" id="someID" name="someID">';
var $htmlString = $(htmlString);
$htmlString.attr("value1", "newValue1");
$htmlString.attr("value2", "newValue2");
$htmlString.attr("value3", "newValue3");
console.log($htmlString.get(0).outerHTML);
or
var htmlString = '<input type="text" id="someID" name="someID">';
var $htmlString = $(htmlString);
$htmlString.attr("value1", "newValue1");
$htmlString.attr("value2", "newValue2");
$htmlString.attr("value3", "newValue3");
console.log($("<div>").append($htmlString).html());
You would first need to add your element to the DOM (ie to your web page). For example:
$(".container").append(htmlString);
Then you can access your input as a jquery object and add the value attribute like so:
$("#someID").val("newValue");
-- See Demo --
You just want to manipulate the string, right? There are a lot of ways to skin this cat, but
var newString = htmlString.replace('>', ' value="newValue">');
After the dom ready, append your input to body and then grab the input with id = "someID" and set its value to newValue
$(document).ready(function(){
$("body").append(htmlString);
$("#someID").val("newValue");
});

Categories