获取提交类型以发布其值

Getting submit type to post its value

本文关键字：布其值 类型 提交 获取      更新时间：2023-09-26

我想让我的按钮的值随着表单帖子一起发送，目前我有:

  <form id="form1" name="form1" method="POST" action="getData">
       <h1>Quick Query</h1>
        <div class="floating-placeholder">
            <input id="origin" name="origin" type="text" placeholder="Number" value="5"/>
            <label for="origin"></label>
        </div>
        <div class="floating-placeholder">
            <input id="destination" name="destination" type="text" placeholder="Number" value="4"/>
            <label for="destination"></label>
        </div>
        <label>
            <input type="submit" name="submitDriving" id="submitDriving" value="driving"/>
            <input type="submit" name="submitTransit" id="submitTransit" value="transit" />
            <input type="submit" name="submitCycling" id="submitCycling" value="cycling" />
        </label>
    </form>

当前帖子有

{ origin: '5',
  destination: '4' }

我试图得到一个远离，如果submitDriving按钮被点击的POST是:

{ origin: '5',
  destination: '4',
  submitDriving: 'driving' }

我该怎么做?

用户会期望更像下面这样的东西，使用SELECT和单个按钮来提交表单。这是一种保持简单的方法。

<form id="form1" name="form1" method="POST" action="getData">
       <h1>Quick Query</h1>
        <div class="floating-placeholder">
            <input id="origin" name="origin" type="text" placeholder="Number" value="5"/>
            <label for="origin"></label>
        </div>
        <div class="floating-placeholder">
            <input id="destination" name="destination" type="text" placeholder="Number" value="4"/>
            <label for="destination"></label>
        </div>
        <div>
            <select name="transitType" id="transitType">
              <option>drive</option>
              <option>cycling</option>
              <option>transit</option>
            </select>
        </div>
        <label>
            <input type="submit" />
         </label>
    </form>

你可以用javascript完成你最初的问题，并听取表单的onsubmit事件。但它确实打破了用户期望看到的标准UI。

相关文章：