Automatisch Text in benutzergefülltem Formular vor dem Einreichen ändern

Question

Ich habe gesucht und gefunden Antworten für Fragen ähnlich wie meine, aber ich habe keine Erfahrung mit JS, so bin ich mir nicht sicher, wie die Antworten auf meine Situation anwenden. Ich habe ein Formular, in dem Benutzer eine URL eingeben, um sie mir zu übermitteln. Die URL kann von jeder Website stammen, aber wenn Nutzer eine Youtube-Kurz-URL (share) eingeben, muss das Feld vor der Übermittlung des Formulars in eine normale Youtube-URL geändert werden. Hier sind die beiden Antworten, die ich auf ähnliche Fragen gefunden haben:

Change form values after submit button pressed

Automatically change a value in a form field

---

Grundsätzlich, wenn ein Benutzer URLS in diesem Format geht: https://youtu.be/VIDEO_ID_HERE

ich den Text brauchen im Feld wurde in dieses Format geändert, bevor das Formular gesendet wird: https://www.youtube.com/watch?v=VIDEO_ID_HERE

Vielen Dank für jede Hilfe.

---

Der Code, den ich für dieses Popup-Formular ist:

<!-- 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

Sie können den Eingabewert überprüfen und ändern, wenn der Benutzer einreichen:

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

---

hoffte, das hilft!

Answer 2

einige id Geben Sie Textfeld wie

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

dies in submit Rückruf hinzufügen, bevor Sie App._ajax tun .Auch zu sehen ein Beispiel neben

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 

Jetzt in Ajax data: $(this).serialize() jquery sehen würde, und verwenden Sie diese aktualisierte Wert