Amended value of input not retrieved by jQuery - javascript

I've encounter a very strange situation. In my troubleshooting, I have added value="test" in the text field and added console.log($('input[name*="name"]').val()); so the whole code looks like this:
$('body').on('click', 'input[type="button"][name*="review"]', function() {
console.log($('input[name*="name"]').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="textfield-name" placeholder="Required" value="test" >
<input type="button" name="review" value="Review" />
In the console, it will now say "test" as expected. But if I remove "test" from the text field's value and type in something random like "dsa", it will say... nothing at all! Just a blank row in the console! If I add text after test it will only show "test" and not the text I've typed in.
The code I use, is exactly the same as the code above and it worked perfectly the day before yesterday. I have not edited or added anything else during the time between 2 days ago till now, since I was on a one day long trip yesterday.
If I run the code in jsFiddle, it will execute everything as normal.
I also have tested to remove everything in my JavaScript file and only leaved the code above within $(document).ready(function() { ... }. The result is the same as mentioned. This applies also when I tested to remove everything in the HTML file and only kept the input.
I have also tested to replace .val() with .prop('value') but the result is the same.
In short, all text that I type in to the text field, are completely ignored by the website!
Excuse my language, but what the h*** is going one here?! Is this some sort of bug or what?

The problem is now solved, thanks to Rory McCrossan!
The problem was that multiple text fields with the same name, existed on the same page. I added the post ID into a data properties (data="1") and the problem was after that gone.
Many thanks for opening my eyes, Rory!

Related

inserting a variable into the drilldown of an object

I am sure this question has been asked before, just don't know the verbiage to find it in a search. Basically I have an object which has values in it and values in that and so on and one of those values will change depending on what is in the text box so I need to make it a variable but it freaks out when I do.
SO if you go to this page:
http://shawnwow.com/chineseCharacterHelpr/
Type "mao" in the text box then go into console and type "currentPinyin" you SHOULD get "mao" and then if you type:
$.wordDatabase.words.mao.choices;
You would get the Chinese characters as expected for "mao" but I need to have it grab whatever is in that text box so I replace mao with the variable currentPinyin by putting in:
$.wordDatabase.words.currentPinyin.choices;
I get a vague error... even though I don't get errors when I manually use mao and currentPinyin is equal to mao. I am guessing it has to do with using a variable in the object path but I have no idea what else to do.
To see the JS code (lines 29-32):
https://github.com/olmansju/chineseCharacterHelpr/blob/master/JS/scripts.js
This Chinese widget isn't mine and I think I need to explore what is generating the list items for Chinese Characters in ul.options as that is probably extracting it for me somewhere and maybe I can just call that, I don't know.
On a site note, using keyup as a trigger seems to not always hit depending on how fast I type the character. I want to use the jquery trigger "change" on the same element I am copying so I tried:
$("#chinese-ime .typing").change(function (){
alert("Did this trigger?");
})
I see the contents of .typing changing but the alert isn't triggering. Am I doing something wrong?
Thank you for your time! I understand this is long so I appreciate it!
A coworker figured it out for me, the issue was it was looking for choices inside of currentPinyin, not choices inside of the text for current pinyin.
So the correct output was this $.wordDatabase.words[currentPinyin].choices;

jQuery datepicker not working on dynamic HTML

I have asked this question before and also here. However, none of the proposed answers worked. And days after, the problem is still not resolved. Hence my asking again, with a few more details to see if someone could help me get it resolved.
I have an input field that is generated via Ajax from the server-side, and inserted into the current page. My problem is: the jQuery date picker is not working on the input field when it is generated via Ajax, but it works when the field is directly placed in the page.
Below, I include a scaled-down version of my code.
HTML code:
<form id="user-form"></form>
And here's the jQuery code that's supposed to activate the datepicker on it.
$.ajax({
type: "GET",
url: "/inputfield-loader.php" ,
success: function(data) {
$('#user-form').html(data);
$("#datefield").datepicker();
}
});
And here's inputfield-loader.php
<input type="text" name="firstname" id="firstname"></div>
<div><input type="text" name="email" id="email"></div>
<div><input type="text" name="birthdate" id="datefield"></div>
<div><input type="submit"></div>
Everything works fine if the input field is just hard-coded into the page. But when inserted into the DOM as the return string of an Ajax call, the date picker no longer works. However, when I use Chrome to inspect the datefield field, I see that it has added the jQuery datepicker class hasDatepicker to it, indicating that the call to the jQuery.datepicker() method worked. But on click of the field, I don't see the date picker pop up.
As per #dfsq's suggestion, here is the fiddle. It comes closer to the original code: http://jsfiddle.net/35kgsjxk/
You're missing opening div tag in your inputfield-loader.php file, which can cause issue of hiding some elements.
If you're using correct headers and data type in $.ajax it should work as it's working on: http://jsfiddle.net/96d8k2m3/
I was also facing the same issue. I fixed this as,
$(document).bind('click','#datefield',function(){
$('#datefield').datepicker();
})

Setting and unsetting variables in JavaScript/jQuery

I have a series of check boxes, jquery menu, auto complete and input boxes. How would you go about setting a variable that will display in a div with the values of everything that is selected, checked or typed?
I have tried
str += data.id;
For example. Which works for everything involved, except when changing the selection it just adds on to the end.
$('#txtDesc').html( str );
Is what I'm using to place it into the div and using the on select option in jQuery menu to trigger it.
I'm using the
str += checkedValue;
When a checkbox is checked but run into the same problem.
I know what I want it to do but I lack the knowledge to do it or even to search for it because I don't think I'm calling it the right thing.
I'm adding a fiddle, however for some reason it isn't working at all in the fiddle.
http://jsfiddle.net/tjje63oh/2/
So basically here is what is supposed to happen.
You select a unit, it goes down into the div, then you select a reason, it goes after the unit, then you select a location which goes after the reason.
If you change a unit, it should remove the one you have and replace it with the new one, but still read in order: unit, reason, location
So to me it seems like you want to figure out values of things that have changed in the html and display them somewhere in a "dig" which I assume you meant to mean as "div".
You can do stuff like this and attache is a fiddle with other simple examples
HTML
<input type="text" value="0" />
JS
$( "input[type='text']" ).on( "keypress", addValueToStuff );
http://jsfiddle.net/h13nLr3v/

How to replace whitespace with underscore when copy value from form field to another

Someone should be able to find this example for me or give an example..
After hours of searching I found the answer using some bizare search terms in Google only for my 15 month old to close the browser window for me without book marking it! I had private browsing on so it didn't save my history :-(
I have a web form, I need to pass the value of one form field to another form field at the same time replace the white space with underscore using JQuery.
example of what I'm looking for
<input name="PageName" id="PageName" type="text" value="All About Us Page" />
<input name="PageURL" id="PageURL" type="hidden" value="all_about_us_page" />
so when the form is submitted it gives nice formatted URLs to the page(s) I don't know much about JavaScript or JQuery and how to write variable to make it work.
Hope someone can give a working example, so at least I can get it working and in turn help someone searching in vien for the same solution the title of this should rank pretty high in Google for others to follow.
A little jQuery plugin to do something like this (this would put the value of the first matched element into the set of elements matched by the passed in selector):
$.fn.copyTo = function(selector) {
$(selector).val($(this[0]).val().replace(/\s/g, "_"));
};
Example usage:
$("#source").copyTo("#dest");
Here's a working example.
To copy the value from source, to dest, while replacing whitespace with an underscore, this should do it.
$("#dest").val($("#source").val().replace(' ', '_'));
Or to get any whitespace
$("#dest").val($("#source").val().replace(/\s/g, '_'));

innerHTML ignores DOM changes for checkbox and radio input in IE8

I would like to get the updated DOM html string for the form elements (e.g. <input type="text">, <input type="radio">, <input type="radio">, <textarea>).
I found this question and I am trying to use the formhtml plugin written by gnarf:
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
The problem is that it works in Firefox and Chrome but only works partially in IE8 (I have not tested other versions).
If you open the following page in IE8, you can see there is a text box, some checkboxes and radios. Try entering some text and check the checkboxes and radios.
http://jsfiddle.net/e9j6j/1/
Then click on the 'Click' button.
You can see that no matter I am retrieving the html string through the innerHTML property of a native DOM object or by using the formhtml() function of the plugin. The html returned only reflects the changes in the value attribute of the textbox, you can never see the checked="checked" attributes in <input type="radio"> and <input type="checkbox"> even you have already checked them before clicking the button.
Why is this happening, and how I can make it work in IE?
Thanks in advance.
EDIT:
I am sorry. I made some mistakes in my question, now it has been rewritten.
EDIT:
The sample codes were created to demonstrate my problem but I made some mistakes. Both IE7 and IE8 do give expected results (I also did the tests again).
In my original codes, I do not directly use formhtml() function on the $('#div1') but rather clone it before using formhtml() like this:
alert($('#div1').clone().formhtml());
And on IE8 with jQuery 1.3.2, the returned html does not reflect the checked states of those checkboxes and radios, I never thought it would be the problem of the clone() function that's why when I created the sample codes, I did not clone it and so the actual problem failed to be demonstrated.
The updated sample codes are here (with jQuery version changed to 1.3.2):
http://jsfiddle.net/e9j6j/4/
This may show the problem of the clone() function on IE8 (I don't have IE8 right now, I will test it when I am home, I will report later).
EDIT:
I have just did the test. It's really the problem of clone() function in jQuery 1.3.2 on IE8. It fails to copy the states of checkboxes and radios. After changing it to jQuery 1.5.1. It works perfectly.
I tried the test case at http://jsfiddle.net/e9j6j/1/ on IE8 and IE7 and they worked for me.
Steps to replicate problem:
Load http://jsfiddle.net/e9j6j/1/ in IE browser.
Enter text in the text field, check first radio button, check first checkbox.
Press 'Click' button.
Expected result:
Both alerts show value on text field and 'checked' state on first radio & first checkbox.
Actual result:
As expected. However, bear in mind that IE's representation of the DOM means that checked="checked" is actually reported as CHECKED but it is correct.
UPDATED:
Added a test to ensure that the checked state can be copied to a new dom node:
$('#btn1').click(function() {
alert($('#div1').formhtml());
alert(document.getElementById('div1').innerHTML);
var div1 = $('#div1');
div1.clone().insertAfter(div1);
});
This creates another set of fields which retain the original input state.
View on jsfiddle.

Categories