We Keep Coding

How to add elements to a form before submitting? WITHOUT AJAX

Is there a way to add data to a form before submitting it?
or add this form to a formdata and submit the formdata (without .$post, .$ajax or
XMLHttpRequest). the formdata can be submitted as a normal form.

You could do form submit event
function test(){
document.querySelector('#new_insert').value="hi"
//do stuff here
return true
}
<form action="action.php" method="get" onsubmit="return test()">
<input type="text" name="one"/>
<input id="new_insert" name="new" type="text">
<input type="submit">
</form>

<form onsubmit="return addfield();" id="myform">
<input type="text" name="txtname" value="Your name">
<input type="submit" name="btnsubmit" value="Submit">
</form>
<script>
function addfield(){
var oldhtml=document.getElementById("myform").html();
var newhtml='<input type="text" name="txtcity" value="Your city">';
document.getElementById("myform").html(oldhtml+newhtml);
}
</script>

you can add any hidden input you want:
<input type="text" name="my_hidden_input" value="my_value" id="hidden_input" hidden/>
and change the value whenever you want (on form submit or after page gets load)
$('#hidden_input').val("my_second_value")

Ck Editor does't take value while using jquery why?

I have create a form where I have define ckeditor which is work perfectly. Here I want to submit form value through jQuery but when I click on submit button it does't get ckeditor value on single click where other text field took its value on same click why ckeditor does't ? So, How can I fix this problem? Please help me.
code:
<script>
$(document).ready(function(){
$("#submit").click(function(){
category = $("#category").val();
temp_name = $("#temp_name").val();
template_text = $("#template_text").val();
$.ajax({
type:"POST",
data:{"admin_id":admin_id, "category":category, "temp_name":temp_name, "template_text":template_text},
url:"<?php echo base_url('index.php/'); ?>setting/add_template",
success: function(data){
$("#pro").html(data);
}
});
});
});
</script>
<form method="post">
<label for="name">Category<span class="required">*</span></label>
<input type="text" name="category" id="category" required="required" />
<label for="email">Template Name<span class="required">*</span></label>
<input type="text" name="temp_name" id="temp_name" required="required" />
<label for="email">Template Text<span class="required">*</span></label>
<textarea class="ckeditor" name="template_text" id="template_text"></textarea>
<input type="submit" name="submit" id="submit" class="btn btn-success" value="submit">
</form>

How to pass the input entered in an html form to the action of the same form

<form action="<c:url value = "/deal/#value-that-user-enters#"/>" method="POST">
Kindly enter the deal id : <input type="text" name="dealId">
<input type="submit" value="Get the deal" />
</form>
In the above code, I want the action attribute of form to be /deal/(deal-id-entered-by-user). Is there any way to do it without using any javascript? And is it at all possible even with javascript?

You should be able to do it simply with javascript like this:
document.querySelector('form').onsubmit = function() {
this.setAttribute('action', "/baseurl/" + document.querySelector('input[name=dealId]').value)
}
<form action="/baseurl/" method="POST">
Kindly enter the deal id :
<input type="text" name="dealId">
<input type="submit" value="Get the deal" />
</form>

The best way is to change the form action by javascript:
document.forms[0].action=documnet.getElementById('dealId').value;

You can use it like this:
<form action="<c:url value = "/deal/#value-that-user-enters#"/>" method="POST">
Kindly enter the deal id : <input type="text" class="myBox" name="dealId">
<input type="submit" value="Get the deal" />
</form>
$('.myBox').on('change', function (event) {
var myVal = $(this).val();
$('form').attr('action', function(i, value) {
return value + myVal;
});
});

Remove unchanged input fields from Form while submit

In my web application I have edit profile page. In editprofile page their is many fields like
Name : <input type="text" name="name"/>
Location : <input type="text" class="geolocation" name="location">
Birthdata : <input type="date" name="dob">
Profile Picture : <input type="file" name="photo"/>
I want to send back the data of only the fields which are edited and not all the fields.

I'd normally do something like this on the backend.... but for your requirement you could remove the inputs that haven't changed. When you generate the html you can define an extra data attribute. Here's how I would do that:
HTML:
<form id="myform">
<input type="text" id="Name" data-initial="Foo" value="Foo" />
<input type="text" id="Location" data-initial="Bar" value="Bar" />
<input type="submit" value="Submit" />
</form>
JS:
$("#myform").submit( function() {
$(this).find("input").filter( function() {
$this = $(this);
return $this.data("initial") == $this.val();
}).remove();
});
http://jsfiddle.net/uLe7T/
I added an alert in the fiddle so you can see that they are removed before the form is submitted

jsFiddle
HTML
<input id="test" type="text" value="Some Text" data-value="Some Text">
JS
$('#test').blur(function() {
el = $(this);
if (el.val() != el.attr('data-value')) {
console.log('Edited');
} else {
console.log('Not Edited');
}
});

How to get the Specific Form Field value using JQuery

I have a form
<form id="post_comment" action="cmt.php" method="post">
<input type="hidden" name="type" value="sub" />
<textarea id="body"></textarea>
</form>
I am accessing the form using this code
$("#post_comment").submit(function(event){
var form = $(this);
});
How can I get the value of <input type="hidden" name="type" value="sub" /> from this form.
I tried to get using form.input("type") but it is not working.

$("#post_comment").submit(function(event){
var inputValue = $("input[name='type']",this).val();
});

Try using an id like this:
<form id="post_comment" action="cmt.php" method="post">
<input type="hidden" id='hidden' name="type" value="sub" />
<textarea id="body"></textarea>
</form>
and later:
$("#post_comment").submit(function(event){
var hiddenValue = $("#hidden").val();
});

<form id="post_comment" action="" method="post">
<input type="hidden" class="hidden" name="type" value="sub" />
<textarea id="body"></textarea>
<input type="submit" value="submit" class="submit"/>
</form>
$(".submit").click(function(){
var hiddenVal=jQuery("#post_comment .hidden").val();
//alert(hiddenVal);
});

var form = $(this);
var inputValue = form.find('input[name="type"]').val();
or
var form = $(this);
var inputValue = form.find('input:hidden').val();

Another approach for this
Consider if you have multiple forms with multiple input fields having name attribute than this code will be helpful for you :
$("#formId input[name='valueOfNameAttribute']").val()
$("#formId textarea[name='message']").val()
Hope it'll help somebody.

$("#post_comment").submit(function(event){
var form = $("input[name='type']").val();
})