javascript - 根据用户输入的内容，按钮链接到不同的链接

Question

我正在创建一个表单，其中每个组合框的填充取决于最后一个组合框中输入的内容。选择所有选项后，我会出现一个价格估算。不过，我需要一个提交按钮，根据所做的 3 个选择，该按钮会将您带到不同的链接。感谢任何帮助，提前致谢。我的代码:

<!--
    // This script supports an unlimited number of linked combo boxed
    // Their id must be "combo_0", "combo_1", "combo_2" etc.
    // Here you have to put the data that will fill the combo boxes
    // ie. data_2_1 will be the first option in the second combo box
    // when the first combo box has the second option selected


data_1 = new Option("3:2 Aspect (1.5 to 1)", "$");
data_2 = new Option("Square", "$$");
data_3 = new Option("Panoramic", "$$$");
data_4 = new Option("Split", "$$$$");

// second combo box

data_1_1 = new Option("8inch x 12inch (20x30cm)", "-");
data_1_2 = new Option("14inch x 20inch (36x51cm)", "-");
data_1_3 = new Option("20inch x 28inch (51x71cm)", "-");
data_2_1 = new Option("8inch x 8inch (20x20cm)", "--");
data_2_2 = new Option("12inch x 12inch (30x30cm)", "--");
data_2_3 = new Option("14inch x 14inch (36x36cm)", "--");
data_2_4 = new Option("20inch x 20inch (51x51cm)", "--");
data_3_1 = new Option("8inch x 20inch (20x51cm)", "---");
data_3_2 = new Option("12inch x 28inch (36x71cm)", "---");
data_4_1 = new Option("3x 8inch x 20inch (20x51cm)", "----");
data_4_2 = new Option("3x 12inch x 28inch (36x71cm)", "----");
data_4_3 = new Option("4x 8inch x 20inch (20x51cm)", "----");
data_4_4 = new Option("4x 12inch x 28inch (36x71cm)", "----");

// third combo box

data_1_1_1 = new Option("Laminate", "£34.98");
data_1_1_2 = new Option("Don't laminate", "£29.99");
data_1_2_1 = new Option("Laminate", "£49.98");
data_1_2_2 = new Option("Don't laminate", "£39.99");
data_1_3_1 = new Option("Laminate", "£89.98");
data_1_3_2 = new Option("Don't laminate", "£69.99");
data_2_1_1 = new Option("Laminate", "£29.98");
data_2_1_2 = new Option("Don't laminate", "£24.99");
data_2_2_1 = new Option("Laminate", "£40.48");
data_2_2_2 = new Option("Don't laminate", "£34.99");
data_2_3_1 = new Option("Laminate", "£47.98");
data_2_3_2 = new Option("Don't laminate", "£39.99");
data_2_4_1 = new Option("Laminate", "£69.98");
data_2_4_2 = new Option("Don't laminate", "£54.99");
data_3_1_1 = new Option("Laminate", "£41.98");
data_3_1_2 = new Option("Don't laminate", "£34.99");
data_3_2_1 = new Option("Laminate", "£77.98");
data_3_2_2 = new Option("Don't laminate", "£64.99");
data_4_1_1 = new Option("Don't laminate", "£79.99");
data_4_2_1 = new Option("Don't laminate", "£134.99");
data_4_3_1 = new Option("Don't laminate", "£94.99");
data_4_4_1 = new Option("Don't laminate", "£179.99");

//link combos





// other parameters

displaywhenempty = ""
valuewhenempty = -1

displaywhennotempty = "-select-"
valuewhennotempty = 0


function change(currentbox) {
  numb = currentbox.id.split("_");
  currentbox = numb[1];

  i = parseInt(currentbox) + 1

  // I empty all combo boxes following the current one

  while ((eval("typeof(document.getElementById(\"combo_" + i + "\"))!='undefined'")) &&
    (document.getElementById("combo_" + i) != null)) {
    son = document.getElementById("combo_" + i);
    // I empty all options except the first one (it isn't allowed)
    for (m = son.options.length - 1; m > 0; m--) son.options[m] = null;
    // I reset the first option
    son.options[0] = new Option(displaywhenempty, valuewhenempty)
    i = i + 1
  }


  // now I create the string with the "base" name ("stringa"), ie. "data_1_0"
  // to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill

  stringa = 'data'
  i = 0
  while ((eval("typeof(document.getElementById(\"combo_" + i + "\"))!='undefined'")) &&
    (document.getElementById("combo_" + i) != null)) {
    eval("stringa=stringa+'_'+document.getElementById(\"combo_" + i + "\").selectedIndex")
    if (i == currentbox) break;
    i = i + 1
  }


  // filling the "son" combo (if exists)

  following = parseInt(currentbox) + 1

  if ((eval("typeof(document.getElementById(\"combo_" + following + "\"))!='undefined'")) &&
    (document.getElementById("combo_" + following) != null)) {
    son = document.getElementById("combo_" + following);
    stringa = stringa + "_"
    i = 0
    while ((eval("typeof(" + stringa + i + ")!='undefined'")) || (i == 0)) {

      // if there are no options, I empty the first option of the "son" combo
      // otherwise I put "-select-" in it

      if ((i == 0) && eval("typeof(" + stringa + "0)=='undefined'"))
        if (eval("typeof(" + stringa + "1)=='undefined'"))
          eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
        else
          eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
      else
        eval("son.options[" + i + "]=new Option(" + stringa + i + ".text," + stringa + i + ".value)")
      i = i + 1
    }
    //son.focus()
    i = 1
    combostatus = ''
    cstatus = stringa.split("_")
    while (cstatus[i] != null) {
      combostatus = combostatus + cstatus[i]
      i = i + 1
    }
    return combostatus;
  }
}

