javascript - 带有基于选择选项的条件表单操作的预订表单

Question

我有下面的预订表格以及屏幕截图。

由于酒店有 2 个酒店和 2 个独立的预订引擎，我希望它是“form action=link-1.html”或“form action=link-2.html”，具体取决于下拉列表中的选择。

并且应将入住、晚数和住宿等数据发送至预订引擎。

进一步澄清:

如果Propery=Propery1则形成action=link-1.html；和
如果Propery=Propery2则形成action=link-2.html；

请问谁能帮我解决这个问题吗？

谢谢!

<form action="link-1.html" method="post" onSubmit="document.getElementById('CheckInDateParam').value=document.getElementById('textbox1').value;">
    <div class="row" style="margin-left:15px; margin-right:15px; margin-top:12px;">
        <div class="large-4 medium-4 columns">
            <label for="right-label" class="left">Check-In</label>
        </div>
        <div class="large-8 medium-8 columns">
            <input type="text" class="textField" id="textbox1" name="textbox1" placeholder="YYYY-MM-DD" />
        </div>
    </div>
    <div class="row" style="margin-left:15px; margin-right:15px;">
        <div class="large-4 medium-4 columns">
            <label for="right-label" class="left">Nights</label>
        </div>
        <div class="large-8 medium-8 columns">
            <select name="selStay" size="1" class="jumpMenuShort" id="selStay" onChange="document.getElementById('NumNightsparam').value=this.value; ">
                <option value="1" selected="selected">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
            </select>
        </div>
    </div>
    <div class="row" style="margin-left:15px; margin-right:15px;">
        <div class="large-4 medium-4 columns">
            <label for="right-label" class="left">Property</label>
        </div>
        <div class="large-8 medium-8 columns">
            <select name="selProperty" size="1" class="jumpMenuShort" id="property" onChange="document.getElementById('Propertyparam').value=this.value; ">
                <option value="" disabled selected>SELECT</option>
                <option value="2">SARJAPURA</option>
                <option value="2">MARATHAHALLI</option>
            </select>
        </div>
    </div>
    <div class="row" style="margin-left:15px; margin-right:15px;">
        <div class="large-4 medium-4 columns">
            <label for="right-label" class="left"></label>
        </div>
        <div class="large-8 medium-8 columns">
            <div class="booking-btn">
                <input type="hidden" name="CheckInDateParam" id="CheckInDateParam" />
                <input type="hidden" name="NumNightsparam" id="NumNightsparam" value="1" />
                <input type="image" src="images/bookNow.png" style="outline:none;" alt="Book Now" name="book now" width="91" height="25" border="0">
            </div>
        </div>
    </div>
</form>

Answer 1

为 input 添加事件监听器或change目标<select> ，并更改表单的 action属性(property)应该做的工作:

var form = document.getElementById('tform');
var select = document.getElementById('test');

select.addEventListener('input', function() {
  var value = this.value;
  tform.action = value === '1' ? 'target1' : 'target2';
});

<form id="tform" action="target1">
   <select id="test">
     <option value="1" selected>1</option>
     <option value="2">2</option>
   </select>
  <input type="submit" value="submit" />
</form>