How to fill a textarea so it's submitted in a form after setting value with jQuery

Question

I was trying to automatically fill the form for ad report on mobile.de (Object to ad link). Filling fields (textarea for the description, inputs for email and phone number) with jQuery and submitting the form doesn't work as the fields are reset on submit. Filling them with jQuery works (you can see the change) but the field gets reset when a user focuses the field manually with the mouse.

I thought that some events were messing with the fields so I tried to block them but then I realized that not even jQuery triggers work on the fields (e.g. $().focus() doesn't work).

How can I fill the form with jQuery so the values stay in the fields (without manipulating the post request)?

Edit:

$('#complain-link-center').click(function() {

    setTimeout(function() {
        // first radio click
        $('#reasonName_CONTRADICTORY_VEHICLE_DATA').click();

        // second radio click
        $('#sourceOfDistrust_AD').click();

        // this doesn't work
        $('.cBox-body .g-col-4 textarea').focus();

        // this works but you have to manually focus the field (stays populated on submit)
        $('input#email').focus(function() {
            $(this).val('email@example.com');
        });

    }, 100);
});

Edit2: I figured out that this page is developed with ReactJS so that's why it doesn't work with jQuery. Is there any possibility to manipulate ReactJS components with jQuery?

@HassanSiddiqui you can visit mobile.de to see how the form is behaving. HTML alone won't help you. E.g. (not promoting any page, just giving an example, any ad is ok): [link](https://suchen.mobile.de/fahrzeuge/details.html?id=275866268&lang=en) Click _Object to ad_ while in the ad. — semrola, Mar 27 '19 at 19:45
Are you executing your code in console panel in developer tool ? — Hassan Siddiqui, Mar 28 '19 at 19:42
Since ReactJS entered the game, I was able to find an answer: [What is the best way to trigger onchange event in react js](https://stackoverflow.com/a/46012210/7781041) — semrola, Mar 30 '19 at 09:23

Hassan Siddiqui · Answer 1 · 2019-03-28T20:47:43.307

0

Try this, i hope it'll help you out. Thanks

$('#complain-link-center').click(function() {

    setTimeout(function() {
        // first radio click
        $('#reasonName_CONTRADICTORY_VEHICLE_DATA').click();

        // second radio click
        $('#sourceOfDistrust_AD').click();

        // this doesn't work
        $('.cBox-body .g-col-4 textarea').focus();

        // this works but you have to manually focus the field (stays populated on submit)
        $('#email').focus(function() {
            $(this).val('email@example.com');
        });

    }, 2000);
});

<form>
<div class="form-group">
  <label>Radio 1</label>
  <input type="radio" class="form-control" id="reasonName_CONTRADICTORY_VEHICLE_DATA">
</div>
<div class="form-group">
  <label>Radio 2</label>
  <input type="radio" class="form-control" id="sourceOfDistrust_AD">
</div>
<div class="form-group cBox-body">
  <div class="g-col-4">
    <label>Message</label>
    <textarea id="message"></textarea>
  </div>
</div>
<div class="form-group">
  <label>Email</label>
  <input type="email" id="email" />
</div>
</form>

<button id="complain-link-center" class="btn">Complain</button>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

edited Mar 28 '19 at 20:47

answered Mar 27 '19 at 20:12

Hassan Siddiqui

2,799
1
13
22

I don't get it. I was expecting a fixed jQuery code which works on mobile.de form (or maybe an explanation why the `focus()` on the textarea and inputs doesn't work). – semrola Mar 28 '19 at 19:03
`focus()` working fine on **textarea** in above code snippet. have you try it ? – Hassan Siddiqui Mar 28 '19 at 19:08
Are you executing your code in console panel in developer tool ? – Hassan Siddiqui Mar 28 '19 at 19:50
Yes, I'm executing the code in the console or in the tampermonkey script. I meant to fill the actual form on mobile.de with jQuery. – semrola Mar 28 '19 at 20:21
I just change **setTimeout** value from **100** to **2000** in the above **code snippet**. Copy script and paste in **console tab** in **developer tool**. Make sure after executing command please close **developer tool** by hitting **f12**. – Hassan Siddiqui Mar 28 '19 at 20:52

How to fill a textarea so it's submitted in a form after setting value with jQuery

1 Answers1