How to modify a URL in Javascript

Question

Currently, I have a list of words generated based on selections from a form. When the selections change, so do the words. What I want to add is a simple link that contains the generated words in the URL.

In particular, in jsfiddle.net/9v9xu266/ I have a list generated based on which of apple, orange, and pear are selected. For example, if I select only apple and pear, then my list will say

-o Farmer1 Farmer2

What I want to add, below this list, is the following link:

<a href="XX.XX.XX.XX/exec?args=Farmer1%20Farmer2>Click Me</a>

That is, after the args= in the URL, I will always want the space-separated list of words.

So, as you can see, the "heavy lifting" (such as it is), has already been done here. But I don't know how to dynamically adjust the URL.

kzhao14 · Accepted Answer · 2015-12-12 03:32:46Z

Since you're already outputting most of the words you want, you could try http://jsfiddle.net/9v9xu266/1/

$(document).ready(function() {
  $(":checkbox").prop("checked", false);
  $('table td:not(:first-child)').hide();
  $('table tr:not(:first-child)').hide();

  updateTestList();
  $("#testListClickContainer").click(function() {
    $("#testList").toggle();
    $("#hideTestList").toggle();
    $("#showTestList").toggle();
  });

  $("#xor").click(function() {
    if ($(this).is(':checked')) {
      xorRows();
    } else {
      showOrHideRows();
    }
    updateTestList();
  });

  $(".type", "#optionBoxes").click(function() {
    if ($(this).is(':checked')) {
      showColumn(this.name);
      showOrHideRows();
      if (document.getElementById('xor').checked) {
        xorRows();
      }
    } else {
      hideColumn(this.name);
      showOrHideRows();
      if (document.getElementById('xor').checked) {
        xorRows();
      }
    }
    var tests = "-o";
    $("#tableResult tr:visible:not(:first-child) td:first-child").each(function() {
      tests = tests.concat(" ");
      tests = tests.concat($(this).text());
    });
    $("#testList").text(tests);
    $('#link').attr('href', 'http://XX.XX.XX.XX/exec?args=' + tests.replace('-o ', ""));
    updateTestList();
  });
});

function xorRows() {
  $("#tableResult tr:not(:first-child)").show();
  $("#tableResult tr:not(:first-child)").each(function() {
    var filtered = false;
    var inValidColumns = $("td:visible:not(:first-child)", this)
      .filter(function() {
        filtered = true;
        return $(this).text() === 0;
      }).length;
    $(this).toggle(inValidColumns === 0 && filtered);
  });

}

function hideColumn(columnIndex) {
  $('#tableResult td:nth-child(' + (columnIndex) + ')').hide();
}

function showColumn(columnIndex) {
  $('#tableResult td:nth-child(' + (columnIndex) + ')').show();
}

function showOrHideRows() {
  $("#tableResult tr:not(:first-child)").show();
  $("#tableResult tr:not(:first-child)").each(function() {
    var validColumns = $("td:visible:not(:first-child)", this).filter(function() {
      return $(this).text() == 1;
    }).length;

    $(this).toggle(validColumns !== 0);

  });

}

function updateTestList() {
  var tests = "-o";
  if ($("#testList").is(":visible")) {
    alert('doing stuff');
    $("#tableResult tr:visible:not(:first-child) td:first-child").each(function() {
      tests = tests.concat(" ");
      tests = tests.concat($(this).text());
    });
    $("#testList").text(tests);
  }
}

