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>添加eventListener，并更改表单的action属性应该完成的工作：

＆＃13;

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

＆＃13;

<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>

＆＃13;

具有基于选择选项的条件表单操作的预订表单

1 个答案: