We Keep Coding

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>

sending form via ajax, html node select for data sending

with this code
<script>
// this is the class of the submit button
$(".update_form").click(function() { // changed
$.ajax({
type: "POST",
url: "approve_test.php",
data: $(this).parent().serialize(), // changed
success: function(data)
{
alert(data); // show response from the php script.
}
});
return false; // avoid to execute the actual submit of the form.
});
</script>
from here Targeting multiple forms to send via ajax (jquery)
user can send data of specific form.
In this example structure is like this
<form id="form1" method="post">
<input type="text" id="name1" name="value" value="">
<input type="submit" class="update_form" value="Save Changes"> <!-- changed -->
</form>
<form id="form2" method="post">
<input type="text" id="name2" name="value" value="">
<input type="submit" class="update_form" value="Save Changes"> <!-- changed -->
</form>
In my case I've a bit more complicated Html structure.
<form id="w0" action="/users/new_article" method="post" enctype="multipart/form-data">
<input type="hidden" name="_csrf" value="yeUp"> <div class="form-group field-uploadform-file">
<label class="control-label" for="uploadform-file">File</label>
<input type="hidden" name="UploadForm[file]" value=""><input type="file" id="uploadform-file" name="UploadForm[file]">
<div class="help-block"></div>
</div>
<!-- <div class="file-input btn btn-block btn-primary"> -->
<div class="file-input btn btn-block btn-primary">
+ add files
<input type="file" name="files" id="image_upload">
</div>
</form>
I'm monitoring change of #image_upload.
But it is not child of form tag, thus I cannot use this code from first example
data: $(this).parent().serialize(), // changed
So my question is how do I must write my code so the form submits ?

You can't submit files as using ajax, as easily as you could submit just text.
You must use XHR.
Here's a solution: How can I upload files asynchronously?
Take note that you're pretty much out of luck if you need to support IE8/9.

Working with multiple ajax forms in same page

After a suggestion from this question Multiple forms in in a page - load error messages via ajax
I am trying to work multiple forms in same page. I am trying to append error messages in to the respective input div classes.
I don't want to have different form ids because i need to have single id in the jquery then.
I have forms like
<form class="myform" name="myform">
<div class="name">
<input type="text" name="name" />
</div>
<div class="message">
<input type="text" name="message" />
</div>
<input type="submit" name="submit" />
</form>
<!-- second form -->
<form class="myform" name="myform">
<div class="name">
<input type="text" name="age" />
</div>
<div class="message">
<input type="text" name="gender" />
</div>
<input type="submit" name="submit" />
</form>
and the jQuery part is
$('.myform').on('submit', function(event) {
postform = $(this);
event.preventDefault();
$(this).ajaxSubmit({
url: 'process.php',
type: 'post',
dataType: 'json',
success: function( response ){
$.each(response, function(index, element){
var msgdiv = postform.children('div.' + divclass).append('<span>'+message+'</span>');
}
}
});
});
however the ajax part is working but the error messages do not load in the div tags as defined in the jQuery 'div.' + divclass. Any help would be appreciated

Like this?
postform.find('.message').append('<span>' + message + '</span>');

How do I clear the previous text field value after submitting the form with out refreshing the entire page?

I am doing a web application using javascript and html that has a form containing a text field, button. When I enter a number in that text field and submit by clicking on that button, text areas are generated dynamically. Once my form is submitted some text areas are created but if I am not satisfied with existing text areas then again I enter some value with out refreshing page. But the text field value entered previously prevails showing the new text areas below the existing text areas on the page.
So, how do I clear the value with out refreshing the page.
<div>
<html>
<input type="text" name = "numquest" id ="numquest" value="" size="5" style="" disabled>
<input type="button" value="submit" onclick="getFields();">
</div>
</html>
<javascript>
var num_q=document.getElementById('numquest').value;
//code for dynamic creation
</javascript>

try this:
Using jQuery:
You can reset the entire form with:
$("#myform")[0].reset();
Or just the specific field with:
$('#form-id').children('input').val('')
Using JavaScript Without jQuery
<input type="button" value="Submit" id="btnsubmit" onclick="submitForm()">
function submitForm() {
// Get the first form with the name
// Hopefully there is only one, but there are more, select the correct index
var frm = document.getElementsByName('contact-form')[0];
frm.submit(); // Submit
frm.reset(); // Reset
return false; // Prevent page refresh
}

You can set the value of the element to blank
document.getElementById('elementId').value='';

Assign empty value:
document.getElementById('numquest').value=null;
or, if want to clear all form fields. Just call form reset method as:
document.forms['form_name'].reset()

you can just do as you get that elements value
document.getElementById('numquest').value='';

<form>
<input type="text" placeholder="user-name" /><br>
<input type=submit value="submit" id="submit" /> <br>
</form>
<script>
$(window).load(function() {
$('form').children('input:not(#submit)').val('')
}
</script>
You can use this script where every you want.

It will clear all the fields.
let inputs = document.querySelectorAll("input");
inputs.forEach((input) => (input.value = ""));

HTML
<form id="some_form">
<!-- some form elements -->
</form>
and jquery
$("#some_form").reset();

I believe it's better to use
$('#form-id').find('input').val('');
instead of
$('#form-id').children('input').val('');
incase you have checkboxes in your form use this to rest it:
$('#form-id').find('input:checkbox').removeAttr('checked');

.val() or .value is IMHO the best solution because it's useful with Ajax. And .reset() only works after page reload and APIs using Ajax never refresh pages unless it's triggered by a different script.

I had that issue and I solved by doing this:
.done(function() {
$(this).find("input").val("");
$("#feedback").trigger("reset");
});
I added this code after my script as I used jQuery. Try same)
<script type="text/JavaScript">
$(document).ready(function() {
$("#feedback").submit(function(event) {
event.preventDefault();
$.ajax({
url: "feedback_lib.php",
type: "post",
data: $("#feedback").serialize()
}).done(function() {
$(this).find("input").val("");
$("#feedback").trigger("reset");
});
});
});
</script>
<form id="feedback" action="" name="feedback" method="post">
<input id="name" name="name" placeholder="name" />
<br />
<input id="surname" name="surname" placeholder="surname" />
<br />
<input id="enquiry" name="enquiry" placeholder="enquiry" />
<br />
<input id="organisation" name="organisation" placeholder="organisation" />
<br />
<input id="email" name="email" placeholder="email" />
<br />
<textarea id="message" name="message" rows="7" cols="40" placeholder="сообщение"></textarea>
<br />
<button id="send" name="send">send</button>
</form>

You can assign to the onsubmit property:
document.querySelector('form').onsubmit = e => {
e.target.submit();
e.target.reset();
return false;
};
https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onsubmit

Putting specific element into variable

how can i get a specific element of a text input into a variable via javascript, in other words take the example below
<form id="123">
<input type="text" id="supply_qty" />
<input type="submit" name="submit" id="123" />
</form>
How do i get the element within the text input into a variable when the submit button is clicked, the problem i have is that i have multiple instances of the code above, with lots of text inputs, so i only want to get the element specific to the submit button clicked. Hopefully you will get what i mean. The reason i need this done via JavaScript and not php etc... is that i later want to use ajax with it, but for the moment i just need the variable.
Thanks

The most easiest way is to give and id to the element and user getElementById() method to grab the element on variable. Just like what you are doing right now
Simple Example:
var button = document.getElementyById("123");
button.onclick = function() {
var text = document.getElementById('supply_qty'); //now you got your element in varaiblle
};
Using jQuery make a slight change to your markup. I am just going to add some classes.
<form>
<input type="text" class="textbox" />
<input type="submit" class="submit" name="submit" />
</form>
then
$(".submit").click(function() {
var txtbox = $(this).parent("form").children(".textbox")[0];
});
Or, it might be better to bind to the submit handler of the form, on that case, give a common class to the form.
<form class="tinyforms">
<input type="text" class="textbox" />
<input type="submit" class="submit" name="submit" />
</form>
Then
$('.tinyforms').submit(function() {
var txtbox = $(this).children(".textbox")[0];
});

If you accept using jQuery you can do this:
DOM
<form class="form" action="false">
<input type="text" value="some input" name="textInput" />
<input type="text" value="some text" name="textInput2" />
<input type="submit" class="sumbit" value="Send" />
<div id="results"></div>
</form>​​​​​​​​​​​​​​​​​​​
And JavaScript
$(".form").submit( function(){
var inputs = $(this).serializeArray();
$.each(inputs , function(i, input){
$("#results").append(input.value + "<br />");
});
return false;
} );​
EDIT: Updated code and Fiddle: http://jsfiddle.net/65Xtp/4/