.cmdToCopy {
  background-color: #6699FF;
  color: white;
  width: 500px;
  font-family: monospace;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="options" onsubmit="return false">
  <b>xor:</b>
  <input type="checkbox" name="xor" id="xor" checked="" />XOR
</form>
<form name="tcol" onsubmit="return false">
  <b>Features:</b>
  <div id="optionBoxes">
    <input type="checkbox" name="2" class="type" checked="" />apple
    <input type="checkbox" name="3" class="type" checked="" />orange
    <input type="checkbox" name="4" class="type" checked="" />pear
  </div>
</form>
<div id="testListClickContainer">
  <a href="javascript:void(0);">
    <div id="hideTestList" style="display:none;">Hide test subset command</div>
    <div id="showTestList">Show test subset command</div>
  </a>
</div>
<p>
  <div id="testList" class="cmdToCopy" style="display:none;">List of tests.</div>
</p>
<table border="1" id="tableResult">
  <tbody>
    <tr>
      <td id="tcol1">Farmer #</td>
      <td id="tcol2">apple</td>
      <td id="tcol3">orange</td>
      <td id="tcol4">pear</td>
    </tr>
    <tr>
      <td name="tcol1" id="tcol1" class="bold">Farmer1</td>
      <td name="tcol2" id="tcol2">1</td>
      <td name="tcol3" id="tcol3" class="italic">1</td>
      <td name="tcol4" id="tcol4">1</td>
    </tr>
    <tr>
      <td name="tcol1" id="tcol1" class="bold">Farmer2</td>
      <td name="tcol2" id="tcol2">0</td>
      <td name="tcol3" id="tcol3" class="italic">1</td>
      <td name="tcol4" id="tcol4">1</td>
    </tr>
    <tr>
      <td name="tcol1" id="tcol1" class="bold">Farmer3</td>
      <td name="tcol2" id="tcol2">0</td>
      <td name="tcol3" id="tcol3" class="italic">1</td>
      <td name="tcol4" id="tcol4">0</td>
    </tr>
    <tr>
      <td name="tcol1" id="tcol1" class="bold">Farmer4</td>
      <td name="tcol2" id="tcol2">0</td>
      <td name="tcol3" id="tcol3" class="italic">1</td>
      <td name="tcol4" id="tcol4">0</td>
    </tr>
    <tr>
      <td name="tcol1" id="tcol1" class="bold">Farmer5</td>
      <td name="tcol2" id="tcol2">0</td>
      <td name="tcol3" id="tcol3" class="italic">1</td>
      <td name="tcol4" id="tcol4">0</td>
    </tr>
    <tr>
      <td name="tcol1" id="tcol1" class="bold">Farmer6</td>
      <td name="tcol2" id="tcol2">0</td>
      <td name="tcol3" id="tcol3" class="italic">1</td>
      <td name="tcol4" id="tcol4">0</td>
    </tr>
    <tr>
      <td name="tcol1" id="tcol1" class="bold">Farmer7</td>
      <td name="tcol2" id="tcol2">0</td>
      <td name="tcol3" id="tcol3" class="italic">1</td>
      <td name="tcol4" id="tcol4">0</td>
    </tr>
    <tr>
      <td name="tcol1" id="tcol1" class="bold">Farmer8</td>
      <td name="tcol2" id="tcol2">0</td>
      <td name="tcol3" id="tcol3" class="italic">1</td>
      <td name="tcol4" id="tcol4">0</td>
    </tr>
    <tr>
      <td name="tcol1" id="tcol1" class="bold">Farmer9</td>
      <td name="tcol2" id="tcol2">0</td>
      <td name="tcol3" id="tcol3" class="italic">1</td>
      <td name="tcol4" id="tcol4">0</td>
    </tr>
  </tbody>
</table>
<a href="" id="link">Click Me</a>

By the way, the code I added was:

<a href="" id="link">Click Me</a>

and

$('#link').attr('href','http://XX.XX.XX.XX/exec?args=' + tests.replace('-o ', ""));

Thanks, this is perfect. Could you show me how to make the link hidden if there are no "Farmers"? In other words, if tests is empty, I don't want the link to be clickable/visible.
No problem. Add if (tests.replace('-o','')!="") { $('#link').show(); } else { $('#link').hide(); } and a display: none; on the <a>. Example: jsfiddle.net/9v9xu266/2

filype · Accepted Answer · 2015-12-12 02:50:32Z

1

You can use the $.param function available in jQuery. Which will translate a javascript object into a URL representation.

Such as:

$("#testList").text(tests);
var $link = $('<a>').html('Link');
$link.attr('href', $.param(tests));

Here's an example: http://jsfiddle.net/m29r8xw3/

edited Dec 12, 2015 at 2:50

answered Dec 12, 2015 at 2:39

filype

8,47010 gold badges46 silver badges70 bronze badges

Comments

zer00ne · Accepted Answer · 2015-12-12 05:45:36Z

If you already have your items in an array as strings, then concat them into another string with the url. I don't remember seeing OP's Fiddle, oops.

var arr = ['farmer1', 'farmer2'];
var url = "https://example.com/exec?args=" + arr[0] + "%20" + arr[1];
console.log(url);

var in1 = document.getElementById("in1");
in1.addEventListener('change', function(event) {
  var in1Data = [];
  in1Data.push(in1.value);
  console.log(in1Data);
  var str = in1Data.toString();
  var args = encodeURIComponent(str);
  var base = "https://example.com/exec?args=";
  var out1 = document.getElementById('out1');
  return out1.value = base + args;
  event.stopPropagation();
}, false);

<fieldset>
  <legend>modifyURL</legend>
  <div><small>Enter: Item1 Item2 ... ItemN+ (space delimited list)</small>
  </div>
  <label>Enter List:</label>
  <input id="in1" />
  <br/>
  <label>URL:</label>
  <output id="out1"></output>
</fieldset>

Collectives™ on Stack Overflow

How to modify a URL in Javascript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related