Trouble getting value of dynamically created textbox jquery - javascript

I have a webpage where the user inputs a number into a textbox and then that number of rows are created in a table with textboxes in each row with the id in the format of "id[I]" where I is the number assigned from the for loop used to add the textboxes. On form submit I'm trying to get the value of these textboxes. This is my form submit code to test things out.
$("#biopsyform").submit(function () {
var site = $("#site[1]").attr("value");
alert(site);
});
when I submit the form I get an alert of undefined
I've tried saying var site = $("#site[1]#).val(); and get the same result.
When using chrome developer tools in the javascript debugger when I break before the alert, it shows the correct value for $("#site[1]") so I'm not quite sure what is going on.
Any help is greatly appreciated.
Here is a jsfiddle I'm getting an error in jsfiddle when I submit and I'm not sure why, I've never used jsfiddle. It could be part of my problem, it could be when I copied stuff over to jsfiddle, I don't know.

Try escaping [ and ] with \\
var site = $("#site\\[1\\]").attr("value");
or
var site = $("#site\\[1\\]").val();
FIDDLE DEMO
You were missing a $ sign.

You need to use the parent of the $("#site[1]").attr("value");
Example:
$("#parent").find("#site[1]").val();
Or any variations of that.

Related

use a variable in bootstrap 2.3.2 popover

With the below code I expect to see a popover with the name of the product as title.
$('.btn-blue').click(function(){
var btnName = $(this).parents('.individual-content').children('.name').html();
//alert(btnName);
$(this).popover({title: btnName,content: "<p>Added to cart!</p>", html: true, placement: "bottom"});
});
When I uncomment the alert it shows the title in the alert so the variable is correct.
But the popover still gets triggered with the default title. And not with btnName.
I made a fiddle that has everything in it for quick reference.
https://jsfiddle.net/gr19fmcu/
2 questions
Why is it still displaying the default title and not the variable content?
Why do I need to double click to see the popover at all?
I did not get it to work with the above code. The code seems to me to be correct and I got no clue why it ain't working. Anyhow I needed it for a Joomla website and resorted back in using the System Messages from Joomla itself.
I triggered it with this code:
$('.btn-blue').click(function(){
var btnName = $(this).parents('.individual-content').children('.name').html();
Joomla.renderMessages({"success":[btnName + " is being added to your cart!"]});
});
The result is even better then I expected. Anyhow, I leave the question open as I still hope someone to shed some light over why the original code is not working.

Click on div to focus on input

I'm working on a small coding game project where the user has to search the page by hovering for clues in order to advance to the following level.
For this specific example, the clue is 1+1 (can be found by hovering around the bottom 2/3 of the page) and the answer is to type number '2' (keycode 50).
When the page loads I autofocus the input field where the script is looking for '2' to be pressed, but my issue is if the user clicks on any of the letters inside "#search" or "#math" it removes the focus from the input.
If the user clicks anything inside either "#search" or "#math", I need the focus to still be thrown to the "text" input. I've looked on stackoverflow for the solution and found this article (Click on <div> to focus <input>), but I can't seem to make it work with my code. I'm assuming it's some stupid simple incorrect syntax, but I need some fresh eyes to look over it because I've got nothing!
Here is a JSFiddle: http://jsfiddle.net/ncx54y3r/2/
Here is the JS I'm using to attempt to accomplish this:
$('#search').click(function() {
$('text').focus();
});
$('#math').click(function() {
$('text').focus();
});
All other code can be seen in the JSFiddle. To check if the script works correctly, just click on any of the letters and type "2". If it redirects to an error page, that means it worked correctly!
Thanks guys! I appreciate it.
You are not including the class indicator "." in the jquery
$('text').focus();
should be
$('.text').focus();
Any errors on the console? Is that all the code ? Its not working for me because Jquery is not loaded.
ReferenceError: $ is not defined

Why does the wrong ID keep Populating?

