Question

我是 javascript 的新手，我正在创建一个简单的脚本，它将显示在输入字段中输入的数据的附加链接，基本上它应该从input字段获取数据生成与输入字段中提交的数据的链接。

与下面的例子类似

输入：tony@mail.com ...＆gt;单击“发送”按钮后

...处理

输出链接：www.domain.com/route.php?email=tony@mail.com

我发现此代码与我的相似，但它不会像我一样寻找。

<p>Enter your email or User ID 
<input type="text" name="foo" id="foosite" value="" />
<a href="#"
   onclick="this.href = ('http://' + document.getElementById('foosite').value + 'www.domain.com/route.php?email=')"
   target="_blank">send</a>

是否可以在 javascript 中创建一个这样的脚本，它会在不重新加载页面的情况下生成输出？

Answer 1

你的getelement在错误的地方。如果你想这样做就应该是这样的。

<input type="text" name="foo" id="foosite1" value="" />
<a href="#" onclick="this.href = ('http://www.domain.com/route.php?email=' + document.getElementById('foosite1').value)" target="_blank">send</a>

<input type="text" name="foo" id="foosite2" value="" />
<a href="#" onclick="this.href = ('http://www.domain.com/route.php?email=' + document.getElementById('foosite2').value)" target="_blank">send</a>

http://jsfiddle.net/bowenac/J2Mc5/3/

Answer 2

您可以使用表单提交向html代码添加表单并将数据发送到服务器，在这种情况下，您可以在提交到自定义链接之前更改表单的操作。

<form name="form1" action="" onSubmit="onsubmit(this)">
    <p>
        Enter your email or User ID
        <input type="text" name="foo" id="foosite" value="" />
        <input type="submit" value="send" />
    </p>
 </form>


 <script>
   function onsubmit(form)
   {  
    //change the action of the form to your link.
     form.submit();
   }
  </script>

Answer 3

从HTML

中拆分JS逻辑

<强> HTML

<p>Enter your email or User ID 
    <input type="text" name="foo" id="foosite" value="" />
</p>
<a href="#" id='link' target="_blank">send</a>
<div id="url_value"></div>

<强> JS

var a = document.getElementById('link')
a.onclick = function(e){
    e.preventDefault();
    var value = document.getElementById('foosite').value;
    var route = "http://www.domain.com/route.php?email=" + value + ',  ';
    var data = "http://www.domain.com/data.php?email=" + value + ',  ';
    var form = "http://www.domain.com/form.php?email=" + value;

    document.getElementById('url_value').innerHTML = route + data + form
}

<强> DEMO

Javascript输出结果与输入数据

3 个答案: