0

I have a static string in ASP.NET. This static string is used to create HTML content, and within that string are place holder values that get replaced at run time. This is so I can use the static string HTML to build several boxes, each containing a HTML text box and a HTML link button. The user can put their comments in and hit the button to submit them. All these controls are HTML (so not asp:xxxxx type controls). so my dynamically created post back button is this: 

<a href = 'Main?action=comment&id=[sparkid]&text=

[sparkid] gets replaced during rendering with a unique value. So in the browser each box looks like this:

enter image description here

and the url behind that button is 

<a href = 'Main?action=comment&id=eeb3e737-952a-4a70-8d98-f74af489555a&text=

However, I don't know how to capture the content of the text box? so that I can pass it as a query string in the url on post back, so it would be 

&text='all the things i wrote in the box'

How do I do this? I have purposely stayed away from using ASP.NET controls as this is a static string of HTML that gets replaced with unique values as each box is rendered, so I'd have no idea how to then create dynamic asp.net buttons that have dynamic onclick events. I was hoping there was some way using jquery to get the value of the text box when the user clicks 'submit comment'.

EDIT: the entire static string so you can see the [placeholder] values. Somehow I need to embed something in there that's smart enough to get the contents of the text area when the user clicks the submit comment button. 

public static string SparkCard { get { return "<div class='uk-card uk-card-default uk-card-body'> " + 
                                              "           <div class='uk-card-header'> " + 
                                              "      <div class='uk-grid-small uk-flex-middle' uk-grid> " + 
                                              "          <div class='uk-width-auto'> " +
                                              "              <img class='uk-border-circle' width='40' height='40' src='data:image/jpg;base64,[base64image]'> " + 
                                              "          </div> " + 
                                              "          <div class='uk-width-expand'> " + 
                                              "              <h3 class='uk-card-title uk-margin-remove-bottom'>[title]</h3> " + 
                                              "              <p class='uk-text-meta uk-margin-remove-top'>[createdon] by [creator]</p> " + 
                                              "          </div> " + 
                                              "      </div> " + 
                                              "  </div> " +
                                              "  <div class='uk-card-body' id='content-[#]' runat='server'> " + 
                                              "      <p>[contenttext]</p> " + 
                                              "  </div> " + 
                                              "  <div class='uk-card-footer'> " + 
                                              "          <div id ='toggle-animation-[#]' class='uk-card uk-card-default uk-card-body uk-margin-small'> " + 
                                              "          [comments]   " +
                                              "          </div> " +
                                              "          <a href='#toggle-animation-[#]' class='uk-icon-button' uk-icon='comment' uk-toggle='target: #toggle-animation-[#]; animation: uk-animation-fade' uk-tooltip='Comments'></a> " + 
                                              "          <a href='Main?action=like&id=[sparkid]' class='uk-icon-button' uk-icon='heart' uk-tooltip='Like'></a> " + 
                                              "          <a href='SparkDetail?id=[sparkid]' class='uk-icon-button' uk-icon='forward' uk-tooltip='Detail'></a> " + 
                                              "  </div> " + 
                                              "  <div class='uk-margin'> " + 
                                              "      <label class='uk-form-label' for='ideaText'>[currentuser] says...</label> " + 
                                              "      <textarea class='uk-textarea' id='ideaText' runat='server' rows='5' placeholder='Enter your comments here...'></textarea> " +
                                              "      <a href = 'Main?action=comment&id=[sparkid]&text=document.getElementById(''+content-[#].ClientID+'').value;' class='uk-icon-button' uk-icon='commenting' uk-tooltip='Submit comment'></a> " + 
                                              "  </div> " +
                                              "</div><hr />"; } }
JamesMatson
  • 2,522
  • 2
  • 37
  • 86

1 Answers1

0

You can try : jQuery(document.getElementById("id").value). You can refer jQuery("#id") or jQuery(document.getElementById("id"))? for more details

Coder786
  • 3
  • 4
  • Thanks, but how do I embed that within the dynamic html I'm building? e.g. how does that get added to the href url? For clarity I will show the entire html block I have as a static string, anything with '[' and ']' around it is a place holder that gets replaced by .Replace – JamesMatson Aug 20 '18 at 09:50
  • I'm losing it. I feel like I've tried everything, but I'm just not that good with jquery :( I know html and I know asp.net. What I want seems so simple.. it's just – JamesMatson Aug 20 '18 at 11:25
  • @JamesMatson Saving the dynamic content into a variable and concatenating it to the anchor should do the trick. `var text = document.getElementById("id").value` and then do the concatenation using ` – Coder786 Aug 21 '18 at 04:12
  • Thanks Coder! I understand the href part of your comment, but where do I put the var text = document..... I'm using ASP.NET, so am I putting this in the code somewhere? Or in the HTML markup? If the former, how would I trigger that code to execute, being that I'm clicking a HTML link (so there's no on-click event handler etc specified) – JamesMatson Aug 21 '18 at 09:47