Link button to input

Question

I am trying to link an input to a button. In the sense that the button will trigger the input, and the input will remain hidden.

Below is a solution I found:

<a href="javascript:void(0)" id="files" href=""> 
 <button id="uploadDevice" class="button button-block button-positive">
            <i class="icon ion-android-mail"></i> &nbsp; <text id="textBtn1">From Device </text>
</button></a>

Script:

<script>
  $("#files").click(function(){
        $(this).next().trigger('click');
    });

    </script>

Css

 <style>
  .uploadDevice{
     visibility : hidden;
  }

My issue is as follow: The button and the input MUST have different ID. The above solution works but both the button and the input id must be the same when I need them to differ.

you shouldn't reuse ids. you can do `$('#id1').click(function () { $('#id2').click() });` — Pedro Estrada, Mar 10 '15 at 21:17
maybe some usefull information here: [Stackoverflow](http://stackoverflow.com/questions/18406732/using-jquery-to-submit-form-from-link-outside-of-form) — Paul, Mar 10 '15 at 21:19
thanks I tried, $("#buttonFile").click(function(){ $("#files").next().trigger('click'); }); but it does not seem to respond — Jonathan Etienne, Mar 10 '15 at 21:21

cssyphus · Accepted Answer · 2015-03-10T21:34:35.170

0

Something like this?

HTML:

<input type="hidden" id="typeHidden" />
<input type="button" id="mybutt" value="Show Me" />

javascript/jQuery:

$('#mybutt').click(function(){
    $('#typeHidden').val('Secret text');
});

jsFiddle Demo

If you want to have multiple DIV/button combos, and you want the button to update the corresponding DIV, see

this revised jsFiddle

edited Mar 10 '15 at 21:34

answered Mar 10 '15 at 21:24

cssyphus

37,875
18
96
111

on a side note, lets say i want the function to only be executed once the button has been clicked twice. for example user press button it gets upload to output1, user clicks the button a second time, it gets outputed to output 2, etc – Jonathan Etienne Mar 10 '15 at 21:47
Please ask this as a new question (just copy / paste this question and make appropriate changes) and you will have several answers within moments. I'll keep an eye out for it. – cssyphus Mar 10 '15 at 21:56
It appears you are afk, Jonathan, and I don't want to keep you waiting if you return several hours from now, so [**here's your answer**](http://jsfiddle.net/n3r8conn/2/). If you put it up as a new question, I'll post the answer there also for credit and for future readers. *Please leave a comment below this one to alert me to look for the new question.* – cssyphus Mar 10 '15 at 22:10
thank you so much for your prompt response. I will defintly credit you once the opportunity comes up. One issue i have is that I am using input file isntead text and when trying to apply your update, i encountered a bit of issue http://jsfiddle.net/n3r8conn/8/ – Jonathan Etienne Mar 10 '15 at 22:33
I am not able to make a new post, and I did related to that question, you can go ahead and have your credits upon submission http://stackoverflow.com/questions/28975629/output-multiple-input-file-to-a-different-with-a-single-button – Jonathan Etienne Mar 10 '15 at 22:58
Thanks Jonathan. If you have further questions, please ask anytime. Best wishes for your project. – cssyphus Mar 10 '15 at 23:02

Link button to input

1 Answers1