javascript - html/javascript : Prevent <input> value from clearing on form submit

标签 javascript jquery html forms coffeescript

我有一个仅包含一个 <input> 的表单元素:

    <form>
            <input
                    type="text"
                    name="webpage-activity-url"
                    placeholder="URL"
                    value="[value inserted by templating engine]"
            />
            <button type="submit" class="button button-secondary" data-action="urlSubmit">
                    Submit
            </button>
    </form>

我还有一些 javascript(以 CoffeeScript 的形式),在提交表单时调用:

    onURLSubmit: (e)->
            e.preventDefault()
            # console.log('urlSubmit')
            url =  @$el.find('input[name="webpage-activity-url"]').val()
            if _.trim(url) == ''
                    return false
            if url.indexOf('//') == -1
                    url = 'http://' + url
            unless @$el.find('iframe').length > 0
                    iframe = $('<iframe />').insertAfter(@$el.find('.instructor-ui-box').first())
            @setIframeSrc url
            @$el.find('input[name="webpage-activity-url"]').val('')

这里是编译为 JavaScript 的相同函数,以防您不熟悉 CoffeeScript:

WebpageActivityLayout.prototype.onURLSubmit = function(e) {
  var iframe, url;
  e.preventDefault();
  url = this.$el.find('input[name="webpage-activity-url"]').val();
  if (_.trim(url) === '') {
    return false;
  }
  if (url.indexOf('//') === -1) {
    url = 'http://' + url;
  }
  if (!(this.$el.find('iframe').length > 0)) {
    iframe = $('<iframe />').insertAfter(this.$el.find('.instructor-ui-box').first());
  }
  this.setIframeSrc(url);
  return this.$el.find('input[name="webpage-activity-url"]').val('');
};

这是我的问题:提交表单时,用户输入的值 <input>表单的元素被清除并返回到 placeholder 指定的值输入元素的属性。我想阻止这种行为。我尝试单步执行 javascript 函数,我注意到当 onURLSubmit 时输入元素的值被重置。函数返回。所以我真的不知道如何通过javascript来防止这种情况。

最佳答案

这一行...

@$el.find('input[name="webpage-activity-url"]').val('')

...正在将值设置为“”

关于javascript - html/javascript : Prevent &lt;input&gt; value from clearing on form submit,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19432431/

相关文章:

javascript - 特定的 javascript 代码仅适用于警报语句

javascript - 我可以通过测试 localStorage 来推断 sessionStorage 的可用性吗?

javascript - 无法从 Javascript 发布到 AWS S3。 XML 格式错误错误

javascript - 当元素/div 在屏幕上不可见时更改 css

javascript - 如何获取警告框内的文本?

javascript - 我应该用默认值初始化 JavaScript 中的变量吗?

php - 使用 MySQL、jQuery 和 Ajax 添加或删除表行

javascript - "Uncaught Error: View type "时间线日"is not valid"完整日历版本3.9.0

html - iPad 设备不播放背景视频

javascript - tinyMCE SetContent() 导致撤消步骤