Develop Reference

understanding Jquery inside HTML

I am writing this code here inside my HTML and I am trying to access the information in order to show and hide the information on the functioning website.
I have only been learning to code for less than a month and a half so I am unsure of whether or not this code creates another DIV inside the HTML.
If it does, how can I access this on CSS? I tried different methods to see if this would show up, but at this point, I believe it does not create anything new inside my HTML Body.
*var $tweet = $('<div class="tweet' +tweet.user+'"></div>');

you are creating an element but you are not appending it to anything.
var tweet = ('<div class="tweet' +tweet.user +'"></div>');
$('body').append(tweet);
you can change the 'body' to a different selector

How do I dynamically add html elements to a page and access them in asp.net?

Good day,
I have been trying for over a day now to figure out a way to dynamically add elements to a web page using visual studio and access their values. I am either over-complicating the whole thing, I'm being dumb, or there is genuinely no way in which to do what I'm trying to do haha.
I am trying to create a page that should be able to generate possibly over 100 of the following html item sets:
It is basically a question and answer form for creating a multiple choice test. There is an area to type a question and then additional text boxes just to add in the multiple choice. There is also a button that can add an extra 2 textboxes to the answer area (whether they are created and added to a div in the table row or hidden and then revealed when the button is pressed.)
[Textbox for question]
[Textbox][Textbox][Textbox][Textbox] [Button that adds additional textbox to this row (only an extra 2 at maximum)]
[Confirm button to submit the text in the textboxes]
[Button that adds another copy of the elements above (up to 100)]
I would love to create just a normal form (as that's probably easiest), but this needs to work on the web. I know keeping track of all of this content can be a nightmare, but I can't think of an alternative (well, I have thought of an alternative but it seems to be more complicated). I have tried the following:
I tried adding a div into a table cell to add the textboxes, but I couldn't access the div afterwards. Is there a way to do this? If I could access the elements I create using the innerHtml method, I would be more or less fine, but I cannot find anything online.
QuestionContent.InnerHtml += "<table runat=\"server\" style=\"width: 100 %; \"><tr><td> Question " + _QuestionNum + " </td></tr><tr><td class=\"auto - style1\"><div id=\"divQ"+_QuestioNum+"\"></div></td></tr></table>";
//Might have an issue adding an element with runat=server, but this was the only way I could think of extracting a value that is created dynamically in C#.
((System.Web.UI.HtmlControls.HtmlGenericControl)mainPanel.FindControl("divQ1")).InnerHtml = "<asp:TextBox ID=\"txtChoice1\" runat=\"server\">Choice1</asp:TextBox>";
//Here I try to access the div created above. Unrelated: Also tried with a normal textbox, but I realise that creating an asp textbox here might cause issues.
I just cannot seem to access anything I create in C#. Is there a better way? Upon giving up on this idea, I tried creating elements using javascript. I still need to find out if I can pass values through to C# using javascript, but I am stuck with another issue now. Whenever the below code runs, the elements appear but then immediately disappear. Is this an issue with asp.net? The google results weren't very helpful.
function addQuestion() {
if (numQuestions == limit) {
alert('Maximum question limit reached. Consider breaking this test up into multiple tests.');
}
else {
var newdiv = document.createElement('div');
newdiv.setAttribute('id', 'divQ' + numQuestions);
newdiv.innerHTML = '<table><tr><td> Question' + numQuestions + '</td></tr><tr><td>';
for(var i=0;i<6;i++){
newdiv.innerHTML += "<input type=\"text\" name=\"textBox"+i+"\">";
}
newdiv.innerHTML += '</td></tr></table>';
numQuestions++;
document.getElementById('divQuestionContent').appendChild(newdiv);
}
}
However, I would like to avoid using javascript if I can. Is there a better way to create this page? Have I simply done something wrong? Any help will be greatly appreciated.

I think you are mixin server and client side code.
1st) Create html form with your first known necesary fields
2nd) Javascript part. User add fields to the form (need to be done in Javascript, client side ), check this answer:
How add new hidden input fields to the form on submit
3rd) C# part . On form request, you need to loop over all request.form items, as you can't know how many they are. This can be done with something like this:
StringBuilder s = new StringBuilder();
foreach (string key in Request.Form.Keys)
{
s.AppendLine(key + ": " + Request.Form[key]);
}
string formData = s.ToString();

add multiple val in jquery

I want do to click and display in textarea.
The problem is once I click the fullname, the fullname will display in textarea;
and then click ic, the ic will display in textarea but replaced the fullname.
What should I do to make fullname,ic,hp not replace each other? I want to let user click by the variable they want, therefore I didnt do 3 variables insert in one click.
<span onclick=\"insert_user_eh_name('".$row['fullname']."','','');\">".$row['fullname']."</span>
<span onclick=\"insert_user_eh_name('','".$row['ic']."','');\">".$row['ic']."</span>
<span onclick=\"insert_user_eh_name('','','".$row['hp']."');\">".$row['hp']."</span>
function insert_user_eh_name(fullname,ic,phone){
jQuery("#text-area").val(fullname+ ic +phone);}

So, if you're using jQuery, here's the solution you would want:
var insertIntoTextArea = null;
$('.data').on('click', function(){
insertIntoTextArea += $(this).text();
$("#text-area").val(insertIntoTextArea);
});
Now, you can create the identifier any way you would like, but I used a class just to make it easier. One thing to remember is it's not usually a good idea to mix JS and PHP together. It just ends up being a mess and you'll run into so many problems. Also, it's not how jQuery is meant to operate.
That said, what I did was create a click event handler that will know that on click, append it to the textarea's value and make sure it is ADDED to the existing data, rather than overwrite what they previously had in the textarea.
Does this help?
Here's a JSfiddle just in case

embeded JS code you write in HTML is really strange, but if you don't want the string to replace each other in val, why not add them? for example:
// fullname click
var val = $('#text-area').val()
$('text-area').val(val + fullname)
All you need to write is about string process

Use callback function to create variables and use in a html element

Firstly excuse my ignorance with any inaccurate information I provide I a very new to javascript, jquery and json.
Anyway I have a script which pulls data from a json file and displays in a webpage with the help of javascript, jquery, ajax(i think) and json.
There is a callback for when I get back the results:
function searchCallback(data) {
$(document.body).append('<h1>' + data.title + '</h1>');
}
And it works fine the like this. However I want data.title (json object) to be displayed in a html element of my choice without having to use $(document.body) because my page won't display correctly at I have other html elements outside the script.
As far as I know (excuse ignorance) with javascript I can possible add a variable and use it as follows:
var title = data.title;
And in my html:
<span id="title"></span>
or maybe there is cleaner way?
Anyway how do I achieve this. Thank you for any help!!

If you want to find an element and modify, jQuery makes this easy. Instead of $(document.body).append find an existing element by it's id, and then call the text method on it to replace the text inside that element with something new.
$('#title').text(data.title);

See if certain text is in URL and if so print something dynamically via javascript

Here is what I would like to ideally do within my HTML - I would like to insert a bit of javascript that checks to see if a certain directory name is listed in the current user's URL and if so, output copy on the page. For example:
If the current URL has the word "trigger" in it such as:
http://www.mysite.com/pages/trigger/dosomestuff.html
then I want to output "confirmed" on the page.
I am not too familiar with javascript, so I am hoping that someone can help!
Thanks!

if (location.href.match("trigger"))
{
document.write("<h1>confirmed!</h1>")
}