To begin, I'm working with 3 languages. HTML, Javascript and PHP. I'm unable to pass user inputted textarea text to a PHP variable which would be used as a message in an email that would be sent out. What I believe to be the problem is that my textarea is actually in a modal window and for some reason I think that is what is screwing things up.
Here is my HTML Code:
<form name="rejectForm" action="">
<div class="rejectModal" title="rejectModal" id="rejectModal" style="display: none; padding:15px ">
<b> Text in the modal window</b>
<center>
<textarea id="rejectArea" name="rejectArea" value="{$rejectAreaNote}" rows="6" cols="43"/> </textarea>
</center>
<br/>
<center>
<input type="button" value="Reject" class="btn success id="submitReject"" id="btnRejectDocumentModal" name="Reject" />
<input class="btn" type="reset" value="Cancel" id="btnCancelSaveModal" />
</center><br/><br/>
</div>
</form>
</div>
JS Code:
$(function() {
$(".submitReject").click(function() {
// validate and process form here
$('.error').hide();
var rejectAreaNote = $("textarea#rejectArea").val();
var noteLength = rejectAreaNote.length;
if (rejectAreaNote == "" || noteLength < 5) {
$("label#rejectArea_error").show();
$("textarea#rejectArea").focus();
return false;
}
var dataString = rejectAreaNote;
alert (dataString);return false;
$.ajax({
type: "POST",
url: "gs_ViewDocument.php",
data: dataString,
success: function() {
$('#reject_form').html("<div id='message'></div>");
$('#message').html("Reject Form Submitted!");
}
});
return false;
});
});
What creates the Modal (JS):
$('.rejectModal').css("background", "lightblue");
$('#btnRejectDocument').bind(isTouchScreen ? "touchstart" : "click", function(){
if (!gsSelection.unselectElem()) return false;
$('.rejectModal').dialog({
modal:true,
resizable:false,
width: 400,
}).removeClass("ui-widget-content");
$(".ui-dialog-titlebar").hide();
return;
});
$('#btnRejectDocumentModal').bind(isTouchScreen ? "touchstart" : "click", function(){
$(this).parents('div.rejectModal').dialog('close');
});
$('#btnCancelSaveModal').bind(isTouchScreen ? "touchstart" : "click", function(){
$(this).parents('div.rejectModal').dialog('close');
});
PHP Code:
if(isset($_POST['Reject'])&&$_POST['Reject']=='Reject')
{
$isReject = true;
RejectAction($DocumentID, $ClientName, $ClientEmail);
$smartyvalues["isReject"] = $isReject;
$smartyvalues["RejectMsg"] = "The document invitation was successfully rejected!";
}
Any help is greatly appreciated.
Try the below is should fix it :
<textarea id="rejectArea" name="rejectArea" rows="6" cols="43"> {$rejectAreaNote}</textarea>
you were closing your textarea tag twice /> and then </textarea>
<input type="button" value="Reject" class="btn success id="submitReject"" id="btnRejectDocumentModal" name="Reject" />
The closing quotes here are wrong (Two quotes after submitReject).
Related
<!-- Page containing form -->
Paragraph
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="//tinymce.cachefly.net/4.2/tinymce.min.js"></script>
<!-- Just be careful that you give correct path to your tinymce.min.js file, above is the default example -->
<script>tinymce.init({selector:'textarea'});</script>
</head>
-->
<div class="container">
<br />
<br />
<h2 align="center">Enter a new paragraph</h2>
<div class="form-group">
<form name="add_paragraph" id="add_paragraph">
<div class="table-responsive">
<table class="table table-bordered
id="dynamic_field">
<tr>
<textarea id = "paragraph" type="text" name="paragraph" placeholder="Enter paragraph text"></textarea>
</tr>
</tr>
</table>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
</div>
</div>
</body> </html> <script> $(document).ready(function(){
$('#submit').click(function(){
$.ajax({
url:"form1_support.php",
method:"POST",
data:$('#add_paragraph').serialize(),
success:function(data)
{
alert(data);
$('#add_paragraph')[0].reset();
}
});
}); }); </script>
require 'db/connect.php';
$number = count($_POST["paragraph_name"]); //it said experience
before, maybe experience_list?
if($number > 0) {
for($i=0; $i<$number; $i++)
{
if(trim($_POST["paragraph_name"] != ''))
{
$paragraph_name = mysqli_real_escape_string($db, $_POST['paragraph_name']);
$paragraph_text = mysqli_real_escape_string($db, $_POST['paragraph']);
$sql = "INSERT INTO paragraph (paragraph_name, paragraph_text)
VALUES( '$paragraph_name', '$paragraph_text')";
mysqli_query($db, $sql);
}
}
echo "Data Inserted"; } else {
echo "Please Enter Your Paragraph."; } ?>
If you are replacing a textarea with TinyMCE then the actual textarea does not get updated automatically unless one of the following happens:
You perform a standard HTML form submission - in this scenario TinyMCE will automatically update the textarea at the start of the form submission process.
You use the triggerSave() API to force TinyMCE to update the textarea.
Try adding a triggerSave() call before you send the AJAX request.
https://www.tiny.cloud/docs/api/tinymce/root_tinymce/#triggersave
<textarea id="editor" name="editor" type="text"></textarea>
tinyMCE.triggerSave();
var content = $("textarea[name=editor]").val();
var formData = new FormData();
formData.append("content", content);
$.ajax({
url: '../boot/newBlog.php',
method: 'POST',
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function(response) {
switch (response){
}
}
});
How to send textfield with jquery.post (ajax) from php without form?
I need send text field using jquery.post . I have this code:
HTML:
<div id="form1" class="enviar"> <p>
URL:
<input type="text" name="url" id="url" />
<p> JSON:
<textarea name="json" id="json" cols="45" rows="5"></textarea>
</p>
<p>
<input type="submit" name="send" value="send" />
</p>
</div>
JQUERY:
$(function(){
$("#send") .submit(function(){
var json = $("#json") .val();
var url = $("#url") .val();
var s = {
"json":json
}
var u = {
"url":url
}
$.ajax({
url:u,
type:'post',
data:s,
beforeSend: function (){
$(".status") .html(" alt=\"Loading ....\" />");
},
success:function(data){
$(".status").html(data);
}
});
});
})
PHP:
include ('conection.php');
$arr = json_decode($_POST['json'],true);
if ($_POST['json']>NULL){
mysql_query("INSERT INTO liciteiro.clientes(client_id,client_descricao,client_razaosocial,client_endereco,client_cidade,client_estado,client_telefone) VALUES ('".$arr[0]['client_id']."','".$arr[0]['client_descricao']."','".$arr[0]['client_razaosocial']."','".$arr[0]['client_endereco']."','".$arr[0]['client_cidade']."','".$arr[0]['client_estado']."','".$arr[0]['client_telefone']."')")or die(mysql_error());
}
else {
die(mysql_error());
}
But this code doesn't send anything.
Try this it will send data after click on send button
Html
<div id="form1" class="enviar">
<p>URL:<input type="text" name="url" id="url" /></p>
<p> JSON:<textarea name="json" id="json" cols="45" rows="5"></textarea></p>
<p><input type="submit" name="send" value="send" id="send" /></p>
</div>
Jquery
$(function(){
$("#send").click(function(){
var json = $("#json") .val();
var url = $("#url") .val();
$.ajax({
url:url,
type:'post',
data:{json: json},
beforeSend: function (){
$(".status") .html(" alt=\"Loading ....\" />");
},
success:function(data){
$(".status").html(data);
}
});
});
});
jQuery:
$('#mybutton').on("click",function(){
var url = $('#url').val()
$.post(url,
{text:$('#json').val(), url:url },
function(data){
alert("it works");
})
})
HTML:
<textarea name="json" id="json" cols="45" rows="5"> </textarea>
<input type="button" id="mybutton" />
You could add id to you button and use
$("#my-button-id").click
Or you can try this
$(function(){
$('#form1 input[type="submit"]').click(function(e){
e.preventDefault();
var json = $("#json") .val();
var url = $("#url") .val();
$.ajax({
url:url,
type:'post',
data:{json: json},
beforeSend: function (){
$(".status") .html(" alt=\"Loading ....\" />");
},
success:function(data){
$(".status").html(data);
}
});
});
});
But you must notice that you can't make ajax queries to other domains, without allow-origin headers.
I have the following script. It works in jsFiddle
The problem is when I fill in the title AND the text box I have to submit TWICE.
Does someone have an idea of what I'm doing wrong?!
form:
<form id="formid" class="form" method="POST" action="/">
<div>
<label class="title">Title</label>
<div id="titleError"></div>
<input type="text" id="title" name="title" value="">
</div>
<div>
<label class="title">Text</label>
<div id="textError"></div>
<textarea name="text" id="text" rows="14" cols="50"></textarea><br />
</div>
<div>
<input class="btn btn-success" type="submit" id="submitButton" name="submitButton" value="Submit">
</div>
JS:
<script type='text/javascript'>
$(document).ready(function() {
$("#formid").submit( function(event) {
tinyMCE.triggerSave();
var title = $('#title').val();
var text = $('#text').val();
if( title.length === 0 || text.length === 0 ){
if( title.length === 0 ){
$("#titleError").html("<p>Title verplicht</p>");
event.preventDefault();
}
if( text.length === 0 ){
$("#textError").html("<p>Text verplicht</p>");
event.preventDefault();
}
$("html, body").animate({ scrollTop: 0 }, 600);
}
else{
tinyMCE.triggerSave();
/* stop form from submitting normally */
event.preventDefault();
/* Send the data using post */
var posting = $.post( 'http://domain.nl/admin/pages/create', {
title: $('#title').val(),
text: $('#text').val()
});
/* Put the results in the show-content div */
posting.done(function( data ) {
//alert(data);
$.ajax({
url: "<?php echo base_url() ?>/admin/pages",
type: 'GET',
success: function(data) {
$("#show-content").hide().html( data).fadeIn(1500);
}
,
error: function() {
alert("error");
}
});
});
}
});
});
</script>
The solution:
I add this
tinyMCE.triggerSave();
after
$("#formid").submit( function(event) {
and now it works correctly!
To begin, I'm working with 3 languages. HTML, Javascript and PHP. I'm unable to pass user inputted textarea text to a PHP variable which would be used as a message in an email that would be sent out. What I believe to be the problem is that my textarea is actually in a modal window and for some reason I think that is what is screwing things up.
Here is my HTML Code:
<div class="rejectModal" title="rejectModal" id="rejectModal" style="display: none; padding:15px ">
<form name="rejectForm" action="">
<textarea id="rejectArea" name="rejectArea" rows="6" cols="43">{$rejectAreaNote}</textarea>
<input type="button" value="Reject" class="btn success" id="submitReject" name="Reject" />
<input class="btn" type="reset" value="Cancel" id="btnCancelSaveModal" />
</form>
</div>
JS Code:
$(function() {
$(".submitReject").click(function() {
// validate and process form here
$('.error').hide();
var rejectAreaNote = $("textarea#rejectArea").val();
var noteLength = rejectAreaNote.length;
if (rejectAreaNote == "" || noteLength < 5) {
$("label#rejectArea_error").show();
$("textarea#rejectArea").focus();
return false;
}
var dataString = rejectAreaNote;
alert (dataString);
//return false;
$.ajax({
type: "POST",
url: "gs_ViewDocument.php",
data: {
"Reject" : "Reject",
"rejectAreaNote" : "rejectAreaNote"
},
success: function() {
$('#reject_form').html("<div id='message'></div>");
$('#message').html("Reject Submitted!");
}
});
return false;
});
});
What creates the Modal (JS):
$('.rejectModal').css("background", "lightblue");
$('#btnRejectDocument').bind(isTouchScreen ? "touchstart" : "click", function(){
if (!gsSelection.unselectElem()) return false;
$('.rejectModal').dialog({
modal:true,
resizable:false,
width: 400,
}).removeClass("ui-widget-content");
$(".ui-dialog-titlebar").hide();
return;
});
$('#btnRejectDocumentModal').bind(isTouchScreen ? "touchstart" : "click", function(){
$(this).parents('div.rejectModal').dialog('close');
});
$('#btnCancelSaveModal').bind(isTouchScreen ? "touchstart" : "click", function(){
$(this).parents('div.rejectModal').dialog('close');
});
PHP Code:
if(isset($_POST['Reject'])&&$_POST['Reject']=='Reject')
{
$isReject = true;
RejectAction($DocumentID, $ClientName, $ClientEmail);
$smartyvalues["isReject"] = $isReject;
$smartyvalues["RejectMsg"] = "successfully rejected!";
}
Also pretty new tot his
Any help is greatly appreciated.
Textarea does not have a value attribute. If you want to add a value to your textarea, add it inside the tag: <textarea>value</textarea>
So try changing it to this:
<textarea id="rejectArea" name="rejectArea" rows="6" cols="43"/>{$rejectAreaNote}</textarea>
if(isset($_POST['Reject']) ...
You are not sending this to the server. Instead, you're sending "dataString", which is just the text from textarea. What you should do instead is send an object with needed fields:
$.ajax({
type: "POST",
url: "gs_ViewDocument.php",
data: {
"Reject" : "Reject",
"rejectAreaNote" : "rejectAreaNote"
},
success: function() {
$('#reject_form').html("<div id='message'></div>");
$('#message').html("Reject Submitted!");
}
});
I'm still not sure what your code is supposed to do and how it glues together, but this here is definitely wrong.
I have a feedback form in a pop-up div that otherwise works fine but processes SQL twice when the form results in error at first instance.
This is the html form:
<div id="stylized" class="myform">
<form id="form" method="post" name="form">
<p>Report:
<select id="fbtype" name="fbtype">
<option>Bug</option>
<option>Suggestion</option>
<option>Discontentment</option>
<option>Appreciation</option>
</select>
</p>
<p>Brief description:
<textarea name="comments" id="comments" cols="45" rows="10"></textarea>
</p>
<span class="error" style="display:none">Please describe your feedback.</span>
<span class="success" style="display:none">We would like to thank you for your valuable input.</span>
<input type="button" value="Submit" class="submit" onclick="feedback_form_submit()"/>
</form>
</div>
The feedback_form_submit() function is:
function feedback_form_submit() {
$(function() {
$(".submit").click(function() {
var fbtype = $("#fbtype").val();
var comments = $("#comments").val();
var dataString = 'fbtype='+ fbtype + '&comments=' + comments;
if(fbtype=='' || comments=='' )
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "processfeedback.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
});
}
And the processfeedback.php has:
include "./include/session_check.php";
include_once "./include/connect_to_mysql.php";
if (isset($_POST['fbtype'])){
$userid =$_SESSION['id'];
$fbtype=$_POST['fbtype'];
$comments=$_POST['comments'];
$sql = mysql_query("INSERT INTO feedback (userid, type, comments)
VALUES('$userid','$fbtype','$comments')") or die (mysql_error());
}
Could anyone figure out why does the form submits twice? And any suggestion to control this behaviour?
If this is actually the code you're using, you seem to have wrapped your onclick function around the $.click event-adding function:
function feedback_form_submit() {
$(function() {
// This adds a click handler each time you run feedback_form_submit():
$(".submit").click(function() {
// ... //
return false;
});
});
}
When I tried this on jsFiddle.net, I clicked Submit the first time and nothing happened, then the second time it posted twice, the third click posted three times, etc.
You should just keep it simple: take out the onclick attribute:
<input type="button" value="Submit" class="submit" />
and remove the feedback_form_submit() wrapper:
$(function() {
$(".submit").click(function() {
// ... //
return false;
});
});
This way the $.click handler function will be applied just once, when the page loads, and will only run once when Submit is clicked.
EDIT:
If your form is loaded via AJAX in a popup DIV, you have two options:
Keep your onclick but remove the $.click wrapper instead:
function feedback_form_submit() {
// ... //
}
and
<input type="button" value="Submit" class="submit" onclick="feedback_form_submit()" />
Note that you only need to return false if you're using <input type="submit" ... >; when using <input type="button" ... >, the browser does not watch the return value of onclick to determine whether to post the form or not. (The return value may affect event propagation of the click, however ...).
Alternatively, you can use jQuery's $.live function:
$(function() {
$('.submit').live('click',function() {
// ... //
});
});
and
<input type="button" value="Submit" class="submit" />
This has the effect of watching for new DOM elements as they are added dynamically; in your case, new class="submit" elements.
Your feedback_form_submit function doesn't return false and on submit click you're also posting to the server. There is no need to have onClick in:
<input type="button" value="Submit" class="submit" onclick="feedback_form_submit()"/>
Change that to:
<input type="button" value="Submit" class="submit"/>
And change your code to:
// Update: Since you're loading via AJAX, bind it in the success function of the
// AJAX request.
// Let's make a function that handles what should happen when the popup div is rendered
function renderPopupDiv() {
// Bind a handler to submit's click event
$(".submit").click(function(event) {
var fbtype = $("#fbtype").val();
var comments = $("#comments").val();
var dataString = 'fbtype='+ fbtype + '&comments=' + comments;
if(fbtype=='' || comments=='' )
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "processfeedback.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
// This is the success function for the AJAX request that loads the popup div
success: function() {
...
// Run our "onRender" function
renderPopupDiv();
}