Setting the value of a hidden input - javascript

The idea: I'm setting the value of an input with type="hidden" via regular Javascript or jQuery.
The issue: neither jQuery nor document.getElementById will find the hidden input, even though I'm absolutely sure the selector is correct and there are no conflicting elements.
The code:
I can't really post much of it, because it's full of rather complicated PHP that confuses me when I just look at it.
Here's the javascript:
$("#" + input.id.substr(0,2) + "_budget_hidden").val(budg_total);
Note: there's nothing wrong with the selector, and the "input" is a different element that I'm using to reference the hidden.
Here's the HTML:
<input type="hidden" name="s<?=$step_counter?>_budget_hidden"
id="s<?=$step_counter?>_budget_hidden" value="0" />
The code is kind of out of context, but it's more of a general problem with Javascript than a syntactical error. Thoughts?

In $("#" + input.id.substr(0,2) + "_budget_hidden").val(budg_total); you take two chars before the first underscore in your hidden id. However your hidden id have only one char 's'
EDIT
Ok the <?= ?> was hidden before the question edit.
Do you call your script after the body onload event?
EX:
$(document).ready(function(){
$("#" + input.id.substr(0,2) + "_budget_hidden").bind("keyPressed",function(){
$("#" + input.id.substr(0,2) + "_budget_hidden").val(budg_total);
}
});

FYI: We can get the hidden input value using jQuery, even we can also edit any hidden input value using jQuery.
I think your way of getting the hidden value using 'substr' method is causing some problem. You are using like substr(0, 2) so are sure that the variable $step_variable is a single digit number, otherwise your code will not return correct result.
I am giving some sample code below, check it once.
Here's the javascript:
var input_id = $("hidden_val").attr("id").substr(1);
$("#" + input_id + "_budget_hidden").val(budg_total);
Here's the HTML:
input type="hidden" class="hidden_val" name="s_budget_hidden" id="s" value="0"
I think this will help you. Let me know if you are not following this flow to solve your issue.

I think that input.id.substr(0,2) says to start at the start of the string, take 2 characters and use that.
http://www.w3schools.com/jsref/jsref_substr.asp
Try using Firebug to see what the result of that method call is.

Related

How to find a varible html element executing javascript in python

I'm trying to use 2Captcha service to solve an h captcha V2.
Works like this:
you get a value to solve the captcha
Then you find a textarea element in the HTML code to insert that value (here's my problem)
you insert the value in that element
You press submit button and the captcha is solved
First I'm going to present a working example, then I'll present where I have the problem.
This is the HTML code to find and insert the obtained value:
textarea id="h-captcha-response" name="h-captcha-response" style="display: none;"></textarea>
This is the python code used to insert the value:
value = get_value()
insert_solution = 'document.getElementById("h-captcha-response").innerHTML="' + value + '";'
driver.execute_script(insert_solution)
What this exactly does is taking you from this:
and this is the result:
Finally you press the submit button and it's done. This example works
This is my problem:
In my case the HTML document has a variable ID, like this one:
<textarea id="h-captcha-response-0tesbrpxsk8" name="h-captcha-response" style="display: none;"></textarea>
Notice that the id has an alphanumerical part (0tesbrpxsk8) that always changes making it more difficult to select.
I tried to find some regular expression to use inside of document.getElementById()
With no success
I also tried to use:
document.getElementByTagName("textarea").innerHTML=".....
I'm stucked here and tried other approaches with no success because I probably because I don't implement well those solutions or they just don't work.
I'll appreciate some insights, thanks
This will fill out all of those (recaptcha / hcaptcha):
driver.execute_script('''
let [captcha] = arguments
[...document.querySelectorAll('[name="h-captcha-response"],[name="g-recaptcha-response"]')].map(el => {
el.innerHTML = captcha
})
''', value)
Try this:
const textarea = document.querySelector('[id^="h-captcha-response-"]')
textarea.value = "This is inside the textarea!"
<textarea id="h-captcha-response-0tesbrpxsk8" name="h-captcha-response"></textarea>
First of all: You set the value of an textarea with textarea.value = "some value"
You should use document.querySelector() to select elements. (You have much more abilities there)
You can select id starting with, with this query: [id^="start"]

input value doesnt show, but in inspector it does

I have input element and string variable called link. And when i try to add this string like a value inside input element.
I tried to do it by :
$("#inputURL").value(**link**)
$("#inputURL").attr('value',**link**)
and also defined at start:
var inputRow = $('<input type="url" id="inputURL" class="input-url-link"value="' + **link** + '">');
But it doesn't show. I have empty input element but when I inspect element, it have value which equal link. And this all running inside of function.
var inputRow = $('<input type="url" id="inputURL" class="input-url-link">');
P.S. when i try do write 1) and 2) code inside of INSPECT in console - it works. But when i wrote the same inside of code - doesnt work
Use val() function so your JQuery will look like this:
$("#inputURL").val(**link**);
If it doesnt work, try:
$("#inputURL").text(**link**);
Reference here
Like #Learner said in his answer, it's $('#id).val() not value().
And I did some simple code to replicate your situation, it works fine.
I'm guessing you should have wrapped your jQuery code in jQuery(function($){})
See here https://jsfiddle.net/calmdown/74wurk50/4/