window.onload = function() {
  document.getElementById("combo_2").onchange = function() {
    document.getElementById("value").value = this.options[this.selectedIndex].value;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p>Choose your canvas type</p>
<form method="post" action="" id="canvasform">
  <select name="combo0" id="combo_0" style="width:200px;" form="canvasform" onChange="change(this);">
    <option value="value1">-select-</option>
    <option value="value2">3:2 Aspect (1.5 to 1)</option>
    <option value="value3">Square</option>
    <option value="value4">Panoramic</option>
    <option value="value5">Split</option>

  </select>
  <p>Choose your canvas size</p>
  <select name="combo1" id="combo_1" style="width:200px;" form="canvasform" onChange="change(this)">
    <option value="value1"></option>
  </select>
  <p>Would you like it laminated? (not available for split canvases)</p>
  <select name="combo2" id="combo_2" style="width:200px;" form="canvasform" onChange="change(this);">
    <option value="value1"></option>
  </select>
  <BR>
  <BR>
  </select>
  <p>Price</p>
  <input type="text" id="value" form="canvasform" readonly/>


</form>

Answer 1

表单提交时；您可以检查所有选择都已完成，并可以计算新的操作 URL。请查看$('#canvasform').submit(function (event)写在JS代码的最底层。我还添加了 <input type="submit" class="form-submit" />在您的 HTML 代码中。

<!--
    // This script supports an unlimited number of linked combo boxed
    // Their id must be "combo_0", "combo_1", "combo_2" etc.
    // Here you have to put the data that will fill the combo boxes
    // ie. data_2_1 will be the first option in the second combo box
    // when the first combo box has the second option selected


data_1 = new Option("3:2 Aspect (1.5 to 1)", "$");
data_2 = new Option("Square", "$$");
data_3 = new Option("Panoramic", "$$$");
data_4 = new Option("Split", "$$$$");

// second combo box

data_1_1 = new Option("8inch x 12inch (20x30cm)", "-");
data_1_2 = new Option("14inch x 20inch (36x51cm)", "-");
data_1_3 = new Option("20inch x 28inch (51x71cm)", "-");
data_2_1 = new Option("8inch x 8inch (20x20cm)", "--");
data_2_2 = new Option("12inch x 12inch (30x30cm)", "--");
data_2_3 = new Option("14inch x 14inch (36x36cm)", "--");
data_2_4 = new Option("20inch x 20inch (51x51cm)", "--");
data_3_1 = new Option("8inch x 20inch (20x51cm)", "---");
data_3_2 = new Option("12inch x 28inch (36x71cm)", "---");
data_4_1 = new Option("3x 8inch x 20inch (20x51cm)", "----");
data_4_2 = new Option("3x 12inch x 28inch (36x71cm)", "----");
data_4_3 = new Option("4x 8inch x 20inch (20x51cm)", "----");
data_4_4 = new Option("4x 12inch x 28inch (36x71cm)", "----");

// third combo box

data_1_1_1 = new Option("Laminate", "£34.98");
data_1_1_2 = new Option("Don't laminate", "£29.99");
data_1_2_1 = new Option("Laminate", "£49.98");
data_1_2_2 = new Option("Don't laminate", "£39.99");
data_1_3_1 = new Option("Laminate", "£89.98");
data_1_3_2 = new Option("Don't laminate", "£69.99");
data_2_1_1 = new Option("Laminate", "£29.98");
data_2_1_2 = new Option("Don't laminate", "£24.99");
data_2_2_1 = new Option("Laminate", "£40.48");
data_2_2_2 = new Option("Don't laminate", "£34.99");
data_2_3_1 = new Option("Laminate", "£47.98");
data_2_3_2 = new Option("Don't laminate", "£39.99");
data_2_4_1 = new Option("Laminate", "£69.98");
data_2_4_2 = new Option("Don't laminate", "£54.99");
data_3_1_1 = new Option("Laminate", "£41.98");
data_3_1_2 = new Option("Don't laminate", "£34.99");
data_3_2_1 = new Option("Laminate", "£77.98");
data_3_2_2 = new Option("Don't laminate", "£64.99");
data_4_1_1 = new Option("Don't laminate", "£79.99");
data_4_2_1 = new Option("Don't laminate", "£134.99");
data_4_3_1 = new Option("Don't laminate", "£94.99");
data_4_4_1 = new Option("Don't laminate", "£179.99");

//link combos





// other parameters

displaywhenempty = ""
valuewhenempty = -1

displaywhennotempty = "-select-"
valuewhennotempty = 0


function change(currentbox) {
  numb = currentbox.id.split("_");
  currentbox = numb[1];

  i = parseInt(currentbox) + 1

  // I empty all combo boxes following the current one

  while ((eval("typeof(document.getElementById(\"combo_" + i + "\"))!='undefined'")) &&
    (document.getElementById("combo_" + i) != null)) {
    son = document.getElementById("combo_" + i);
    // I empty all options except the first one (it isn't allowed)
    for (m = son.options.length - 1; m > 0; m--) son.options[m] = null;
    // I reset the first option
    son.options[0] = new Option(displaywhenempty, valuewhenempty)
    i = i + 1
  }


  // now I create the string with the "base" name ("stringa"), ie. "data_1_0"
  // to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill

  stringa = 'data'
  i = 0
  while ((eval("typeof(document.getElementById(\"combo_" + i + "\"))!='undefined'")) &&
    (document.getElementById("combo_" + i) != null)) {
    eval("stringa=stringa+'_'+document.getElementById(\"combo_" + i + "\").selectedIndex")
    if (i == currentbox) break;
    i = i + 1
  }


  // filling the "son" combo (if exists)

  following = parseInt(currentbox) + 1

  if ((eval("typeof(document.getElementById(\"combo_" + following + "\"))!='undefined'")) &&
    (document.getElementById("combo_" + following) != null)) {
    son = document.getElementById("combo_" + following);
    stringa = stringa + "_"
    i = 0
    while ((eval("typeof(" + stringa + i + ")!='undefined'")) || (i == 0)) {

      // if there are no options, I empty the first option of the "son" combo
      // otherwise I put "-select-" in it

      if ((i == 0) && eval("typeof(" + stringa + "0)=='undefined'"))
        if (eval("typeof(" + stringa + "1)=='undefined'"))
          eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
        else
          eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
      else
        eval("son.options[" + i + "]=new Option(" + stringa + i + ".text," + stringa + i + ".value)")
      i = i + 1
    }
    //son.focus()
    i = 1
    combostatus = ''
    cstatus = stringa.split("_")
    while (cstatus[i] != null) {
      combostatus = combostatus + cstatus[i]
      i = i + 1
    }
    return combostatus;
  }
}

window.onload = function() {
  document.getElementById("combo_2").onchange = function() {
    document.getElementById("value").value = this.options[this.selectedIndex].value;
  }
}

$('#canvasform').submit(function (event)
{
    var action = '';
    // compute action here...
  
  var combo_0_selection = $("#combo_0").val();
  var combo_1_selection = $("#combo_1").val();
  var combo_2_selection = $("#combo_2").val();
  
  action = combo_0_selection+"/"+combo_1_selection+"/"+combo_2_selection;
  alert("newer action is "+action);
  //set the newer action to form
    //$(this).attr('action', action);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p>Choose your canvas type</p>
<form method="post" action="" id="canvasform">
  <select name="combo0" id="combo_0" style="width:200px;" form="canvasform" onChange="change(this);">
    <option value="value1">-select-</option>
    <option value="value2">3:2 Aspect (1.5 to 1)</option>
    <option value="value3">Square</option>
    <option value="value4">Panoramic</option>
    <option value="value5">Split</option>

  </select>
  <p>Choose your canvas size</p>
  <select name="combo1" id="combo_1" style="width:200px;" form="canvasform" onChange="change(this)">
    <option value="value1"></option>
  </select>
  <p>Would you like it laminated? (not available for split canvases)</p>
  <select name="combo2" id="combo_2" style="width:200px;" form="canvasform" onChange="change(this);">
    <option value="value1"></option>
  </select>
  <BR>
  <BR>
  </select>
  <p>Price</p>
  <input type="text" id="value" form="canvasform" readonly/>

<input type="submit" class="form-submit" />
       
</form>