0

I have searched and found answers for questions similar to mine, but I am not experienced with JS, so I am not sure how to apply the answers to my situation. I have a form where users enter a URL to submit to me. The URL can be from any site but when users enter a Youtube short (share) URL, I need the field to be changed to a regular Youtube URL before the form is submitted. Here are the two answers I have found to similar questions:

Change form values after submit button pressed

Automatically change a value in a form field

Basically, when a user enters URLS in this format: https://youtu.be/VIDEO_ID_HERE

I need the text in the field changed to this format before the form is submitted: https://www.youtube.com/watch?v=VIDEO_ID_HERE

Thank you for any help.

The code I have for this popup form is:

<!-- 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>
Community
  • 1
  • 1
Moni
  • 13
  • 2

2 Answers2

0

Give you text box some id like

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

Add this in submit callback before you do App._ajax.Also see an example besides

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

Now in ajax data: $(this).serialize() jquery would see and use this updated value

Vinay
  • 7,442
  • 6
  • 25
  • 48
0

You can check and change the input value when the user submit:

// 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...

Hope this helps!

srifqi
  • 71
  • 1
  • 6