We Keep Coding

Get all the html code of the form tag and the values of the textboxes in the form tag

jQuery(function ($) {
var submitbnt = '<input type="button" id="submit" class="btn btn-primary pull-right" value="Submit" />';
var formData = '[{"type":"select","label":"Select","className":"form-control","name":"select-1498804267849","values":[{"label":"Option 1","value":"option-1"},{"label":"Option 2","value":"option-2","selected":true},{"label":"Option 3","value":"option-3"}]},{"type":"text","label":"Text Field","className":"form-control","name":"text-1498804394861","subtype":"text"},{"type":"text","label":"Text Field","className":"form-control","name":"text-1498804395129","subtype":"text"}]';
formRenderOpts = {
dataType: 'json',
formData:formData
}
$('#mform').formRender(formRenderOpts);
$('#mform').append(submitbnt);
document.getElementById('submit').onclick = function () {
var formData = new FormData(document.forms[0]);
var result = {};
for(var pair of formData.entries()) {
result[pair[0]] = pair[1];
}
console.log($('#mform').formData());
result = JSON.stringify(result); // just key/ value
var htmlForm = $('#mform').html(); // Can not get merge values in code
};
});
<h1>Form demo</h1>
<form class="col-md-12" id="mform" style="background-color:white;padding:50px">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://formbuilder.online/assets/js/form-builder.min.js"></script>
<script src="https://formbuilder.online/assets/js/form-render.min.js"></script>
I use the formbuilder of http://formbuilder.readthedocs.io. I render a form. And show that form, then I input the data, and I want to get the html code of that form, I have found many ways but only I can not get the html code of form and values. I only get the html code, but no values. Or I just get the values but no html, I think I will have to manually "mix" the values that I get into the html code. But actually it is very troublesome.
I have a registration form, I want when the user click on the submit button will get all the html code of the form tag, it includes all input, drop-down list, radio, button .. and value already was inputed.
I tried using $('#myform').html() to get all the form's code, but it did not get the values that I entered into the input, or radio ...
I want to get something like this:
<form id="myForm" class="cusForm">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Try serialize() function of jquery
console.log($('form').serialize())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" class="cusForm">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

I don't know why you need the html, just in case you need the values of properties that are being post you can check this code, you will get array of the values which are being posted,
$(function(){
$('.submit').click(function(){
var result = [];
$('#myForm input').each(function(e,v){
var value = {};
value.property = v.name;
value.value = v.value;
result.push(value);
});
alert(JSON.stringify(result));
});
});
Working Fiddle: https://jsfiddle.net/jks7afpx/

You can use $('#myForm').serializeArray() and $('#myForm input:text'); to get data and text type input's html of your form.
$("#getTextInputs").on("click", function(){
console.clear();
var textInputs = $('#myForm input:text');
$.each(textInputs, function(){
$(this).attr("value", $(this).val());
console.log(this);
})
})
$("#getFormData").on("click", function(){
console.clear();
var data = $('#myForm').serializeArray();
console.log(data);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" class="cusForm">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="button" id="getTextInputs" value="Get Text Input Html">
<input type="button" id="getFormData" value="Get Form Data">
</form>

Dynamically show text field's contents on labels

I want to enter names using input field and then show those names dynamically on the click of a button. Can anyone provide me with a code sample that does that?

What you want to achieve is fairly easy to do with jquery. However while asking a question first give it a try and then ask if you dont get it.
$(function(){
$('#submit').on('click', function(){
var value = $('#name').val();
var text = '<p>' + value + '</p>';
$('#display').append(text);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="inputNames" id="name">
<button id="submit">Submit</button>
<div id="display"></div>

<html>
<body>
<input type="text" name="Names" id="Names">
<input type="button" value="Click" onclick="SendName();" name="">
<p id="ShowNames"></p>
<script type="text/javascript">
function SendName() {
var d= document;
var InputNames = d.getElementById("Names").value;
var ShowNames = d.getElementById("ShowNames");
ShowNames.innerHTML +=InputNames+"</br>";
}
</script>
</body>
</html>

Enabling inactive fields by clicking on field

Is it possible to have a group of inactive fields where if one of the fields is clicked some of the fields become mandatory and some segments of code are run? Say for example you have three fields which are shown:
<input type="text" id="gov1" name="gov1">
<input type="text" id="parentb" name="parentb">
<input type="checkbox" name="child" id="child">
All three of these fields are initially inactive; but say you click on one of the fields it now makes the rest active and mandatory, and some segment of code is run on the field "parentb" and it is attributed at readonly.
window.onload = function(event)
{
var $input2 = document.getElementById('dec');
var $input1 = document.getElementById('parentb');
$input1.addEventListener('keyup', function()
{
$input2.value = $input1.value;
});
}
I have done a bit of searching around but i can't seem to find anything of use for this specific situation and i'm quite new to JavaScript so any sort of help would be great. Is this at all possible using JavaScript? Or is something similar to this possible?

This method you are looking is called 'chained-select' method.
jQuery framework is used for example below:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<form action="" method="get">
<label>
<input name="Government" type="checkbox" value="">Government</label>
<br>
<label>
<input name="Parent" type="checkbox" id="parent_child_group" value="">Parent</label>
<br>
<label>Name of Child
<input type="text" name="parent_child" value="" class="parent_child_group"></label>
<br>
<label>Other
<input type="text" name="parent_other" value="" class="parent_child_group"></label>
</form>
<script type="text/javascript">
$(document).ready(function () {
$(function() {
enable_cb();
$("#parent_child_group").click(enable_cb);
});
function enable_cb() {
if (this.checked) {
$("input.parent_child_group").removeAttr("disabled");
} else {
$("input.parent_child_group").attr("disabled", true);
}
}
});
</script>
</body>
</html>
Working example on JSFiddle: http://jsfiddle.net/farondomenic/fg7p8/1/

Form Submit connected to js event not working

I have the following code:
<form action="" id="search-form">
<fieldset>
<div class="rowElem">
<input type="text">
<a href="#" onClick="document.getElementById('search-form').submit()">
<div>Search</div>
</a></div>
</fieldset>
</form>
<script>
$(document).ready(function() {
$('#search-form').submit(function(event){
event.preventDefault();
alert("test");
});
});
</script>
When I submit the form I don't see the alert... What am I missing?
Thanks,

You need to remove your obtrusive onclick event and bind to the link instead.
You can't alert AFTER you submit, since that would perform whatever action you give to the form (most likely taking you off the page. If you insisted on doing so, the following would work.
<form action="" id="search-form">
<fieldset>
<div class="rowElem">
<input id="name" type="text"></input>
<a href="#" id="search" >Search</a>
</div>
</fieldset>
</form>
<script>
$(document).ready(function() {
$('#search').bind('click', function () {
// Alert the name BEFORE you do the form post
alert($('#name).val());
$('#search-form').submit(function(event){
});
});
});
</script>
I have a working JSFiddle example here: http://jsfiddle.net/7jqUF/5/
If, instead, you wanted an AJAX solution, you'd want to do something other than a form post, such as an ajax post
<script>
$(document).ready(function() {
$('#search').bind('click', function () {
// Alert the name BEFORE you do the form post
alert($('#name).val());
$.post('/ServerUrl/method', { name: $('#name').val() });
});
});
</script>

Why don't you do something like
<form action="" id="search-form">
<fieldset>
<div class="rowElem">
<input name="query" type="text" /><br />
<a class="search" href="#">Search</a>
</div>
</fieldset>
</form>
and
var form = $('#search-form');
$('.search', form).click(function(event){
event.preventDefault();
var query = $('input[name="query"]', form).val();
alert("test: " + query);
});
Demo: Fiddle
If you want to use the params as part of a ajax request you can do something like
var form = $('#search-form');
$('.search', form).click(function(event){
event.preventDefault();
var params = form.serialize();
alert("test: " + form.serialize());
$.ajax({
url: '...',
data: params,
....
})
});

Please try the following code. After removing the submit code from the $(document).ready function
<a href="#" onclick="document.getElementById('search-form').submit();">

Post the value of a button in JavaScript

I am trying to post the literal value of a button as form data but cannot achieve this. Here's what I have so far.
<form method="POST" action="/post" id="message">
<div class="container">
<div class="row">
<div style="line-height:22%;">
</div>
<button class="btn-change" type="submit" name="foo" value="bar"><dt><code>button for value bar</code></dt></button>
</div>
</div>
</form>
<script type="text/javascript">
$(".btn-change").on('click', function() {
var value = $(this).val();
document.getElementById('message').submit();
});
</script>
How do I post value in my form?
Solution
This seems to work:
<button class="btn-change" name="message" form="message" value="bar"><dt><code>button for value bar</code></dt></button>
With the removal of (of course):
<script type="text/javascript">
$(".btn-change").on('click', function() {
var value = $(this).val();
document.getElementById('message').submit();
});
</script>

Put the value in a hidden field to declare inside the form : <input type="hidden" name="myvalue">. It won't be displayed on screen, but you can store in it's value property anything you want to post.