2017-05-06 17 views
0

我知道這個問題已被問及一百萬次,但我似乎無法得到任何工作。當我點擊其中一個工作正常的鏈接時,我試圖讓輸入的值發生變化,但我也想自動提交表單,並且一旦點擊鏈接,就不用提交按鈕。目前它不工作,除非我點擊輸入字段。另外我無法將id添加到鏈接中。這是我迄今爲止所擁有的。提交表單上的輸入文字變化

var $Form = $('form'), $Container = $('#container'); 
 
$Container.hide(); 
 
$Form.on('click', function(p_oEvent){ 
 
    var sUrl, sMovie, oData; 
 
    p_oEvent.preventDefault(); 
 
sMovie = $Form.find('input').val(); 
 
    sUrl = 'https://www.omdbapi.com/?t=' + sMovie + '' 
 
    $.ajax(sUrl, { 
 
     complete: function(p_oXHR, p_sStatus){ 
 
      oData = $.parseJSON(p_oXHR.responseText); 
 
      console.log(oData); 
 
      $Container.find('.title').text(oData.Title); 
 
      $Container.find('.plot').text(oData.Plot); 
 
      $Container.find('.poster').html('<img src="' + oData.Poster + 
 

 
'"/>'); 
 
      $Container.find('.year').text(oData.Year); 
 
      $Container.show(); 
 
     } 
 
    });  
 
}); 
 

 
$(function() { 
 
    $('a').on('click', function() { 
 
     var text = $('#text'); 
 
     text.val($(this).text());  
 
    }); 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#">rocky</a><br> 
 
<a href="#">Back To The Future</a><br> 
 
<a href="#">Spaceballs</a><br> 
 

 
<form id="omdbform"> 
 
     <input type="text" name="movie" placeholder="movie title" id="text" onchange="this.form.submit();"> 
 
</form> 
 

 
<div id="container"> 
 
    <h3 class="title">Title</h3> 
 
    <span class="year">Year</span> 
 
    <span class="poster">Poster</span> 
 
    <p class="plot">Plot</p> 
 
</div>

任何幫助將不勝感激。

添加鏈接的例子 <a href="/family_photos/filename1.jpg">filename1.jpg</a> <a href="/family_photos/filename2.jpg">filename2.jpeg</a>

回答

2

更改您的鏈接功能如下:

$(function() { 
    $('a').on('click', function() { 
     var text = $('#text'); 
     var fileName =$(this).text(); 
     fileName = fileName.replace(/\.[^/.]+$/, ""); 
     text.val(fileName);  
     $Form.click(); 
    }); 
}); 
+0

謝謝你太棒了,太棒了! – Greg

+0

如果你不介意我問,我將如何刪除文件擴展名?由於一些鏈接有擴展名,我需要刪除它們。 – Greg

+0

給我一個例子。 –

0

試試下面的代碼

var $Form = $('form') 
$Container = $('#container'); 
$Container.hide(); 
$("body").on("submit", "form", function(p_oEvent){ 
    var sUrl, sMovie, oData; 
    p_oEvent.preventDefault(); sMovie = $Form.find('input').val(); 
    sUrl = 'https://www.omdbapi.com/?t=' + sMovie + '' 
    $.ajax(sUrl, { 
     complete: function(p_oXHR, p_sStatus){ 
      oData = $.parseJSON(p_oXHR.responseText); 
      console.log(oData); 
      $Container.find('.title').text(oData.Title); 
      $Container.find('.plot').text(oData.Plot); 
      $Container.find('.poster').html('<img src="' + oData.Poster + 

'"/>'); 
      $Container.find('.year').text(oData.Year); 
      $Container.show(); 
     } 
    });  }); 

    $('a').on('click', function (e) { 
     e.preventDefault(); 
     var text = $('#text'); 
     text.val($(this).text()); 
     $("form").submit(); 
    }); 

使用 「上」 之前閱讀http://api.jquery.com/on/