Pass One Input Value Into Input Type Hidden Value When User Submits

Question

I have a simple form as outlined in the code below. I would like to append the value submitted in rm_accounts text box to the hidden page_confirm input value at the end of the URL. Hopefully that makes sense.

Essentially, if the user enters '123456' in the rm_accounts textbox, I want value of page_confirm to be http://www.mywebsite.com/index.php?rm_accounts=123456

<form name="signup" method="post" action="https://go.reachmail.net/libraries/form_wizard/process_subscribe.asp" >

    <input type='text' name='rm_accounts' value='' />
    <input type="hidden" name="page_confirm" value="http://www.mywebsite.com/index.php?rm_accounts=">
    <input type="submit" name="Submit" value="Submit" >

</form>

All help is very much appreciated. Thanks!

Answer 1

Use Jquery focusout event to update hidden field value

When user enters 12345 and focus out of textbox or clicks submit(or anywhere) the below code get executed and update the value of hidden field.

$('input[type=text]').focusout(function(){
$('input[type=hidden]').val("http://www.mywebsite.com/index.php?rm_accounts="+$('input[type=text]').val());
    console.log($('input[type=hidden]').val());
});

or in submit button click

$('input[type=submit]').click(function(){
  $('input[type=hidden]').val("http://www.mywebsite.com/index.php?rm_accounts="+$('input[type=text]').val());
console.log($('input[type=hidden]').val());
});

Working JSFiddle link

http://jsfiddle.net/mkamithkumar/qNdny/1/

Answer 2

I would first suggest you give your HTML some IDs like so:

<form id="signup" method="post" action="https://go.reachmail.net/libraries/form_wizard/process_subscribe.asp" >
    <input type='text' name='rm_accounts' id='rm_accounts' value='' />
    <input type="hidden" name="page_confirm" id="page_confirm" value="http://www.mywebsite.com/index.php?rm_accounts=">
    <input type="submit" name="Submit" value="Submit" >
</form>

Then use some jQuery for your task:

$('#signup').submit(function(){
    var value = $('#rm_accounts').val();
    var page_confirm = 'http://www.mywebsite.com/index.php?rm_accounts='+value;

    $('#page_confirm').val(page_confirm);
});