Как установить ссылку на кнопку в зависимости от выбранного режима?

Вопрос:

Все, что я хочу, это то, что если пользователь решит иметь множественное заданное значение, тогда кнопка «next» получит другую ссылку на другую страницу.

  var singleMulticontainer = document.getElementById("singleMultiContainer");
var singleMultiValue =  singleMultiContainer.options[singleMultiContainer.selectedIndex].value;
var nextButton = document.getElementById("nextButton");
var multipleSetWindow = "window.location='multiSet.html'"

if(singleMultiValue == "multi"){
nextButton.onclick = multipleSetWindow;
}
else{
alert("notworking");
}

HTML-фрагмент:

<form id"suspendedProperties">
<p><h4>Select Station:
<select name="stationDropdown">
<option value="50028000">Tanama</option>
<option value="60008001">Example Riv1</option>
<option value="60008002">Example Riv2</option>
<option value="60008003">Example Riv3</option>
<option value="60008004">Example Riv4</option>
</select>
</h4></p>

<p>Select Sample Medium:
<select name="sampleMediumDropdown">
<option value="Wer">Wer</option>
<option value="WSQ">WSQ</option>
</select>
</p>
<p>Begin Date
<input type="date"/>
</p>
<p>Hydrologic Event: <select name="hydroEvent">
<option value="1">Example 1</option>
<option value="2">Example 2</option>
<option value="3">Example 3</option>
<option value="4">Example 4</option>
<option value="5">Example 5</option>
<option value="6">Example 6</option>
</select>
</p>
<p>Add:<input type="number" size=""/> <select name="singleMultiContainer"><option value="single">Single container sample</option><option value="multi">Multiple sets container</option></select></p>
<p>Analyses Requested:(Applies to all samples)<br/></p>
<div id="analyses" >
<input type="checkbox" name="analysis" value="C">Concentration</input>
<input type="checkbox" name="analysis" value="SF">Sand-fine break**</input>&nbsp;
<input type="checkbox" name="analysis" value="SA">Sand analysis**</input>  <br/>
<input type="checkbox" name="analysis" value="T">Turbidity</input>
<input type="checkbox" name="analysis" value="LOI">Loss-on-ignition**</input>&nbsp;
<input type="checkbox" name="analysis" value="DS">Dissolve solids</input>  <br/>
<input type="checkbox" name="analysis" value="SC">Specific conductance</input>
<input type="checkbox" name="analysis" value="Z">Full-size fractions**</input>
</div>
<input type="button" value="Back" onClick="window.location='SED_WE.html'"/>
<input type="button" value="Next" onClick="window.location='SampleInfo.html'"/>
</form>

Таким образом, последние две строки — это следующая и обратная кнопки. Я хочу дать следующей кнопке значение multiSet.html, если пользователь решил иметь контейнер с несколькими наборами.

Лучший ответ:

Вам нужно будет показать нам свой HTML-код, чтобы мы точно советовали.

Если это фактическая ссылка, то вы можете программно установить свойство .href которое определяет, на какой URL-адрес установлена ссылка.

Если это кнопка с прикрепленным к ней кодом, вы можете установить свойство, которое использует обработчик кликов, чтобы определить, к какому URL идти.

Например, если это кнопка с обработчиком кликов, вы можете получить этот обычный код:

// default value for nextURL in your initialization code
var nextURL = "singleSet.html";  

// click handler for the button
function handleClick() {
    window.location = nextURL;
}

Затем, когда вы хотите изменить значение, вы просто изменяете значение этой переменной

// change the value
nextURL = "multiSet.html";

Вы также можете избежать использования глобальной переменной и использовать атрибут самой кнопки, но я поставил вышеприведенный пример как можно более простым.


<input id="nextButton" type="button" value="Next" onClick="window.location='SampleInfo.html'"/>

Добавьте идентификатор кнопки, а затем вы можете изменить обработчик кликов на другую функцию, например:

document.getElementById("nextButton").onclick = function() {
    window.location = 'multiSet.html';
};

Лучший способ сделать это — поместить пункт назначения для кнопки в качестве атрибута кнопки:

<input id="nextButton" data-location="SampleInfo.html" type="button" 
    value="Next" onClick="window.location=this.getAttribute('data-location');"/>

И затем, чтобы изменить пункт назначения для кнопки, вы просто изменяете значение атрибута на кнопке:

document.getElementById("nextButton").setAttribute("data-location", "multiSet.html");

Оцените статью
TechArks.Ru
Добавить комментарий