Control textbox with JavaScript by adding a string to dynamic id

I don't know why I am struggling with this. Should I be taking a different approach?
I have a form being generated in vb based off a database and then I am trying simply to make a text-box be disabled unless you check a checkbox.
Here is what I have so far. It needs to be dynamic (what I have commented out).
I can't seem to get it to work. The difficult part is referencing
document.form1.el.id.toString() + "_other".disabled
disabled is a binary property, not an attrbute.
You must use disabled='disabled' or remove the attribute to enable the element. It is not a true/false value.
Here is one way:
http://jsfiddle.net/C2WaU/1/
If I understand you correct, this should work for you:
function enable_text(el) {
var textbox_name = el.id.toString() + "_other";
document.getElementById(textbox_name).disabled =
(el.checked) ? "" : "disabled";
}​
A working example: http://jsfiddle.net/ve9Gz/3/

Get a value from an input textbox

Okay. So I have this code
<input id="suspect" value="" type="text">
<input id="reason" value="" type="text">
<textarea></textarea>
var suspect = $('input#suspect').text();
var reason = $('input#reason').text();
$('textarea').val('' + suspect + ' and ' + reason + '')
Then I put something in both of those 2 inputs and then the textarea recieves no value from the inputs. How to fix that problem ?
Because when you set the variables there's no text inside the elements from which you're trying to recover the entered-text (incidentally, for inputs you're looking for .val()). If you bind to the focus event:
$('textarea').focus(
function(){
var suspect = $('#suspect').val(),
reason = $('#reason').val();
$(this).val('' + suspect + ' and ' + reason + '');
});
JS Fiddle demo.
Also, in this case (since you've placed the JavaScript after the elements in the DOM, albeit you've omitted the <script></script> tags) you might be okay not using the $(document).ready() event handler, but I'd normally suggest wrapping jQuery in such, just to be sure that events are being bound after the elements to which they're being bound exist in the DOM.
References:
focus().
val().
.text() -- Gets the text inside the elements
.val() -- Gets the value of the elements
Since the text is stored inside the value, therefore you should use .val() instead of .text().
var suspect = $('input#suspect').val(),
reason = $('input#reason').val();
$("textarea").val(suspect+" and "+reason);
If you want instant change try the keyboard events
$(window).keyup(function() {
var suspect = $('input#suspect').val();
var reason = $('input#reason').val();
$('textarea').val('' + suspect + ' and ' + reason + '');
});
see here: http://jsfiddle.net/TtAVS/
​
You probably want to use val() here instead of text(), and there also needs to be some kind of event (like a click) that causes the data to be extracted from the inputs and put into the textarea.
It also might be worth noting that since id's are unique,
var suspect = $('#suspect').val();
var reason = $('#reason').val();
are sufficient as selectors and (I find) easier to read.
should use .val() to get value from the input box

Setting the HTML property of an element in jQuery

Please check the codes..
$(".editable").live("click",function(){
CurrentOBJhtml = $(this).text();
nextHtml = "<input type='text' class='hoverable' value='"+CurrentOBJhtml+"' />";
var c = nextHtml;
alert(c); //here two alert box comes....
$(this).html(c);
});
When i alert c ,it alerting two values in two alert boxes...
first value is <input type='text' value='myname' class='hoverable' />
second one is <input type='text' value='' class='hoverable' /> where the second one doesnt have the value .
When i comment the last line ($(this).html(c);) then it only giving the first result.
What is the problem with me ? i am totally confused.
please help me to solve this issue.
Thank you .
Update :
HTML :
<fieldset id="user_info_module">
<label>username:</label>
<label class="editable" id="user_info_username">
<label>Email:</label>
<label id="user_info_email"> </label>
<label>Default page:</label>
<label id="user_info_defaultpage"></label>
<label>mobile:</label><label id="user_info_mobile"></label>
<label>country:</label><label id="user_info_country"></label>
<label>address:</label><label id="user_info_address"></label>
<label>pincode:</label><label id="user_info_pincode"></label>
<label>landline:</label><label id="user_info_landline"></label>
</fieldset>
http://jsfiddle.net/M3J2p/1/
First thing put your jquery code inside the $(document).ready(function()); handler.
and check this jsfiddle, it is not showing any double alert box to me. when you click a element then this will refer to that particular element not the others.
Update your html code in question to confirm about the exact problem or create a example jsfiddle for your problem.
Edit: Error reasons and solved
Before jQuery 1.7, to stop further handlers from executing after one
bound using .live(), the handler must return false. Calling
.stopPropagation() will not accomplish this.
$("a").live("click", function(event){
event.preventDefault();
});
Check your updated jsfiddle as per your code. you have missed to close the one tag and the above event bubbling problem occurs when you use this. In updated jquery use .on() ..
check .live() documentation at jQuery to konw about this better.
May be you have two elements with the class "editable" or that you calling the code above twice. Do you have it in document.ready? or calling it through function?
I suppose that $(".editable") finds more than one element. If you want to find a specific element, consider using the Id or you can also check whether the target is the correct one in the callback.
$(".editable").live("click",function(event)
{
if (event.target == mytarget)
{
// do something
}
});

Categories