根据在Textfield中输入的值更改Img Src [英] Changing Img Src based on value entered in a Textfield

问题描述

我需要帮助创建一个表单与以下

1. TEXTFIELD （将用于输入7digit模型数字）



2. 图像占位符（将根据网址更改图像占位符的src，例如，它将成为src =http://yourwebsite.com/product/ TEXTFIELD .jpg）




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

＃3仍然无法使用！

b


$ b

我有一些代码可以帮助您显现我想要的东西
如果您需要澄清或者我有点混乱，请与我联系。

 < form name =form1method =postaction => 
< p> 7位数产品＃
< input type =textname =mode lid =model> 
< / p> 
< p> 
< input name =starttype =hiddenid =startvalue =http://www.mywebsite.com/Products/> 
< / p> 
< p> 
< input name =endtype =hiddenid =endvalue =。jpg> 
< / p> 
< p>< img name =proudctimagesrc ==＃start＃model＃endwidth =32height =32alt =>< / 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 AM 5/29/12 〜

---

1. 如果您点击输入
，文本字段中输入的值将被删除

2. 我需要一种方法来使用相应的URL来获取存储在H1标签中的产品描述（URL是在文本字段中输入的内容的型号，但使用与用于抓取图像的图像，请参见下文... http://mywebsite.com/ProductDetails.aspx？ productid = TEXTFIELD ）
   ***我应该注意，用于获取H1数据的URL将是跨域&不一定在某个域上。我读到jquery可能不会在跨域请求

解决方案

您可以使用Jquery这很容易。

从 http：// www获取Jquery的副本.jquery.com 或使用CDN版本将其粘贴到您的头部：

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

这是一个简化版本：

如果您的网址的开始和结束部分不会改变，您可以简化您的表单：

 < form> 
< label> Model Num< / label> 
< input type =textname =modelid =model/> 
< input type =buttonvalue =Update Imageid =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一起使用（请注意您的代码中的拼写错误）：

  ;脚本> 
 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是一种设计模式，并且有与之相关的最佳做法。为了h1元素而抓住整个HTML页面不是非常有效。考虑修改您的方法，如果您引用的网站不是您自己的，请务必检查任何版权法律/条款和条件。

I need help creating a form with the following

1. TEXTFIELD(will be used to enter 7digit model numbers)

2. An image placeholder (will change the image placeholder's src based on a url for example it will become src="http://yourwebsite.com/product/TEXTFIELD.jpg)

3. I need to somehow get the the H1 tag values from within the product's url

#3 IS STILL UNSOLVED !

I'm REALLY desperate for any type of help. I've googled the entire day REALLY need assistance. Thank You !

I have some code below that helps visualize what I'm kinda looking for. Please contact me if you need clarification or if I'm a bit confusing.

<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:00AM 5/29/12~

---

1. The Values entered in the textfield gets deleted if you hit enter
2. I need a way to grab a product's description stored in a H1 tag using the respective URL (The URL is the model number of what is entered in the textfield but uses a slightly different url structure that is different than the one used to grab images , see below ... http://mywebsite.com/ProductDetails.aspx?productid=TEXTFIELD) ***I Should make note that the URL used to get the H1 data will be a "cross domain" & not necessarily on the some domain. I read that jquery may not make requests on cross domains

解决方案

You could use Jquery to do this easily.

Grab a copy of Jquery from http://www.jquery.com or use the CDN version by pasting this into your head section:

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

Here's a simplified version:

If the start and end parts of your URL are not going to change you could simplify your form:

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

​ Then With the following Jquery code, you can detect a click on the update button, grab the code from the text box and change the image src attribute to

http://mysite.com/products/typed_code_here

Just paste the jquery code (and the script tags) into your head section

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

If you want to do this without Jquery and if your html has to remain as above, you could use the following along with your original html (watch out for spelling mistakes in your code):

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

The onkeyup event could be changed to blur, change etc depending on how you want to update the image. I'd suggest a button such that the user can update the image when they believe the code is valid.

Update​

The following github project has made progress on the front of cross domain html requests with jQuery. https://github.com/padolsey/jQuery-Plugins/tree/master/cross-domain-ajax/

Basically you'd just need to grab the product page via ajax (jQuery.ajax()) and then in the ajax callback you'd have to scan the returned HTML for the h1 element. Ultimately cross domain ajax is a design pattern and there are best practices associated with it. Grabbing the whole HTML page for the sake of an h1 element is not very effective. Consider revising your approach and be sure to check any copyright laws/terms and conditions if the site you're referencing is not your own.

这篇关于根据在Textfield中输入的值更改Img Src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！