我需要帮助下创建表单
- 文本框 (将用于输入7位型号)
图像占位符(将基于URL例如,它会成为SRC改变图像占位符的src =“http://yourwebsite.com/product/ 文本框 .JPG)
我需要从产品的网址内以某种方式获取的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〜
- 如果你打在输入文本字段中输入的值被删除
- 我需要一种方法来抓住一个产品的描述存储在使用相应的URL H1标签(网址是什么在文本字段中输入型号,但使用了稍微不同的URL结构比用来抓取图像的不同,见下文...... http://mywebsite.com/ProductDetails.aspx?productid= 文本框 )***我应该注意该URL用于获得H1的数据将是一个“跨域”&不一定在一些域。 我读的jQuery可能不会对跨域请求
你可以使用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元素的缘故不是很有效。 考虑修改你的方法,一定要检查任何版权法/条款及条件,如果你引用该网站是不是你自己的。
如果你使用jQuery,你可以这样做:
$(function () {
$('#model').change(function () {
$('img[name="productimage"]').attr('src', $('#start').val() + $('#model').val() + $('#end').val());
});
});
在你的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() );
});
}
});