显示选定的表单值 - 在提交之前？答案

【问题标题】：Show selected form values - before submit?显示选定的表单值 - 在提交之前？
【发布时间】：2013-08-13 16:59:49
【问题描述】：

我希望使用onClick="return confirm('are you sure ?')" 让用户确认他们提交的内容。

基本形式是：

<form>
<Select name='val[]' class='select'><option></option><option value='a'>a</option><option value='b'>b</option><option value='c'>c</option><option value='d'>d</option></select>
<Select name='opt'><option>AAA</option><option>BBB</option><option>CCC</option></select>
<input type='submit' name='submit' value='submit' onClick="return confirm('are you sure ?')">
</form>

当他们点击提交时，我如何更新退货确认以显示他们从下拉列表中选择的值？

编辑：

我应该提到这个页面正在使用来自http://harvesthq.github.io/chosen/ 的 Jquery Chosen 脚本

第一个选项是多选，并使用选择使它看起来更好。

dishwasherWithProgrammingSkill 的建议有效，但未显示选择的多值。

无论如何要这样做？

更新： 使用：var opt3=$('#opt1').val();

返回一个逗号分隔的列表。如何删除逗号？

谢谢

【问题讨论】：

我在这里没有看到任何 php 或任何 jquery，请重新标记。（尝试 javascript）
如果您将代码从标签中取出并放入脚本中，这将是最简单的。

标签： javascript forms submit

【解决方案1】：

我想这就是你要找的。p>

<form>
    <select name='val' class='select' id='opt1'>
        <option></option>
        <option value='a'>a</option>
        <option value='b'>b</option>
    </select>
    <select name='opt' id='opt2'>
        <option value='AAA'>AAA</option>
        <option value='BBB'>BBB</option>
    </select>
    <input type='submit' name='submit' value='submit' onClick="return function1();">
</form>

<script type='text/javascript'>
    function function1(){
        var opt1=document.getElementById("opt1").value;
        var opt2=document.getElementById("opt2").value;
        var response=confirm("Are you sure? option1="+opt1+" option2="+opt2);
        return response;
     }
</script>

更新

既然您已经通过使用var opt3=$('#opt1').val(); 获得了值，剩下的就很简单了，请使用javascript 中的split() 函数。它类似于php中的explode()函数。这是示例。

var opt3=$('#opt1').val();
var valArray=opt3.split(",");  //The parameter determines where you want to split.
for (var i = 0; i < valArray.length; i++) {
    alert(valArray[i]);
}

【讨论】：

啊。轻微问题。我的第一个选择可以有多个值，这只显示第一个。我正在使用harvesthq.github.io/chosen 来支持多个值。知道如何使它工作吗？
Select 语句一次只能传递一个值。您正在使用的插件在文本框中提供了一个下拉菜单，并在您选择一个选项后将其填满。您需要从该文本框而不是 select 语句中传递值。

【解决方案2】：

您必须为它编写一个函数。使用 jquery 你可以使用 $(form).submit(function(){});在提交时提取您的值，显示确认对话框并设置内容。

告诉我你是怎么做的！

http://api.jquery.com/submit/

【讨论】：

【解决方案3】：

最好将 javascript 与表单分开，并添加一个事件侦听器。但是，如果您仍想使用onclick，您可以在每个表单元素中添加id，并使用getElementById() 获取值-

<form>
    <select name='val[]' id='val' class='select'><option></option><option value='a'>a</option><option value='b'>b</option><option value='c'>c</option><option value='d'>d</option></select>
    <select name='opt' id='opt'><option>AAA</option><option>BBB</option><option>CCC</option></select>
    <input type='submit' name='submit' value='submit' onClick="return confirm('are you sure? val='+getElementById('val').value +' opt='+getElementById('opt').value)" />
</form>

查看这个 jsFiddle 示例 - http://jsfiddle.net/rpcBS/

【讨论】：

【解决方案4】：

你需要监听 onSubmit() 而不是 onClick()

<form onSubmit="return confirm('are you sure?);">
    <Select name='val[]' class='select'><option></option><option value='a'>a</option><option value='b'>b</option><option value='c'>c</option><option value='d'>d</option></select>
    <Select name='opt'><option>AAA</option><option>BBB</option><option>CCC</option></select>
    <input type='submit' name='submit' value='submit'>
</form>

onClick 不会阻止表单提交。

【讨论】：

onclick 适用于 input type="submit"。 <input type="submit" onclick="alert ('see it works')">
是的，警报会起作用，但不会阻止表单提交。
检查我刚刚在下面发布的代码：D。您需要有一个布尔返回类型才能使其工作。