How to capture value of a mouseenter event (scroll)

JavaScript
,
1

I am trying to capture a value when a visitor to the site selects a value from a scroll. I want to captuer that value when they click the submit button on a form.

The website is http://atlanticbay.com/douglasmoran/ You will see form at bottom of page, the Scroll is title
“how can we help you?” <—The value they select here is what I want to capture.

Here is the JQuery I tried along with other, but this was my final effort.

$('.gform_footer').click(function() {
  _satelite.getVar = $(this).mouseenter(('option').val());
});

sample HTML

<div class="ginput_container ginput_container_select"><
select name="input_7" id="input_1_7" class="medium gfield_select" tabindex="56" aria-required="true" aria-invalid="false">
<option value="" selected="selected" class="gf_placeholder">How Can We Help</option>
<option value="general" selected="selected">General Question</option>
<option value="purchase">Purchase</option>
<option value="refinance">Refinance</option></select></div>
</li>==0
 { list…}

#gform_1 > div.gform_footer.top_label
<input type="submit" id="gform_submit_button_1" class="gform_button button" value="Send" tabindex="58" onclick="if(window[&quot;gf_submitting_1&quot;]){return false;}  window[&quot;gf_submitting_1&quot;]=true;  " onkeypress="if(window[&quot;gf_submitting_1&quot;]){return false;} window[&quot;gf_submitting_1&quot;]=true;  jQuery(&quot;#gform_1&quot;).trigger(&quot;submit&quot;,[true]);">
2

So are you trying to get the event BEFORE they entered the field, or after they change it?

If it’s before, you’ll need to capture it with the focus event: https://developer.mozilla.org/en-US/docs/Web/Events/focus

If it’s after, you’ll want the change event: https://developer.mozilla.org/en-US/docs/Web/Events/change

3

You mean that select with the ID input_1_7? You’re probably thinking way too complicated then. :-) You can get the value of the selected option simply by the value of the select element, like

var _satelite = {};

$('#gform_1').submit(function() {

  _satelite.getVar = $('#input_1_7').val();
  console.log(_satelite.getVar);
});
4

Ok so i want the value that they select, but i can’t capture it until after they click submit. SO i want the value in the field after they changed it. What ever it may be at the time they click submit.

5

I will look at the links you sent. Thanks @DaveMaxwell

6

Ok @m3g4p0p, I tried what you suggested, but did not work.
var _satelite = {};

$('#gform_1').submit(function() {

  _satelite.getVar = $('#input_1_7').val();
  console.log(_satelite.getVar);
});
7

@DaveMaxwell. I cannot add too or make any changes to HTML. Have to accomplish task using JQuery or Javascript only.

8

What exactly did not work? I just copy/pasted that snippet into the console, and when I click the “send” button it logs the value of the currently selected option as expected.

However, if you want to get that value right when the option is selected, you’ll need a change event listener as @DaveMaxwell suggested. There are no changes to the markup necessary either way. (Did anybody maintain the contrary?) ^^

2 Likes
9

@m3g4p0p

No I don’t need to grab it until they select submit.

10

Ok so I tried to do the same thing, I copy paste the snippet into the console and then clicked send. I don’t see a console log of the value. If i fill out the form and then click the submit button after copy paste snippet into console… this is what I see…

$(‘#gform_1’).submit(function() {
_satelite.getVar = $(‘#input_1_7’).val();

// Do something with that value
});
[<form method=​"post" enctype=​"multipart/​form-data" target=​"gform_ajax_frame_1" id=​"gform_1" class=​"mb-contact-form" action=​"/​amieecarr/​#gf_1">​…​​]
SATELLITE: detected tabfocus on #document
SATELLITE: detected click on INPUT
SATELLITE: detected submit on FORM
SATELLITE: detected elementexists on DIV

11

Well that’s not the snippet I posted above. ;-) First of all, you didn’t declare satelite, which would actually yield a reference error; and then you didn’t log the result, so of course there won’t be any output. Also, don’t fill out the entire form, as any console output will disappear if you get redirected; just select an option and click “send”.

12

@m3g4p0p Yeah your right. I made the corrections, and I do see the correct value.

13

I think I know what the problem is. When the form is completely filled out and the visitor click on the submit button, the form is changed before the script could capture the option selected. That is why I can’t capture the value even though the script works. I need to find a way to capture the value before the form is changed when the visitor click on the submit button.

15

So I assume you don’t have access to the original submit handler which does evaluate and eventually change and submit the form? It depends at which point you need to process those input values then… one possibility would be aforementioned change event listener, which updates _satelite.getVar each time an option gets selected.

Another option would be to prevent the default event when submitting the form, do something with the value, and when everything is done remove the submit handler and trigger another submit event on the form; however this is likely to interfere with the original site logic, which appears to be pretty involved. Anyway, it really depends on what you’re trying to do with that value.

1 Like
16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.