проблема с полями выбора - вторые варианты, основанные на первом выборе

Question

Я только что опубликовал вопрос об открытии в новом окне, но если я использую window.location, он не работает ?? есть ли проблема с моим JavaScript?

    <script type="text/javascript">

function setOptions(chosen){

var selbox = document.formName.table;
selbox.options.length = 0;

if (chosen == " ") {
 selbox.options[selbox.options.length] = new Option('No diploma selected',' ');
 }
if (chosen == "1") {
 selbox.options[selbox.options.length] = new Option('first choice - option one','http://www.pitman-training.com');
 selbox.options[selbox.options.length] = new Option('first choice - option two','onetwo');
 }
if (chosen == "2") {
 selbox.options[selbox.options.length] = new Option('second choice - option one','twoone');
 selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo');
 selbox.options[selbox.options.length] = new Option('second choice - option three','twothree');
 selbox.options[selbox.options.length] = new Option('second choice - option four','twofour');
 }
if (chosen == "3") {
 selbox.options[selbox.options.length] = new Option('third choice - option one','threeone');
 selbox.options[selbox.options.length] = new Option('third choice - option two','threetwo');
 }
}

</script>

Это немного грязно, я знаю ...

<form name="formName" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">

<select name="optone" size="1" onchange="setOptions(document.formName.optone.options[document.formName.optone.selectedIndex].value);">
 <option value=" " selected="selected">Please select a diploma</option>
 <option value="1">First Choice</option>
 <option value="2">Second Choice</option>
 <option value="3">Third Choice</option>
</select>

<select name="table" size="1" >
 <option value=" " selected="selected">No diploma selected</option>
</select>

<input type="submit" onclick="ob=this.form.table;window.location(ob.options[ob.selectedIndex].value)"/>


</form>

если честно, я в любом случае не доволен этим. Мне нужен способ скрыть кнопку «Отправить», пока не будет выбрано второе выбранное поле ... но я не эксперт по java! Кто-нибудь может указать мне правильное направление?

Answer 1

У меня есть несколько предложений.

• Вы должны захватить событие onsubmit вашей формы, а не событие onclick вашей кнопки отправки. Формы можно отправлять, не используя кнопку (например, нажав клавишу ввода), поэтому ваше событие onclick пропустит это.
• Вы можете использовать функцию window.open(url), чтобы открыть новое окно.
• Вместо того, чтобы скрывать кнопку ввода (которая не будет мешать пользователям клавиатуры отправлять форму), в событии onsubmit убедитесь, что параметры выбраны, и return false;, если они не.
• Вы можете оптимизировать и ускорить свой код, не выполняя так много поисков по элементам.
• Используйте this внутри атрибута обработчика события, чтобы получить дескриптор элемента запуска, например <select name="optone" size="1" onchange="setOptions(this.options[this.selectedIndex].value);">

Пример:

document.formName.table.onsubmit = function ()
{
    if (this.table.selectedIndex == 0 && this.optone.selectedIndex == 0)
    {
        // This is just an example. Showing a div would be better than alert();
        alert("You haven't filled in the required elements");

        // Cancel submission by returning false
        return false;
    }
    ob=this.table;

    // Open a new window and go to URL:
    window.open(ob.options[ob.selectedIndex].value);

    // Go to URL in current window:
    // window.location = ob.options[ob.selectedIndex].value;
}
function setOptions(chosen){       
    var selbox  = document.formName.table;
    var options = selbox.options;
    var cOpt    = options.length = 0; 

    if (chosen == " ") { 
        options[cOpt++] = new Option('No diploma selected',' '); 
    } 
    else if (chosen == "1") { 
        options[cOpt++] = new Option('first choice - option one','http://www.pitman-training.com'); 
        options[cOpt++] = new Option('first choice - option two','onetwo'); 
    } 
    else if (chosen == "2") { 
        options[cOpt++] = new Option('second choice - option one','twoone'); 
        options[cOpt++] = new Option('second choice - option two','twotwo'); 
        options[cOpt++] = new Option('second choice - option three','twothree'); 
        options[cOpt++] = new Option('second choice - option four','twofour'); 
    } 
    else if (chosen == "3") { 
        options[cOpt++] = new Option('third choice - option one','threeone'); 
        options[cOpt++] = new Option('third choice - option two','threetwo'); 
    } 
}

Всегда используйте else if, где это применимо, и старайтесь сократить количество просмотров узлов DOM и их свойств (например, selbox.options.length). cOpt++ позволит нам использовать текущее значение cOpt, а затем увеличить его на 1, поэтому вам не нужно постоянно проверять длину selbox.options.

Answer 2

Я не могу сказать, говорите ли вы, хотите ли вы это в новом окне или нет, так что ...

Если вы хотите новое окно, тогда

window.open(ob.options[ob.selectedIndex].value)

Если вы хотите то же самое окно, тогда

window.location = ob.options[ob.selectedIndex].value