使用Jquery/Javascript将imgsrc值发送到隐藏字段

我有一个用户表单，人们可以在其中更新他们的详细信息，并将其保存到数据库中

我已经为人们添加了上传头像、裁剪图像并上传到服务器（使用裁剪器）的功能

当用户完成图像裁剪后，脚本将更新HTML并用新的头像替换默认头像，如下所示：

<div class="avatar-view" title="" data-original-title="Change the avatar">
  <img src="../../scripts/cropper/img/20150728143117.png" alt="Avatar">
</div>

头像下面是用户表单，包含其余的详细信息和保存/提交按钮。我已经为头像添加了一个隐藏字段，但是我需要将新上传的图像的值发送到这个隐藏字段。我已经寻找了各种javascript/jquery来实现这一点，但到目前为止，我似乎还不能让它正常工作

<form id="reg-form" name="r_form" method="post" action="/editor/go/user" enctype="multipart/form-data">
            <div class="form-group">
                <label for="avatar">avatar</label>
                <input type="hidden" name="avatar" value="123">
            </div>
            <div class="form-group">
                <label for="first_name"><i class="fa fa-star icon-red"></i> First name</label>
                <input id="first_name" name="first_name" class="form-control" value="John">
            </div>
            <div class="form-group">
                <label for="last_name"><i class="fa fa-star icon-red"></i> Last name</label>
                <input id="last_name" name="last_name" class="form-control" value="Smith">
            </div>

        <button type="submit" class="btn btn-primary" name="form_submit" tabindex="15">Save</button>
        <input type="hidden" name="user_id" value="41">
</form>

阿凡达
名字
姓
拯救

您的

img

标签需要有一个id。然后您只需使用更改

src

。然后可以将Javascript函数绑定到

submit

按钮的

onclick

属性

<img id="change" src = "....">
...
<button type="submit" onclick="changeImage()" class="btn btn-primary" name="form_submit" tabindex="15">Save</button>

<script>
function changeImage(){
    src = document.getElementById("change").src ;
    document.getElementsByName("name")[0].value - src;
}
</script>

...
拯救
函数changeImage（）{
src=document.getElementById（“change”）.src；
document.getElementsByName（“名称”）[0].value-src；
}

首先向隐藏的输入值添加一个id

<input id="avatar-val" type="hidden" name="avatar" value="123">

---

使用查询获取指向当前图像的链接，并将其设置为隐藏字段

<div class="form-group">
     <label for="avatar">avatar</label>
     <input type="hidden" name="avatar" value="123">
</div>
<script>
    var src = $('.avatar-view').find('img').attr('src');
    $('input[name="avatar"]').attr('src', src)
</script>

阿凡达
var src=$（'.avatar view'）.find（'img'）.attr（'src'）；
$（'input[name=“avatar”]”）。attr（'src'，src）

无需任何修改即可使用

   var src=$('img[alt="Avatar"]').attr('src');
   $('input:hidden[name=avatar]').val(src);

---

我希望这对你有帮助。如果您遇到任何问题，请随时提问。

$（'input[name=“avatar”]'）。value（src）；谢谢我尝试将其添加到页面底部，但它使页面显示为空白，我的代码编辑器说有语法错误，不确定问题出在哪里，因为这对我来说是正确的。这是工作表。注意，我对文本进行了隐藏输入，只是为了看到它工作。您可以将其更改回隐藏状态，并使用inspect元素进行检查。您可以将按钮类型设置为

按钮

而不是

提交

，以便在不提交表单的情况下查看结果。@Rob88991不管怎样，控制台中的错误是什么？我看不到该小提琴上的jquery，还是我只是在装傻？对不起，对不起，现在正在工作！那里发生了一些奇怪的事情，但我把脚本移到了页脚的另一个地方。谢谢,谢谢,谢谢!！似乎不起作用，它告诉我还有语法错误。我需要在隐藏字段中将值更改为什么？2种方法。方式1（无需更改HTML）：将其添加到JS函数

document.getElementsByName（“用户id”）[0]。value=“…”。方法2：给隐藏值一个Id，并执行与我的代码示例相同的操作。@Rob88991我编辑了我的答案。我最初误解了这个问题。我将它添加到页面底部，如$（文档）.ready（函数（）{$（'#reg form'）.submit（函数（）{var newSrc=$（'#avatar1'）.attr（'src'）；$（'[name=avatar]'））.val（newSrc）；}）；但是它会使页面显示为空白，我的编辑器说有语法错误？
   var src=$('img[alt="Avatar"]').attr('src');
   $('input:hidden[name=avatar]').val(src);

$(document).ready(function(){

     $('#reg-form').submit(function() {
         var newSrc = $('#ID_of_your_img').attr('src');
         $('[name=avatar]').val(newSrc);
     });

});