根據在Textfield中輸入的值更改Img Src

Question

我需要幫助創建一個包含以下內容的表單

1. TEXTFIELD （將用於輸入7位數模型號）

2. 圖像占位符（將根據網址更改圖像占位符的src，例如它將變為src =“http://yourwebsite.com/product/ TEXTFIELD .jpg）

3. 我需要以某種方式從產品的URL中獲取H1標簽值

＃3仍然沒有解決！

我真的很想要任何類型的幫助。 我用谷歌搜索了一整天真的需要幫助。 謝謝 ！

我在下面有一些代碼可以幫助想象我正在尋找什么。 如果您需要澄清或者我有點困惑，請與我聯系。

<form name="form1" method="post" action="">
       <p>7-digit product#
         <input type="text" name="model" id="model">
       </p>
       <p>
         <input name="start" type="hidden" id="start" value="http://www.mywebsite.com/Products/">
       </p>
       <p>
         <input name="end" type="hidden" id="end" value=".jpg">
       </p>
       <p><img name="proudctimage" src="=#start#model#end" width="32" height="32" alt=""></p>
     </form>

<script>
    var model_input = document.getElementById('model');
    var start = document.getElementById('start');
    var end = document.getElementById('end');
    var image = document.getElementsByTagName('img');

    model_input.onkeyup = function(e){
       image[0].src = start.value + model_input.value + end.value;
    }
</script>

---

〜編輯9:00 AM 5/29 / 12~

---

1. 如果按Enter鍵，則會刪除在文本字段中輸入的值
2. 我需要一種方法來使用相應的URL來獲取存儲在H1標簽中的產品描述（URL是在文本字段中輸入的內容的型號，但使用的頁面結構與用於抓取圖像的URL結構略有不同，見下文... http://mywebsite.com/ProductDetails.aspx?productid= TEXTFIELD ）***我應該注意，用於獲取H1數據的URL將是“跨域”而不一定是某些域。 我讀到jquery可能不會在跨域提出請求

Answer 1

您可以使用Jquery輕松完成此操作。

從http://www.jquery.com獲取 Jquery的副本或使用CDN版本將其粘貼到您的頭部：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

這是一個簡化版本：

如果您的網址的開頭和結尾部分不會改變，您可以簡化表單：

​<form>
    <label>Model Num</label>
    <input type="text" name="model" id="model" />
    <input type="button" value="Update Image" id="update" />
</form>
<img src="" />

然后使用以下Jquery代碼，您可以檢測到更新按鈕上的單擊，從文本框中獲取代碼並將圖像src屬性更改為

http://mysite.com/products/typed_code_here

只需將jquery代碼（和腳本標記）粘貼到您的head部分即可

<script>
    ​$(document).on('click','#update',function(){
        $('img').attr('src','http://mysite.com/product/'+$('#model').val()+'.jpg');
    });​​​​​​
</script>

如果您想在沒有Jquery的情況下執行此操作，並且如果您的html必須保持如上，則可以將以下內容與原始html一起使用（注意代碼中的拼寫錯誤）：

<script>
    var model_input = document.getElementById('model');
    var start = document.getElementById('start');
    var end = document.getElementById('end');
    var image = document.getElementsByTagName('img');

    model_input.onkeyup = function(e){
       image[0].src = start.value + model_input.value + end.value;
    }
</script>

onkeyup事件可能會更改為模糊，更改等，具體取決於您要如何更新圖像。 我建議使用一個按鈕，以便用戶在認為代碼有效時可以更新圖像。

更新

以下github項目使用jQuery在跨域html請求的前端取得了進展。 https://github.com/padolsey/jQuery-Plugins/tree/master/cross-domain-ajax/

基本上你只需要通過ajax（jQuery.ajax（））獲取產品頁面，然后在ajax回調中你必須掃描返回的HTML以獲取h1元素。 最終跨域ajax是一種設計模式，並且存在與之相關的最佳實踐。 為了h1元素而抓取整個HTML頁面並不是很有效。 考慮修改您的方法，如果您引用的網站不是您自己的網站，請務必查看任何版權法/條款和條件。

Answer 2

如果你使用jquery，你可以這樣做：

$(function () {  
    $('#model').change(function () {
        $('img[name="productimage"]').attr('src', $('#start').val() + $('#model').val() + $('#end').val());
    });
});

Answer 3

在你的HTML中采取一個隱藏的div 。 假設

<div id="loadSource"></div>

   $('#model').blur(function () {
        var modelVal = $.trim(this.value),
            startVal = $.trim($('#start').val()),
            endVal = $.trim($('#end').val());
        if( modelVal &&  startVal && endVal) {
           var imgUrl = startVal + modelVal + endVal,
               siteUrl = startVal + modelVal;
           $('img[name="productimage"]')
            .attr('src', );

           // process to get h1 tag

           $('#loadSource').load(''+ siteUrl +' h1', function() {
                  console.log( $('#loadSource h1').text() );
           });
        }
    });