Question

我有一个简单的HTML表单，发布到这样的URL ...

<form>
    <select name="option_dropdown">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
        <option value="option4">Option 4</option>
    </select>
    <input class="textinput1" type="text"></input>
    <input class="textinput2" type="text"></input>
    <input class="textinput2" type="text"></input>
</form>

这会在提交时生成类似 www.example.com/?option_dropdown=option1 的网址，但不包含文字输入框，因为它们没有附加名称。

我想要做的是为文本输入添加一些逻辑，根据其内容选择一个，然后在提交表单时包含该参数。

javascript是实现此目的的方法吗？

Answer 1

您要求javascript way，以便您可以尝试。

为了识别3个文本框，我已经给了他们id。

<form>
    <select name="option_dropdown">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
        <option value="option4">Option 4</option>
    </select>
    <input class="textinput1"  id='txt1' type="text"></input>
    <input class="textinput2"  id='txt2' type="text"></input>
    <input class="textinput2"  id='txt3' type="text"></input>
    <input type='submit' id='submit'>
</form>

提交此表单脚本将根据您的逻辑将名称属性添加到3个文本框中的任何一个。所以只提交文本框内容。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
 $(document).ready(function(){

     /* Any logic which select the textbox to be submitted */
     id='txt1'; // it can be txt2 or txt3

     $("#submit").click(function(){
         $("#"+id).attr("name","text");  
     });

 });
 </script>

Answer 2

1.在与html相同的目录中创建一个PHP文件 2.编辑您的表单指向该php文件并命名您的文本字段，以便您可以引用它们。

<form method="post" action="formTester.php">
  <select name="option_dropdown">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
  </select>
  <input name="textinput1" class="textinput1" type="text"></input>
  <input name="textinput2" class="textinput2" type="text"></input>
  <input name="textinput3" class="textinput2" type="text"></input>
</form>

3。在您的文件formTester.php

中

<?php 
  // define variables and and get data from the text fields

  $text1= $_POST["textinput1"]; 

  $text2= $_POST["textinput2"]; 

  $text3= $_POST["textinput3"];

 // Now you can manipulate the data however you want ..add it to database, trim, validate etc 

?>

希望它有所帮助，最好

Answer 3

<form>
    <select name="option_dropdown">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
        <option value="option4">Option 4</option>
    </select>
    <input type="text" class="textinput1" name="textinput[]" value="input1" />
    <input type="text" class="textinput2" name="textinput[]" value="input2" />
    <input type="text" class="textinput3" name="textinput[]" value="input3" />
</form>

Answer 4

一种选择是将值堆叠在一个数组中并在后端解析它。这消除了对JavaScript的需求。

<form>
    <select name="option_dropdown">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
        <option value="option4">Option 4</option>
    </select>
    <input type="text" class="textinput1" name="textinput[]"></input>
    <input type="text" class="textinput2" name="textinput[]"></input>
    <input type="text" class="textinput3" name="textinput[]"></input>
</form>

在HTML post表单上执行逻辑

4 个答案: