Difficulty sending values to input fields (sounds ridiculous)

Question

EDITED: New information: When I inspect the field, and the code is highligted (in the inspector), then the statements all work as they should, but when the field isn't highlighted anymore, the statements do not appear to work. Hopefully this helps diagnose the issue.

I have a wufoo form (a hosted form that you can embedd, send to spefic email on submit etc). I have a field on that form that I am trying to populate with a certain piece of data once I click a button. I believe I have the correct code to make this happen, and it should work:

    $('#my-button').click(function() {
      $('#Field3').val("something");
    });

I have tried many different ways:

    $('input[id="Field3"]').val("something");
    $('input[name="Field3"]').val("something");

and a few reaches which I didn't really think would work..

    $('#Field3').append("something");
    $('#Field3').text("something");

There are a few things that confuse me here, and I will post screens below showing what I mean. I can type all of these commands in the console once the page is loaded and nothing will happen to the field (with the id of Field3)...most of the time. But on several occasions, I would reload the page, try a few statements again, yes the same ones, and then it would work. No idea why or how, but it is sort of an intermittent thing. Obviously that's probably not the case, but I am pretty confused as to why this is happening;

Below are three screens of my console. For the first two, the field finally populated after about 10 or more tries in the console, and then continued to work while using commands that didn't work before. The last screen is an attempt that did not work at all:

[![Eventually Works After Last Command][1]][1]
[![Eventually Works After Last Command][2]][2]
[![Did Not Work][3]][3]

[1]: https://i.stack.imgur.com/JKVxY.jpg
[2]: https://i.stack.imgur.com/MLca8.jpg
[3]: https://i.stack.imgur.com/0viRA.jpg

(Apologies for the way I had to post these images, I keep getting formatting errors that will not let me continue to save the post unless I cmd+k them)

I try everything in the console first, but I can not find any patterns here. Any ideas or input would be greatly appreciated, and thank you for your time.

It's better if you post your HTML with stack snippet or jsfiddle ? — Nalin Aggarwal, Aug 30 '16 at 17:30
@Tron your fiddle does not work because jQuery is not included. Updated jsfiddle: https://jsfiddle.net/bwrLmn3t/2/ — gaetanoM, Aug 30 '16 at 17:49

score 1 · Answer 1 · answered Aug 31 '16 at 15:18

At this point I'm pretty sure the problem has to do with the form-code switching or adding certain classes under certain conditions, so I downloaded the code from my Wufoo account rather than embedding it. Then I only added the code for the view (not css or JS), and it works now.

My original statements (not the reachers) all work fine now when I try them. Thanks for the time everyone.

score 1 · Answer 2 · answered Sep 03 '16 at 23:17

I know you solved your issue, but figured I'd chime in in case you or others have this issue again in the future. It sounds like your issue was related to execution order. Wufoo's embed scripts are asynchronous, so it's very likely that the input fields in question didn't yet exist on your page at the time your jQuery click handler was evaluated. Changing your original code to jQuery's "on" method instead of "click" would likely have solved your problem, as "on" provides a delegated event listener. At any rate, glad you got everything sorted out!

gaetanoM · Answer 3 · 2016-08-30T17:47:04.737

0

In the console I assume there is no jQuery loaded.

I usually write:

document.getElementById('Field3').value = "something";

edited Aug 30 '16 at 17:47

answered Aug 30 '16 at 17:31

gaetanoM

41,594
6
42
61

@Tron I forgot the ' sign. Could you try again and let me know? Thanks – gaetanoM Aug 30 '16 at 17:47
I use jQuery in the console all the time, is that what you mean? Yes this syntax would work, and did in 1 case. I have just found that most of my statements work only when I inspect the field and the code is highlighted, otherwise it won't respond. Does that give a clue? – Tron Aug 30 '16 at 17:56
@Tron If you are using Chrome, when you select "Elements" in the dev tools "F12" and select an element you are changing the context of the console to the webpage contained in the current tab. So, if in this current tab, jQuery is defined you can use it. – gaetanoM Aug 30 '16 at 19:47

score 0 · Answer 4 · answered Aug 30 '16 at 17:54

0

Updated your Jsfiddle. The only thing I changes, I added the reference of the Jquery. Might be that's the problem.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

answered Aug 30 '16 at 17:54

Nalin Aggarwal

886
5
8

Check out the update above. I have found that if I am actively inspecting the code and it is highlighted then most of these statements work, otherwise, no response. – Tron Aug 30 '16 at 18:06
thats the problem @Nalin – Tron Aug 30 '16 at 20:13
@Tron what's the problem ? – Nalin Aggarwal Aug 30 '16 at 20:15

Difficulty sending values to input fields (sounds ridiculous)

4 Answers4