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>
Related
Pressing the button Index.php page, through sending the data to the script Resultx.php page, which responds with an asynchronous call on the same page Index.php.
index.php
<script>
$(document).ready(function() {
$("#input_form").submit(function(){
var fett = $("#fett").val();
$.ajax({
url: 'resultx.php',
type: "POST",
data: "fett="+fett,
dataType: "html",
success: function(data) {
$("div#resultx").html(data);
}
});
return false;
});
});
</script>
<form name="testa" id="input_form" action="" method="post" class="form-shorten" onsubmit="return checkForm(this);">
<input type="text" name="fett" class="form-control input-lg" id="fett" required><br/>
<button name="invio" type="submit" class="btn" value="Send" onclick="loadDoc()"><span class="glyphicon glyphicon-fire"></span> Send</button>
</form>
I wanted to add options with the "radio function" which may send along with the variable fett, also the variable taskOption to Resultx.php page.
<p><label class="radio-inline select">
<input class="radio-inline select" type="radio" name="taskOption" id="taskOption1" value="taskOption1"> option1</label>
<label class="radio-inline select">
<input class="radio-inline select" type="radio" name="taskOption" id="taskOption2" value="taskOption2"> option2</label></p>
Resultx.php
<?php
$fett = $_POST["fett"]; // ok
$taskOptionOK = $_POST["taskOption"]; // This is what I need
echo "$fett ";
echo "$taskOptionOK ";
?>
I know this is trivial but to me jQuery is kryptonite.
To get the value of a checked checkbox/radio you can try this:
var taskOption = $('input[name=taskOption]:checked').val();
I have a problem with jquery ajax multi form.
every execution is always part of the form at the top, to form the other does not work.
can help me.
this Source Code
<form id="form_action" action="http://www.dom.dom/act/">
<input type="text" name="nama" value="" />
<button type="submit" >Save</buton>
</form>
<form id="form_action" action="http://www.dom.dom/act/">
<input type="text" name="nama" value="" />
<button type="submit" >Save</buton>
</form>
<form id="form_action" action="http://www.dom.dom/act/">
<input type="text" name="nama" value="" />
<button type="submit" >Save</buton>
</form>
<form id="form_action" action="http://www.dom.dom/act/">
<input type="text" name="nama" value="" />
<button type="submit" >Save</buton>
</form>
jquery ajax nya :
$("#form_action").on('submit', function(e){
e.preventDefault();
var link = $(this).attr("action");
var data = $(this).serialize();
$.ajajx({
url:link,
data:data,
type:"POST",
typeData:'html',
cache:false,
success: function(data){
//// bla bla //
}
});
return false;
});
How to use this jquery for multi form..?
When you use an id selector ($('#some-id')) you get only the first element that matches your selector, not an array as you get with other selectors.
Also, it seems that they're all the same form.. What are you trying to achieve? Maybe you can use the same form and just change action attribute or some input in the form.
Another thing, as #dave mentioned in the comments, there's no $.ajajx function in jQuery :-)
I have the following script
$(document).ready(function(){
$("#SoumettreCarte").submit(function(ev) {
alert('ok');
ev.preventDefault();
ville="bonjour";
$.post("../cartes/essai2.php", {ville:ville})
.done(function (response) {
// window.location.replace("http://localhost/projet2/cartes/essai2.php");
});
});
});
When i click on submit, i want it to redirect me to essai2.php, so i use window.location.replace, but then i lose the value of my $_POST. So my problem, is how to load another page after submitting a form with javascript without losing my $_POST. Thanks for your help.
When i try action="essai2.php", i don't get "ville" in my $_POST.
You can make a hidden field like this:
HTML
<input type="hidden" name="ville" id="ville">
You can change the input field's value like this:
JQUERY
$(document).ready(function(){
ville = 'Bonjour';
$("#ville").val(ville);
//or $("[name=ville]").val(ville);
}
you can do like this
<form action="essai2.php" class ="SoumettreCarte" id="SoumettreCarte" method="post" >
<input type="text" name="pays" id="pays">
<input type="hidden" name="lat" value="">
<input type="hidden" name="lng" value="">
<input type="submit" name="submit" id="soumettre" value="soumettre la carte" >
</form>
in jquery part do like this
var lat = "some lattitude";
var lng = "some longtitude";
$("[name=submit]").click(function(e){
$("[name=lat]").val(lat);
$("[name=lng]").val(lng);
});
<form action="essai2.php" class ="SoumettreCarte" id="SoumettreCarte" method="post" >
<input type="text" name="pays" id="pays">
<input type="hidden" name="lat" value="">
<input type="hidden" name="lng" value="">
<input type="submit" name="submit" id="soumettre" value="soumettre la carte" >
</form>
<script type="text/javascript">
$.post("../cartes/essai2.php", data:$("#SoumettreCarte").serialize())
.done(function (response) {
});</script>
you can try this one..
I'm trying to figure out how to copy a users text input in one form field to another. Specifically, when someone fills in their email address in the contact form, it will be duplicated in the mailing list form.
Both these forms are using ajax so there's no concerns about the input text being lost on submit.
This is the code I have:
<div id="contact_form">
<form name="contact" method="post" action="">
<input type="text" name="name" id="name" size="30" value="Name" class="text-input" />
<label class="error" for="name" id="name_error">Please enter your name.</label>
<br />
<input type="text" name="email" id="email" size="30" value="Email" class="text-input" />
<label class="error" for="email" id="email_error">I need your email.</label>
<br />
<textarea rows="10" cols="30" type="textarea" name="message" id="message" value="Message" class="text-input" ></textarea>
<label class="error" for="message" id="message_error">A message is required.</label>
<br />
<input type="submit" name="submit" class="button" id="submit" value="Send" />
</form>
</div>
<div id="details">
<p>some details here, not sure what yet</p>
</div>
<div id="mail_list">
<input type="text" id="mail" value="Your email" name="mail_list" /><input type="submit" name="submit" class="button" id="submit" value="Send" />
</div>
I found this in the Jquery documentation, but couldn't get it to work:
$("#email").optionCopyTo("#mail");
Thanks!
You said you want it in real time. I assume that means while the user is typing, the value should be replicated for each keystroke.
If that's right, try this:
var mail = document.getElementById("mail");
$("#email").keyup(function() {
mail.value = this.value;
});
Or if you want more jQuery:
var $mail = $("#mail");
$("#email").keyup(function() {
$mail.val( this.value );
});
This will update for each keyup event.
I'd probably add a redundant blur event in case there's an autocomplete in the field.
$("#email").blur(function() {
$mail.val( this.value );
});
Since all your fields have unique ids, this is quite straight forward:
$(function() { // <== Doc Ready
$("#email").change(function() { // When the email is changed
$('#mail').val(this.value); // copy it over to the mail
});
});
Try it out with this jsFiddle
.change()
.val()
Is $("#mail") another input box ? It doesn't appear in your HTML (Edit: well it does now, but didn't at first :)
$("#mail").val($("#email").val()) should do what you want.
use keyup and change both.
$("#boxx").on('keypress change', function(event) {
var data=$(this).val();
$("div").text(data);
});
here is the example
http://jsfiddle.net/6HmxM/785/
you can simply do this
$('#mail').text($('#email').val())
Following on from my previous question, which was so quickly answered by Meder it wasn't funny, there's now an additional question that's popped up in the process of making a reusable jQuery form submitted that doesn't take the user away from where they were.
Problem
The jQuery serialize() function is performing its magic on all forms within a page, and not the specific form which was submitted. Example code below.
How do I capture the form's unique name/id, and replace "form" within $("form").serialize() with the name of the target form so only that is serialised?
Form code
<form name="contact" id="contact" action="">
<input name="_recipients" type="hidden" value="joe#fake.com" />
<input name="_subject" type="hidden" value="Title" />
...
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
<label class="error" for="name" id="name_error">This field is required.</label><br />
<label for="email" id="email_label">Return Email</label>
<input type="text" name="email" id="email" size="30" value="" class="text-input" />
<label class="error" for="email" id="email_error">This field is required.</label><br />
<label for="phone" id="phone_label">Return Phone</label>
<input type="text" name="phone" id="phone" size="30" value="" class="text-input" />
<label class="error" for="phone" id="phone_error">This field is required.</label><br/>
<br />
<input type="submit" name="submit" class="button" id="submit_btn" value="Send your suggestion" />
</fieldset>
</form>
jQuery serialise and post
var dataString = $("form").serialize();
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "/_global/assets/scripts/formmail/formmail.asp",
data: dataString,
...
var dataString = $('#contact').serialize()
If you are attaching an event handler to a button or the form's submit event then you can refer to it with this if inside the submit event handler function scope, eg
$('#contact').submit(function() {
alert( $(this).serialize() );
});
I highly recommend reading http://docs.jquery.com/Selectors
By using the "form" string as a selector, you are actually getting all the FORM elements within the page, in order to select only one form, you can:
Get the specific form by its id attribute (using the id selector):
var dataString = $("#contact").serialize();
Or by its name attribute (using the attributeEquals selector):
var dataString = $("form[name=contact]").serialize();
$("#contact").serialize()
Instead of using serialize there's a nice plugin that allows you to post your forms asynchronously. All you have to do is:
$(function() {)
$('#contact').ajaxForm();
});
Also don't forget to assign the correct action to the form, it shouldn't be empty.