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!

Do you care if you use jquery or are you trying to just use straight javascript? — Pitchinnate
– Pitchinnate, Commented Aug 16, 2013 at 19:40

Amith · Accepted Answer · 2013-08-16 20:18:44Z

2

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/

edited Aug 16, 2013 at 20:18

answered Aug 16, 2013 at 19:45

Amith

1,4321 gold badge10 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Scott Crider Over a year ago

I checked out the JSFiddle link and it makes sense with the alert but how do I get value into the "page_confirm" hidden input? Essentially, I need the html to end up like... <input type="hidden" name="page_confirm" value="mywebsite.com/index.php?rm_accounts=123456">

Scott Crider Over a year ago

my jQuery skills are minimal so any hand holding is appreciated.

Amith Over a year ago

the value is already assigned to that hidden input..thats why it is showing up in alert..if the answer found useful please vote up and accept as answer to appreciate help

Scott Crider Over a year ago

it looks like you are identifying the form elements by type. ex. 'input[type=text]' and 'input[type=hidden]'. Is there a way to identify them by name? I have several text inputs and hidden fields on the page.

Amith Over a year ago

see updated js fiddle to know how to select inputs and hidden fields by name jsfiddle.net/mkamithkumar/qNdny/2

Matthew R. · Accepted Answer · 2013-08-16 19:43:39Z

0

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);
});

answered Aug 16, 2013 at 19:43

Matthew R.

4,3501 gold badge27 silver badges39 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related