How do I pass a dynamically created form field to another page through an href query string or on Click method

12/16/2014

11/26/2014

I would do what you are asking via javascript. You can place asp code in your js code. But you can also use js and in this sample jquery

<script>
$('[name="RecFldNm1"]').click(function(){
   alert($this.val());
}

</script>

Greg Alexander

11/26/2014

I may be over simplifying this but couldn't you pass it in a get variable through and window.open call

<input type="hidden" name="<%=RecFldNm%>" value="<%=vPRecID%>">
<input type="button" name="<%=AddBtn%>"  value="Add" onClick='window.open("http://youdomain.com/page.asp?id=<%=vPRecID%>")'>

11/26/2014

jquery was not mentioned, so I'll give you a javascript solution like you asked:

if you're using window.open, you could do something like:

<input type="hidden" name="RecFldNm1" value="39471" >
<input type="button" name="AddBtn1"  value="Add" onclick="window.open( 'popup.asp?fld=' + document.frmName.RevFldNm1.value")

ASKER CERTIFIED SOLUTION

11/26/2014

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

11/26/2014

and for more info on window.open, where you can control resizing the window:

http://www.w3schools.com/jsref/met_win_open.asp

Rob

11/26/2014

I also agree with working on the same page via a modal, rather than opening a new window and having to pass all the information to it.

Here is a demo: http://jsbin.com/bafedi/1/edit?html,js,output - click the buttons and you'll see the title changes. You can work with the passed RecFldNm number. Only modification is to add the RecFldNm as a data attribute to the button.

		<input type="hidden" name="RecFldNm1" value="39471" />
<button type="button" class="btn btn-primary" name="AddBtn1" data-RecFldNm="39471" data-toggle="modal" data-target="#addRecords">Add</button>
<input type="hidden" name="RecFldNm2" value="39472" />
<button type="button" class="btn btn-primary" name="AddBtn2" data-RecFldNm="39472" data-toggle="modal" data-target="#addRecords">Add</button>
<input type="hidden" name="RecFldNm3" value="39473" />
<button type="button" class="btn btn-primary" name="AddBtn3" data-RecFldNm="39473" data-toggle="modal" data-target="#addRecords">Add</button>

With the javascript, all I have it doing it modifying the title of the modal but you have access to the passed id so you could do anything you wanted with it:

$(function() {	
		$('#addRecords').on('show.bs.modal', function (e) {
		var recfldnm = $(e.relatedTarget).data('recfldnm');
			$('.modal-title').text('Please update for '+recfldnm);
	});
});

11/26/2014

This is how a more modern approach would be. You can just as easily use the pure js approach as in my first example but jquery can make it easy.

Using your rendered code as an example with jquery ui. It can look like this. I used buttons instead of input type=button and notice I have the id in an attribute called data-rec. We will use ajax to populate the modal. The basic example without ajax is below. A working example http://jsbin.com/puroqisiti/1/edit?html,output

<!DOCTYPE html>
<html>
<head>
 
<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
  
  <script>
  $(function() {
    $( "#dialog" ).hide();
    $('.open').click(function(){
       $( "#dialog" ).dialog();
    });
  });
  </script>
  <meta charset="utf-8">
  <title>JS Bin</title>

</head>
<body>

 <!--<input type="hidden" name="RecFldNm1" value="39471" >
<input type="button" class="open" name="AddBtn1"  value="Add">
<!--<input type="hidden" name="RecFldNm2" value="39472" >
<input type="button" name="AddBtn2"  value="Add">
<!--<input type="hidden" name="RecFldNm3" value="39473" >
<input type="button" name="AddBtn3"  value="Add">-->
  
  <button class="open" data-rec="39471">Add 39471</button>
  <button class="open" data-rec="39472">Add 39472</button>
  <button class="open" data-rec="39473">Add 39473</button>
 <div id="dialog" title="Basic dialog"> 
   <p>Your ajax response will go here</p>
</div>
</body>
</html>

The next step is to create a blank asp page than can accept a post or get and output the needed data. Then via ajax the content from that page will appear in the #dialog. Example next.

11/26/2014

Rob beat me to it. That is a big 10-4 +1 good buddy.

11/26/2014

On your ajax page, let say you have a simple response to a post with field name id.

<%
response.write "You selected "&request.form("id")
%>

Then your main page will look like this

<!DOCTYPE html>
<html>
<head>
 
<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
  
  <script>
  $(function() {
    $("#dialog").hide();
    $('.open').click(function() {
        //GET THE ID TO  PASS FROM THE ATTRIBUTE DATA-REC
        myID = $(this).attr('data-rec');
        //SET UP THE POST TO YOUR AJAX PAGE
        $.ajax({
                type: "POST",
                url: "the_ajax_page.asp",
                data: {
                    id: myID
                }
            })
            .done(function(data) {
                $("#dialog").html(data); //PLACE THE RESPONSE TO THE #dialog 
                $("#dialog").dialog(); // OPEN THE DIALOG
            });


    });
});
  </script>
  <meta charset="utf-8">
  <title>JS Bin</title>

</head>
<body>

 <!--<input type="hidden" name="RecFldNm1" value="39471" >
<input type="button" class="open" name="AddBtn1"  value="Add">
<!--<input type="hidden" name="RecFldNm2" value="39472" >
<input type="button" name="AddBtn2"  value="Add">
<!--<input type="hidden" name="RecFldNm3" value="39473" >
<input type="button" name="AddBtn3"  value="Add">-->
  
  <button class="open" data-rec="39471">Add 39471</button>
  <button class="open" data-rec="39472">Add 39472</button>
  <button class="open" data-rec="39473">Add 39473</button>
 <div id="dialog" title="Basic dialog"> 
   <!-- no content on the page -->
</div>
</body>
</html>

HometownComp

11/26/2014

ASKER

some really good ideas here .. i will check each out very soon... meanwhile...

I do think it should be simple as Greg Alexander shows but I tried this before and it works except I can't get the new window to size .. I tried to add it like this..

<input type="hidden" name="<%=RecFldNm%>" value="<%=vPRecID%>">
<input type="button" name="<%=AddBtn%>" value="Add" OnClick='window.open("http://youdomain.com/page.asp?id=<%=vPRecID%>","width=600, height=400")'>

I get the value and a new window but it is full size.. does anyone see what's wrong?

11/26/2014

I understand but when you say simple, many times what is simple for the end user takes longer to code and this is one of those times.

Using a pop up like this is pretty rare anymore and you will run into browsers not allowing pop ups unless the user specifically white lists it.

HometownComp

12/16/2014

ASKER

Thank you all for your help. Our client did not want the dialog box, we ended up opening another window (full screen) and showing the previous page's choices listed. I'm sorry it took a while for me to accept the answer but was forced to spend more time on other work and didn't have time to try these solutions right away. This post was never abandoned. The dialog box code will be very useful in the future. Thanks again.