An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!
Solved
How do I pass a dynamically created form field to another page through an href query string or on Click method
Posted on 2014-11-26
Hi. I'm updating an older website that is still using Classic Asp (so please no asp.net answers thanks!) I'm working with a page where my form fields are dynamically named from a record source. The user will click on a button or link that will pop up my other page in a new window (specific size) and all i need to know in the new window is what record or row they clicked on. There are quite a few different ways I see to do this but I'm not sure how to pass my field name variable and value properly within javascript needed to open a new sized pop up window. For example.. i have ..
<input type="hidden" name="<%=RecFldNm%>" value="<%=vPRecID%>">
<input type="button" name="<%=AddBtn%>" value="Add">
So.. if I have 3 rows displayed from my record set, I end up with 3 sections on my form with each item named... (source view)
<input type="hidden" name="RecFldNm1" value="39471" >
<input type="button" 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">
I have no problem getting everything I need when posting the form to my asp code page etc. My problem here is that I want the user to click on one of the "Add" buttons (or it can be a hyperlink etc.) that opens another page in a new window that is sized that allows them to add some things. If the user chooses the 2nd record, i want to be able to pass 39472 record id, value of my hidden field RecFldNm2 to the new page or even know that they clicked on AddBtn2. I can work with either way.. i'm just not sure how to pass the value.
Thanks for any help!
<input type="hidden" name="<%=RecFldNm%>" value="<%=vPRecID%>">
<input type="button" name="<%=AddBtn%>" value="Add">
So.. if I have 3 rows displayed from my record set, I end up with 3 sections on my form with each item named... (source view)
<input type="hidden" name="RecFldNm1" value="39471" >
<input type="button" 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">
I have no problem getting everything I need when posting the form to my asp code page etc. My problem here is that I want the user to click on one of the "Add" buttons (or it can be a hyperlink etc.) that opens another page in a new window that is sized that allows them to add some things. If the user chooses the 2nd record, i want to be able to pass 39472 record id, value of my hidden field RecFldNm2 to the new page or even know that they clicked on AddBtn2. I can work with either way.. i'm just not sure how to pass the value.
Thanks for any help!
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
6
3-
2
- +2
13 Comments
Active today
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>
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%>")'>
Active today
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:
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")
Active today
Building on that idea, instead of a "pop up" which can be annoying, you can use a modal.
http://jsmodal.com/docs/usage.php
If you like jquery ui http://jqueryui.com/dialog/
Using a modal in any of these options allow us to have the data on the page and call it via js or jquery. A modal gives a nicer experience than a pop up.
http://jsmodal.com/docs/usage.php
<!-- load jsmodal.js and jsmodal.css -->
<script>
document.getElementById('modal-1').onclick = function() {
Modal.open({
content: '<strong>Default modal!</strong>
<br />Testing the modal.
<br /><
br />Loreum ipsum dolorem the quick brown
fox jumped over the lazy dog.
<br /><br />Yes its true.',
draggable: true,
openCallback: function () {
alert('This is an example of the use of openCallback');
}
});
}
</script>
If you like jquery ui http://jqueryui.com/dialog/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Using a modal in any of these options allow us to have the data on the page and call it via js or jquery. A modal gives a nicer experience than a pop up.
Active today
and for more info on window.open, where you can control resizing the window:
http://www.w3schools.com/jsref/met_win_open.asp
http://www.w3schools.com/jsref/met_win_open.asp
Active today
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.
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:
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);
});
});
Active today
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
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>
Active today
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")
%>
<!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>
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=<%=v
I get the value and a new window but it is full size.. does anyone see what's wrong?
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=<%=v
I get the value and a new window but it is full size.. does anyone see what's wrong?
Active today
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.
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.
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.
Active today
if you went with opening another window full screen, then shouldn't this answer be the accepted answer? or at least a split? or did you just use a href link to open a new window?
Featured Post
Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.
One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how add a scalable full-width header using CSS3.
Create a new HTML document with an internal stylesheet. Set a tiled background.: Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number.
For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Suggested Courses
Course of the Month8 days, 7 hours left to enroll
721 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.