Question

我搜索过并找到与我类似的问题的答案，但我对JS没有经验，所以我不知道如何将答案应用到我的情况中。我有一个表单，用户输入一个URL提交给我。该URL可以来自任何网站，但是当用户输入Youtube短（共享）URL时，我需要在提交表单之前将该字段更改为常规Youtube URL。以下是我在类似问题中找到的两个答案：

Change form values after submit button pressed

Automatically change a value in a form field

基本上，当用户以这种格式输入URL时： https://youtu.be/VIDEO_ID_HERE

我需要在提交表单之前将字段中的文本更改为此格式： https://www.youtube.com/watch?v=VIDEO_ID_HERE

感谢您的帮助。

我对此弹出窗体的代码是：

<!-- POPUP 8 // START -->
<div id="popup-8" class="container container-size-11 container-radius-1 container-padding-5 container-shadow-1 bg-color-1 position-relative responsive-popup">
<h3 class="title-2 title-border-bottom-1 color-1"><?php echo $this->_('Add an image from a website') ?></h3>
<form action="<?php echo $this->url(array('controller' => 'find-images'),'urlpin_c');?>" method="post" class="event-find-images">
    <div class="form-1 form-margin-20 margin-top-20">
        <div class="form-row">
            <div class="notification notification-color-3"><?php echo $this->_('Check out our bookmarklet to make pinning from a website even easier!') ?></div>
        </div>
        <div class="form-row form-row-group-top form-row-group-top-padding-3 margin-top-20">
            <span class="field-button field-button-position-1 fill">
                <input name="url" type="text" placeholder="http://" class="field field-color-1 field-size-1 event-url-text">
                <button type="submit" class="button button-type-1 button-color-2 button-size-3 event-loader"><?php echo $this->_('Find') ?></button>
            </span>
        </div>
        <div class="form-row event-back-ios-8">
            <div class="table-grid">
                <div class="table-grid-cell event-upload-pin">
                    <a href="javascript:history.back()" class="button button-type-1 button-color-3 button-size-2">Back</a>
                </div>
            </div>
        </div>
        <div class="hide notification notification-color-1 margin-top-20 event-url-status"></div>

        <div class="form-row form-row-group-top form-row-group-top-padding-3 margin-top-20">
            <ul class="list-30 clearfix hide event-found-images"></ul>
        </div>
    </div>
</form>
</div>
<!-- POPUP 8 // END -->

<script type="text/javascript">
$('.event-find-images').on('submit',function(){
    App.addLoader('.event-loader');
    $('.event-url-status').addClass('hide');
    App._ajax({
        url: '<?php echo $this->url(array('controller' => 'find-images'),'urlpin_c');?>',
        onSuccess: function(json) {
            App.removeLoader('.event-loader');
            if(json.location) {
                window.location = json.location;
            } else if(json.errors) {
                var errors = [];
                for(i in json.errors)
                    errors.push(json.errors[i]);

                $('.find-images').remove();
                $('.event-url-status').html(errors.join("<br />")).removeClass("hide");
            } else {
                //console.log(json);
            }
        },
        type: 'POST',
        data: $(this).serialize()
    });
    return false;
});
</script>

Answer 1

给你一些文本框，如

<input id="yturl" name="url" type="text" placeholder="http://" class="field field-color-1 field-size-1 event-url-text">

在执行submit之前在App._ajax回调中添加此内容。另请参阅示例

var shorturl = $("#yturl").val();         // https://youtu.be/c8aFcHFu8QM
var urlarray = shorturl .split("/");      //["https:", "", "youtu.be", "c8aFcHFu8QM"]
var videoID     = urlarray[3];            // c8aFcHFu8QM

$var = "https://www.youtube.com/watch?v="+videoID;
$("#yturl").val(fullurl );                // assign full url to text box

现在在ajax data: $(this).serialize()中，jquery会看到并使用此更新值

Answer 2

您可以在用户提交时检查并更改输入值：

// When the user submits,
$('.event-find-images').on('submit',function(){
    // Change value of the url.
    $(".event-url-text").val(function(index, value) {
        // Find for pattern and then replace.
        return value.replace(
            /https:\/\/youtu\.be\/(.+)/,
            "https://www.youtube.com/watch?v=$1"
        );
    });
    // the rest of your code...

希望这有帮助！

在提交

2 个答案: