Develop Reference

jQuery appending HTML elements out of order

I'll start this off by saying I use JS very infrequently, so this is likely a simple mistake. I came across the need to generate a form on the spot when a button is pressed. After some searching, I decided on using the append function from jQuery. Here is the code I wrote:
function replyToComment(commentId) {
var element = document.getElementById("reply-form");
if (element != null) {
element.remove()
}
const html = `
<div id="reply-form">
<label for="comment-form">Comment:</label>
<form method="post" id="comment-form" style="padding-bottom: 10px;">
<input type="hidden" name="csrfmiddlewaretoken" value="${csrf_token}"
<div class="form-group">
<div>
<textarea type="text" name="body" maxlength="1500" class="textarea form-control" cols="40" rows="10"></textarea>
</div>
</div>
<input type="text" name="comment-send" style="display:none;" readonly>
<input type="text" name="comment_id" value=${commentId} style="display:none;" readonly>
<button type="submit" class="btn btn-success">Send</button>
</form>
</div>`
$(`#${commentId}`).append(html)
}
When inspecting the final result, the argument passed into the append function is out of order:
I am not sure if the image will load in properly, but if it doesnt, its mostly irrelevant. Am I misusing the append function? Is there another way to do this that will handle the data I want to pass in properly?

It appears that you're neglecting to close one of your input tags.
You have:
<input type="hidden" name="csrfmiddlewaretoken" value="${csrf_token}"
This should be:
<input type="hidden" name="csrfmiddlewaretoken" value="${csrf_token}" />

How to get URL parameter into my autoresponder hidden field?

Hi i'm not a programmer and i need a javascript code.
I want to pass the URL parameter to a hidden form field!
This is what is added to the URL:
?ref_id=ik20284953
So i want to get the REF_ID and get it into a hidden field of a form which i already have.
How exactly can i do it ?
I found some solutions here in the forum but nothing worked for me!
HELP IS MUUUUCH APPRECIATED!
Greetings
Matthias
EDIT:
THIS IS MY FORM:
<div id="form-163709-wrapper">
<form id="ktv2-form-163709" accept-charset="UTF-8" method="post" action="https://www.klick-tipp.com/api/subscriber/signin.html"><input type="hidden" id="FormField_ApiKey" name="apikey" value="3smez1c7gz8ze9db" /><input type="hidden" id="FormField_Digit" name="fields[fieldDigit]" value="" />
<div class="ktv2-form-element"><label for="FormField_EmailAddress">Ihre E-Mail-Adresse: </label><br /><input type="text" id="FormField_EmailAddress" name="email" value="" size="40" /></div>
<div class="ktv2-form-element"><label for="FormField_FirstName">Vorname: </label><br /><input type="text" id="FormField_FirstName" name="fields[fieldFirstName]" value="" /></div>
<div class="ktv2-form-element"><input type="hidden" id="FormField_81808" name="fields[field81808]" value="" /></div><br />
<div><input type="submit" id="FormSubmit" name="FormSubmit" value="Ihr Button-Text" /></div>
</form>
</div>

You can get the ref_id with the URLSearchParams().get(), then you can inject the value with setAttribute()
var urlParams = new URLSearchParams(window.location.search);
var myParam = urlParams.get('ref_id');
document.getElementById('FormField_81808').setAttribute('value',myParam)
<form>
<input type="hidden" id="FormField_81808">
</form>

First you need to parse the query string, you can check this post: Parse query string in JavaScript
And then if you are using jQuery,
$("#FormField_81808").val(parsed_value);
If it is a native javascript that you are using;
document.getElementById("FormField_81808").value = parsed_value;
PS: It is best to put some code when you are trying to get an answer to this type of questions.

Input value hidden

I have this input:
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" />
and I want to get this input value in a hidden input, so I used this:
<input type="hidden" name="tag" value="tags" />
Instead of getting the true value of the first input, I only get the string "tags"! Can you please tell me how to obtain the true value of the first input in my hidden input? Thanks!
EDIT: Actually it's a submit page, the user enters tags in the #tag1 and when he clicks on submit I want to send these tags to my controller, that's why I'm using the hidden input...
My full code:
<form>
<p>
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" onblur="setValue()"; /></p>
<script>
$('#tag1').tagsInput({
// my parameters here
});
</script>
<style>
#wrapper {
margin: 20px;
}
</style>
<p>
<input type="submit" value="Create" />
<input type="hidden" name="taggg" id="tag2" />
<script type="text/javascript">
function setValue() {
document.getElementById("tag2").value = document.getElementById("tag1").value;
}
window.onload = setValue;
</script>
</p>
</form>

