0

Image

The Problem: Before I began adding the div swaps, I could only type into the left (from_value) input and the result of the calculations would be applied via ajax to the right (to_value) input.

I would like to allow the user to type into either box and have the results display in the opposite box they're typing in.

What I am doing to make this happen:

I am swapping the left div with the right div on mouseover of the to_value input. Here's the code i'm using to do the swap:

$.fn.swapWith = function (that) {
    var $this = this;
    var $that = $(that);

    // create temporary placeholder
    var $temp = $("<div>");

    // 3-step swap
    $this.before($temp);
    $that.before($this);
    $temp.after($that).remove();


    return $this;
};
var leftSide = $('#left-side');
var rightSide = $('#right-side');

$('#to_value_input').on('mouseover', function () {
    $(rightSide).swapWith(leftSide);
});

This effectively swaps the divs, bringing along with it ids and names of the inputs which retains functionality of my server-side script to perform calculations. As expected, the from_unit select list and to_unit select list are swapped and their values / displayed text are also swapped from one side to the other.

I would like to swap the values and text of the two select boxes either directly before or more likely, directly after the div swap so it appears as if nothing changed on screen.

Similar questions that I have reviewed:

How to swap values in select lists with jquery?

How to swap selected option in 2 select elements?

I have tried several variations of each of the provided solutions. This seems like it should be a fairly simple thing to do but I find myself stuck. Any further help would be greatly appreciated.

The full code base is available on github if you need to see it: https://github.com/pschudar/measurement-conversion

I have made minor changes to the code hosted there to accommodate the div swaps.

Paul S
  • 33
  • 8
  • I'm very confused by what you're trying to accomplish here. Why are you swapping divs and their values back and forth? Can you post the relevant HTML and Ajax code too? It seems like you want 2 inputs and 2 selects, and then if the values change on any of those 4 elements, then you submit an Ajax request with the "changed" input and select, then return all 4 values (or just the other 2 that didn't change), and then update them in JS. Without seeing more of your code ([minimal example](https://stackoverflow.com/help/minimal-reproducible-example), not the entire repo) this seems overly complex. – WOUNDEDStevenJones Jun 24 '20 at 21:46
  • Yes, the whole situation does seem a bit convoluted. The idea behind swapping the div elements around is that it contains the input element that the server-side script uses to process the incoming data. It's coded to only allow for info from the "from_value" input to be converted. By swapping the div, the either the left or the right side can be used to input an integer or a float. – Paul S Jun 24 '20 at 22:01
  • I'll work on adding a workable example here in a bit. – Paul S Jun 24 '20 at 22:02
  • I'd suggest maybe leaving the HTML as 2 (editable) inputs and 2 (selectable) selects, and then on form submission in JS you nab the correct values (from or to) to send off to your server. So rather than _always_ sending the _from_ values, instead use a variable to determine which values to send - maybe by capturing and storing the most recent field edited in an `onchange` event? – WOUNDEDStevenJones Jun 24 '20 at 23:29
  • This is the approach that I ended up taking, WOUNDEDStevenJones. It was easier than I expected, but It added a fair chunk of jQuery to the script. In essence, I added an event listener to each input box on `input`, if changes were made, this box then became the `from_value` and the other defaulted to the `to_value`. Then, I defined the values using `formData.set('key, value');` – Paul S Jun 25 '20 at 17:42
  • That sounds perfect, and definitely cleaner from an implementation perspective than swapping divs around. JS is for making things interactive, so that makes sense :) – WOUNDEDStevenJones Jun 25 '20 at 17:50
  • I appreciate your tips. I'm not new to JavaScript by any means these days but I do not work with it every day, though I would love to get into it! My initial line of thinking was to minimize the necessary JS -- one function for swapping divs and selected select list values _seemed_ like a good way to go. This approach does seems cleaner. Thanks again – Paul S Jun 25 '20 at 18:02

0 Answers0