We Keep Coding

Dynamic form using HTML and JQuery

I am trying to make a dynamic form using HTML and CSS. I am adding parts of my code below. I can not figure out why the code is not working.
JavaScript:
<script>
$(document).ready(function(e) {
var labelfiled = '<div><label>Label</label><input type="text" name="label[]"></div>';
var valuefiled = '<div><label>Value</label><input type="text" name="value[]"></div>';
var labdiv = $(".labdiv");
var valdiv = $(".valdiv");
var addbutton = $(".add_more");
$(addbutton).click(function(){
$(labdiv).append(labelfiled);
$(valdiv).append(valuefield);
});
</script>
HTML:
<form>
<div class="col-md-6 labdiv">
<div><label>Label</label>
<input type="text" name="label[]">
</div>
</div>
<div class="col-md-5 valdiv">
<div>
<label>Value</label>
<input type="text" name="value[]">
</div>
</div>
<button class="add_more">Add values</button>
</form>
If someone can help it would be great.
I also would like to know how I can process the data when I submit this into a javascript variable in the from of a array. Like for example if i have 2 inputs for value in the from, I want to store them in a javascript array and then convert it into a JSON.

Form must be in method="POST" and if you get in into php function :
if(!empty($_POST) && isset($_POST){ /*try something with $_POST*/ }

Try this
$(".add_more").click(function() {
var postData = {
field1: $("#id_field1").val(),
field2: $("#id_field2").val()
};
$.ajax({
dataType: "json",
data:JSON.stringify(postData),
url: URL,
method: 'POST'
});
});

A few things that may improve your learning:
jQuery and you code
All jQuery code should be wrapped in this...
$(document).ready(function() {
// jQuery
});
On the var's you have created, you have already initialised them as jQuery elements. Therefore, when you reference them again, you do not need (for example) $(addbutton) as addbutton will do. See amended code below)
<script>
$(document).ready(function(e) {
var labelfiled = '<div><label>Label</label><input type="text" name="label[]"></div>';
var valuefiled = '<div><label>Value</label><input type="text" name="value[]"></div>';
var labdiv = $(".labdiv");
var valdiv = $(".valdiv");
var addbutton = $(".add_more");
addbutton.click(function(){
labdiv.append(labelfiled);
valdiv.append(valuefield);
});
});
</script>
The console
On checking the console...
Say, for example, if you write the JS code console.log(1 + 1) in your page somewhere as you want to see that sum. Due to you writing client side code, when your web page loads (and depending where you have put the console.log()) if you check the developer tools in your chosen browser i.e. Chrome or IE, there is a console section where you can see the result of what you printed (i.e. using that example, it would be 2). This console in the browser will also print out errors that it detects (i.e. $ is not defined - if you are trying to reference jQuery but the library isn't included), it's a good tool for web developers (hence the name ;)) for debugging client side code.
Adding elements to array
Code for getting input values on submit of a form: (jQuery)
var array = [];
$("form").on("submit", function() {
$("input").each(function() {
array.push($(this).val();
});
});
I would suggest that you go and read a book/tutorial on jQuery code as well as the basic concepts of web development :)
Examples:
jQuery
For reference to basics if you get stuck, the link above is more reliable:
- w3schools

How to add the text input value to the end of the URL in HTML?

I am new to HTML; I need to append the number in the text input to the end of the url. How can I do that?
<input type=\"number\" id=\"b\" name=\"b\" value=\"1\">\
<script>
var str,i;
i= parseInt(b.value);
str+="Send";
</script>
When I tried with the above sample code, when click send it always sends the initial value of b that is "1". Even though I changed the value of b and tried to send it, it is sending the same initial value.
Can anyone help me on this?

Try this
<input type="number" id="b" name="b" value="1">
<a id="c" href="">Send</a>
<script>
document.getElementById("c").addEventListener("click", function() {
var i = document.getElementById("b").value;
this.setAttribute("href", "/t" + i);
});
</script>

The problem with your code is that it writes the initial value of the 'number' box at page load time. A quick version of what you want is:
<input type="number" id="b" name="b" value="1" onchange="link1.href='t/'+parseInt(b.value);">
<a id="link1" href="">Send</a>
This code works in recent versions of Chrome, Firefox, and Internet Explorer. You might want to use jQuery or document.getElementById to do the page element referencing.

You can search element using id
var el = document.getElementById("b")
access its value using .value
var val =el.value
And set it to url using window.location
var url = window.location.href; // this will return current url
url += "?key=" + val;
window.location.href=url;
Also reason why you are not getting updated value is because you are calling your script on page load. You will have to update it on an event. Look for blur event, or you can have a button and on click event, compute url and route to it.

How to pull an ID from a link the User inputted

HTML:
<body>
<input type="text" id="userINPUT" />
<button onclick="updatev1()">Submit</button>
<div id="video1">
</div>
<div id="video2">
</div>
</body>
The html has two divs, and an input text box,and of course, a submit button. What the user is supposed to do is enter a youtube link into the text box, and submit it.
JavaScript:
var userIN1 = document.getElementById("userINPUT");
var userIN2 = userIN1.value;
var index = userIN2.substring(string.indexOf('=') -1);
alert(index);
Now what I want the JavaScript to do is to grab the youtube link, and pull the ID from said link.
EX. The user inputs the link. 'http://www.youtube.com/watch?v=-K7lEFmFcKs', then the JavaScript would take the link and grab '-K7lEFmFcK' and store it in a variable for later use.
'userIN2' would be the variable that would store the user input value, and 'index' would take the whole ID coming after the '=' symbol of the link and store it.
I know this is considered a small task, but any help would be great.
Thanks!
Oh, and I heard these things can be done A LOT easier with jQuery. Should I use jQuery instead?

Sure should. It'd be that simple:
$('button').click(function() {
var userIN2 = $('#userINPUT').val();
var index = userIN2.split('=');
index = index[1];
});

This collects everything after v=
http://jsfiddle.net/7aZqB/4/
function getID(str) {
return str.substring(str.indexOf('=') -1).replace('v=', '');
}

How to change HTML between 2 delimiters?

Imagine the following scenario: I have this HTML body (this is just one example, the delimiters will be configurable by 3rd parties, so no way to use DOM methods like getElementBy...) :
<div id="login">
<form method="post" action="https://site.com/login.html?skin=webmail" id="fWM">
<fieldset>
<p><label>Login<br><input type="text" class="inpText" name="user" id="user"/> </label><span class="provider">#isp.com</span></p>
<p><label>Password<br><input type="password" class="inpText inpPass" name="pass" id="pass"/></label></p>
</fieldset>
<p id="forgot">
Forgot password? <span class="pipe">|</span>
Help
</p>
<br><a><input type="submit" value="" id="bOK"/></a></p>
</form>
Ok, this is just a part of some html body asking for Login and Password. As you can see, I have
< fieldset > and < /fieldset > and for this example those are my delimiters. This mean, everything between this delimiters I want to change for another html code. I have some 'begin of code' like this to you have some idea about what I'm talking:
var myBody = document.body.innerHTML;
var beginInject = myBody.indexOf("<fieldset>");
var endInject = myBody.indexOf("</fieldset>");
var InjectBody = 'Hello World!';
//what to do now to put Hello World! between the <fieldset> and </fieldset>??
Remember this is just one example, I can need to put the delimiters like < body> and < /body> or something like: "Click Here to Start download" and "Thank you for visiting this website"... What I mean is: can be anything inside the body, and between the 2 delimiters I want to put my HTML code. Thank you.

If you insist to make it your way, use
var beginText = "<p>",
endText = "</p>",
injectText = 'Hello World!';
var html = document.body.innerHTML,
beginPos = html.indexOf(beginText),
endPos = html.indexOf(endText);
document.body.innerHTML =
html.substring(0, beginPos + beginText.length)
+injectText
+html.substring(endPos + endText.length);
Demo
But be aware that this way
You will remove all event listeners inside your body
You will lose all element's properties (not attributes)
Browser will reload all body (slow)
And it won't work on all cases. For example:
If you search for <p>, you won't match <p class="myClass">
If you search for <p a="b" c="d">, you won't match <p c="d" a="b">
Text could be matched instead of real elements, for example if text appears in a textarea.
endPos could be smaller than beginPos, for example because it appears in a textarea.
The problem is that You can't parse [X]HTML with regex because Zalgo is coming, so it's even worse to parse it with just text.

You could use document.querySelector.
For example:
document.querySelector('#login fieldset');
And its argument can be the selector that you want. This way you don't have to worry if you are matching by id, by class, by tagname, by name, etc.

bookmarklet: cannot find element added to the document

I am playing with bookmarklets. I add a frame to the document, and load some elements, like so:
var myframe=document.createElement("iframe");
myframe.setAttribute('id','a_frame');
myframe.src='http://localhost:81/nframe.html';
document.body.insertBefore(myframe,document.body.firstChild);
this is what nframe.html looks like:
<form id="sr_cart" name="sr_cart" action="localhost:81/dosomething.php">
Item Number: <input type="text" name="ItemNum" id="sr_item" value="" />
<input type="submit" value="Submit" />
</form>
Looks great so far: when I click on my bookmarklet, the document has been modified correctly
Then I try to look up the item number (or the form)
cart = document.getElementById('sr_cart');
I'm perplexed as to why this comes back a null. (looking up sr_item does the same thing. looking up something that is not in my frame works fine)
TIA

You're searching the wrong document. Start from the iframe's document, like so:
var docEl = myframe.contentDocument || myframe.contentWindow.document || myframe.document;
if (docEl) {
var cart = docEl.getElementById('sr_cart'); // this is what you need
}
I'm pretty sure this is what you need to do - I've done it before but I found verification in Closure Tools' code (Google's JS Library) - http://code.google.com/p/doctype/wiki/ArticleFrameContentDocument