I don't understand why you would want to copy the value of one input field to another (albeit, hidden). But if that is what you want to do, try using the below code.
The function attached to the onblur event of the input field would set the value of the input field to the hidden field whenever it loses focus.
The window.onload = setValue will do the same on page load.
HTML
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" onblur="setValue();" />
<input type="hidden" name="tag" value="tags" id="tag1_hidden" /> <!-- Note the addition of an id attribute -->
JavaScript
function setValue() {
document.getElementById("tag1_hidden").value = document.getElementById("tag1").value;
}
window.onload = setValue;

Try this
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" />
<input type="hidden" name="tag" value="tags" id="tag2" />
Jquery:
$("#tag2").val($("#tag1").val());
or
$("#tag1").blur(function() {
$("#tag2").val($(this).val());
});

You can do like this (and you will need javascript for this).
Give a id to your hidden input also like:
<input type="hidden" id="hidden_input" name="tag" value="tags" />
and then use/paste this code when you need it:
var input_value = document.getElementById('tag1').value;
document.getElementById('hidden_input').value = input_value;

To use Jquery Contains keyword for textbox

How to use jquery contains for textbox,I have attached the fiddle link for your code reference,
<div id="txtCon">
<input type="text" name="man-news" />
<input type="text" name="milkman" />
<input type="text" name="letterman2" />
<input type="text" name="newmilk" />
has
</div>
Script:
$('input[name*="new"]').val('has');
$('input:text:contains("has")').css("color","red");
Link:
http://jsfiddle.net/vigneshjayaraman/Ytsr5/2/

:contains only looks at the content of elements. input elements have no content. You have to use .filter() [docs] instead:
$('input[name*="new"]').filter(function() {
return this.value.indexOf('has') > -1;
}).css(...);

jQuery serialize function with multple forms

I'm using the jQuery .serialize function and can't get it to serialize the proper form on submit.
my js code:
function getquerystring(form) {
return $("form").serialize();
}
my forms:
<div class="leave_message_box">
<form name="leave_message_form">
<input type="text" name="clock_code" placeholder="Clock Code" />
<input type="text" name="message" placeholder="Message (Blank for none)"/>
<input type="hidden" name="type" value="leave_message" />
<input value="Leave Message" type="button" onclick='JavaScript:xmlhttpPost("clockin.php", "leave_message_form")'></p>
</form>
</div>
<div class="outside_job_box">
<form name="outside_job_form">
<input type="text" name="clock_code" placeholder="Clock Code" />
<input type="text" name="message" placeholder="Message (Blank for none)"/>
<input type="hidden" name="type" value="ouside_job" />
<input value="Outside Job" type="button" onclick='JavaScript:xmlhttpPost("clockin.php", "outside_job_form")'></p>
</form>
</div>
I must be doing something wrong in passing the variable. the full code # pastie. The function I have does work, however, its always the last form that gets submitted.

Using this code:
$("form")
will find all the <form> elements in your document.
Given that form is a string containing the name of the form, what you want instead is this:
$("form[name='" + form + "']")
Looking at your supplied code, I have this suggestion. Instead of passing the form name to your function, why not just pass the form itself?
<button onclick="xmlhttpPost('blah', this.form)">
You also don't need to put javascript: in the onclick, onfocus, onwhatever properties.

I would suggest putting an ID attribute on the form and then using that ID as an explicit selector for jQuery:
<div class="outside_job_box">
<form id="outside_job_form" name="outside_job_form">
<input type="text" name="clock_code" placeholder="Clock Code" />
<input type="text" name="message" placeholder="Message (Blank for none)"/>
<input type="hidden" name="type" value="ouside_job" />
<input value="Outside Job" type="button" onclick='JavaScript:xmlhttpPost("clockin.php", "outside_job_form")'></p>
</form>
</div>
Then you would select and serialize it like this;
var f = $("#outside_job_form").serialize();
Not only making your code more effecient but more readable, in my opinion.

If the sole purpose is to encode simple text into URL format then use encodeURIComponent().