I have run into a very odd situation, that I have not experienced before. In our code, we wanting to check the value of BillingDomainID once the page is loaded. Wrapped in a function with many other jQuery functions inside, I have the following code:
var vBDID = ".BillingDomainID" + $("#BillingDomainID").val() + "";
alert(vBDID);
$(".BillingDomainID").show();
$(vBDID).toggle();
We are using vBDID to dynamically create a class that will hide certain fields in the form if the BillingDomainID != 1. The Value exists in a hidden field that is at the bottom of the page. Since we have 7 BillingDomainIDs in our system, Anytime the BillingDomainID = 1 it will show the fields, and anytime it is 2-7, it hides them because of the classes that we have placed on the fields that we want to hide.
So here is the issue that I having. The alert that appears in the code above will say that the vaule of vBDID is .BillingDomainID2 for example, but the real value of the #BillingDomainID is 1 in the Database. Why is it that the value is being presented as a different value in the website, that it is in the database? Everything else works as it should, with the exception to this part.
I should also mention, that we are using ajax to change value when the Office dropdown is changed. This part also works fine, and the BillingDomainID will actually be correct after it is changed once. It is only initially when the page loads that it is incorrect.
Thank you all so much for your help!

How do I set a dropdown option by value using jquery?

I have a fiddle that has some slight demo code: http://jsfiddle.net/mwoods98/MHrJJ/
I have a request that is being sent via ajax and it's returning some values via JSON.
With that, I'm taking what is returned and filling in a form. I'm filling in the form
with the other values but I can't quite figure out how to set the dropdown to a value that is returned.
$('#PosTitle').find('option:eq(PosVar)').val().prop('selected', true);
I have tired this and it doesn't work. PosVar is a variable that I'm setting to a number that is returned from ajax.
UPDATE: Thanks for both of the answers, I have discovered something.
I'm using this code to make the drop downs look better but also I need a drop down that can have multimple lines of HTML.
http://www.marghoobsuleman.com/jquery-image-dropdown
When I remove this js, the form fills in.
I'm open to using another library that gives me the ability to use multiple rows in a select dropdown and pass HTML to it.
Thanks for the answers.
All you need is:
var PosVar = 9;
$('#PosTitle').val(PosVar);
jsFiddle example
Remove the .val()
$('#PosTitle').find('option:eq(PosVar)').prop('selected', true);
.val() will not return this object .. So you cannot chain it further..
jsFiddle

Use checkbox to set val() for field

Total N00b here, I have a long form wizard that needs one step to be dynamically shown/hidden dependant on a radio button. All is cool with the code thus far.
function checkRb () {
if($(this).is(":checked")){
//yes
$("#do_frick").val("step5");
//alert ("yeah");
}else {
//no
$("#do_frick").val("submit_step");
//alert ("no");
}
}
The issue is that the hidden field "#do_frick" is several steps further down the page. If I place it in the same div as the checkbox, values change no problem. Place "#do_frick" further down the form and it doesnt change.
I expect that $(this) is only looking inside the current div and not the entire document. I got this far with the help of a very good programmer and dont want to annoy him further with N00b questions, any help greatly appreciated :)
It appears that if I put the "#do_frick" inside a div that is further down the page the form wizard sets the to display:none and anything inside the div cannot be set... would this be correct ?
Please view source of your page to check what is ID of hidden field when it is several steps down. If ID is same then position should not be a problem.
this is not current div. In event handlers it means the object that raised the event. You should check jquery.com for more information on this.
PS:- try setting value of hidden field like this
$("#do_frick").attr("value","submit_step");
look for the id in generated html as suggested above.
Also look for any duplicate id shared by any other element, this will mess up things.
SO after much noodle scratching the answer is a little bug/hiccup in jQuery
Whenever the field is in a div that has the rule "dsiaply: none;" applied jQuery cant reach inside and change it. Checking with firebug, the field has an additional value "disabled=''". Using the command
$('#do_frick').get(0).disabled = false
Sorts it out.. finally:)
Final code:
function checkRb () {
if($(this).is(":checked")){
//yes
$('#do_frick').get(0).disabled = false //The important bit
$("#do_frick").val("step5");
//alert ("yeah");
}else {
//no
$("#do_frick").val("submit_step");
//alert ("no");
}
}

Categories

Resources