提出する前にユーザー入力フォームのテキストを自動的に変更

Question

私は似たような質問の回答を検索して見つけましたが、私はJSに慣れていないので、自分の状況に回答を適用する方法がわかりません。私はユーザーが私に提出するURLを入力するフォームを持っています。 URLはどのサイトからでも入力できますが、ユーザーがYoutubeショート（共有）URLを入力すると、フォームを送信する前にフィールドを通常のYoutube URLに変更する必要があります。ここで私は同様の質問に発見した2つの答えは以下のとおりです。ユーザーはこの形式でURLを入力したとき

Change form values after submit button pressed

Automatically change a value in a form field

---

基本的には、： 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

を参照して使用します。

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

---

は、この情報がお役に立てば幸い！

Answer 2

は、あなたが見る.Also App._ajaxを行う前に、submitコールバックでこれを追加しますテキストボックスに

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

のようないくつかのIDを与えますその他の例

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 

は今アヤックスにdata: $(this).serialize() jqueryのは、ユーザーが送信するときは、入力値をチェックし、変更することができ、この更新された値