更改基于价值IMG SRC在文本字段中输入(Changing Img Src based on va

2019-10-16 18:25发布

我需要帮助下创建表单

  1. 文本框 (将用于输入7位型号)
  2. 图像占位符(将基于URL例如,它会成为SRC改变图像占位符的src =“http://yourwebsite.com/product/ 文本框 .JPG)

  3. 我需要从产品的网址内以某种方式获取的H1标签值

#3仍然没有解决!

我对任何类型的帮助真的绝望了 。 我GOOGLE了整整一天真的需要帮助。 谢谢 !

下面我有一些代码可以帮助形象化什么我还挺期待的。 如果你需要澄清,否则我有点困惑,请与我联系。

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

〜EDITED 9:00 AM29分之5/ 12〜


  1. 如果你打在输入文本字段中输入的值被删除
  2. 我需要一种方法来抓住一个产品的描述存储在使用相应的URL H1标签(网址是什么在文本字段中输入型号,但使用了稍微不同的URL结构比用来抓取图像的不同,见下文...... http://mywebsite.com/ProductDetails.aspx?productid= 文本框 )***我应该注意该URL用于获得H1的数据将是一个“跨域”&不一定在一些域。 我读的jQuery可能不会对跨域请求

Answer 1:

你可以使用jQuery来轻松地做到这一点。

从抓住的jQuery副本http://www.jquery.com或粘贴到你的头一节使用CDN版本:

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

下面是一个简化的版本:

如果你的URL的开始和结束部分不会改变,你可以简化你的表格:

​<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代码(和脚本标签)粘贴到你的头节

<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回调你必须扫描h1元素返回的HTML。 最终跨域AJAX是一种设计模式,并有与之相关的最佳实践。 抓住整个HTML页面的h1元素的缘故不是很有效。 考虑修改你的方法,一定要检查任何版权法/条款及条件,如果你引用该网站是不是你自己的。



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() );
           });
        }
    });


文章来源: Changing Img Src based on value entered in a Textfield