i need your help. i have a working form that uses ajax to send textarea posted value to a php file.
I have added emoji to that textarea input and everything is okay. But am facing a problem, when a form is submitted the textarea does not empty automatically.
I need the input to empty after the confirmation is set, but i don't know how.
HTML PAGE
<html>
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js">
</script>
<script>
$(document).ready(function() {
$("#formsubmit").click(function() {
var msg = $("#emojionearea1").val();
if ( msg == '') {
alert("field empty");
} else {
// Returns successful data submission message when the entered information is stored in database.
$.post("sss.php", {
msg1: msg
}, function(data) {
//alert(data);
$('#status').html(data);
$('#di_pr')[0].reset(); // To reset form fields
});
}
});
});
</script>
</head>
<body>
<p id="status"></p>
<form action="" id="di_pr" method="post" name="myForm" enctype="multipart/form-data">
<div class="row">
<div style="width: 303px;" class="span6">
<textarea id="emojionearea1" name="rby_message" placeholder="type here"></textarea>
</div><br/>
<div class="uhn">
<input type="button" value="Send" name="tlaj_submit" id="formsubmit" class="gpfy" >
</div>
</div>
<script>
$(document).ready(function() {
$("#emojionearea1").emojioneArea({
pickerPosition: "left",
tonesStyle: "bullet"
});
})
</script>
</form>
</body>
</html>
PHP PAGE
<?php
$hssh = $_POST['msg1'];
echo '<p>send message: '.nl2br($hssh).'</p>';
?>
The form rests but the input is not emptied.
$("#emojionearea1").data("emojioneArea").setText('');
Add this line inside the callback function :$("#emojionearea1").val('');
in the following way:
$.post("sss.php", {
msg1: msg
}, function(data) {
//alert(data);
$('#status').html(data);
$('#di_pr')[0].reset(); // To reset form fields
$("#emojionearea1").val('');//line to be added
});
Related
I want a validation onkeyup from an input form, I've made a jquery. I'm having a hard time finding why is it not checking? I need to go to a php page in checking. What could be wrong to my code that it don't work?
<html>
<head>
<title>
reg
</title>
</head>
<body>
<form method="post">
<input type="text" name="name" onkeyup="check_user()" id="name"/><div id="checking">Checking</div>
<button type="submit" name="submit">Submit<button>
</form>
<script src="jquery-3.3.1.min.js"></script>
<script>
document.getElementById("submit").disabled=true;
function check_user(){
var name = document.getElementById("name").value;
$.post("user_check.php",
{
user: name
},
function(data,status){
if(data=='<p style="color:red">Name contains a number</p>'){
document.getElementById("submit").disabled=true;
}
else{
document.getElementById("submit").disabled=false;
}
document.getElementById("checking").innerHTML=data;
}
);
}
</script>
</body>
</html>
user_check.php
<?php
if (isset($_POST['user'])) {
if(preg_match('/^\d+$/', $_POST['user'])) {
echo '<p style="color:red">Name contains a number</p>';
} else {
echo '<p style="color:green"> You can take this name</p>';
}
}
?>
You can validate the text box by adding the pattern attribute like this pattern="[a-zA-Z]+"
<input type="text" name="name" pattern="[a-zA-Z]+" title="please just add strings" id="name"/>
i also notice in your code you did not add the id for the submit button thats why your submit button is not disabled, your code should like this for submit button.
Submit
1- first add the id attribute of the submit button id="submit"like this
<button type="submit" id="submit" name="submit">Submit<button>
2- update the code on user_check.php
if (isset($_POST['user'])) {
if(!preg_match('/^([^0-9]*)$/', $_POST['user'])) {
echo '<p style="color:red">Name contains a number</p>';
} else {
echo '<p style="color:green"> You can take this name</p>';
}
}
I want to validate my form, and have created a formValidation function with onsubmit, that calls a function from a js.js file. When I click submit, however, I get this error:
Here is the necessary form code:
<form action="send-email.php" id="callback" class="popup-form" method="post" onsubmit="return validateForm()">
// Form content
</form>
Here is the function code:
function validateForm() {
console.log("hellloooooo this is working");
// var captcha_response = grecaptcha.getResponse();
// if(captcha_response.length === 0)
// {
// // Captcha is not Passed
// console.log("not working");
// return false;
// }
// else
// {
// // Captcha is Passed
// console.log("working");
// return true;
// }
}
The script tag is within the body tag, so it should work.. where am I going wrong??
Please use input type='submit' in form. It will work in java script as well.
Add submit input in the form as below
<form action="send-email.php" id="callback" class="popup-form" method="post" onsubmit="return validateForm()"><input type="submit">
</form>
And in java script write your validation function as below
<script type="text/javascript">
function validateForm(){
console.log('ddd');
return false;
}
</script>
You should be sure that your script tag above your form tag
This seems to be working. Don't see any issue here
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
</head>
<body>
<script>
function validateForm() {
console.log("hellloooooo this is working");
}
</script>
<form id="callback" class="popup-form" method="post" onsubmit="return validateForm()">
// Form content
<input type="Submit">
</form>
</body>
</html>
i have a form which i am trying to send values through ajax. But i receive following error:
Uncaught TypeError: Illegal invocation
I am stuck and can't find where am i wrong. Any suggestions please?
Ajax
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" </script>
<script type="text/javascript">
$(document).ready(function() {
$("#submit_custom").click(function() {
e.preventDefault();
var postData = new FormData();
postData.append('file[]', $('input[type=file]')[0].files[0]); // after this line
postData.append('trxid', $('input[name=trxid]'));
postData.append('orderid', $('input[name=orderid]'));
postData.append('custid', $('input[name=custid]'));
if(proceed)
$.post('upload.php', post_data, function(response){
if(response.type == 'error'){ //load json data from server and output message
output = '<div class="error">'+response.text+'</div>';
}else{
output = '<div class="success">'+response.text+'</div>';
$("#upload_form").slideUp(); //hide form after success
}
$("#upload_form").hide().html(output).slideDown();
}, 'json');
});
});
});
</script>
</head>
<body>
<h2>Hello <?php echo $user ?> </h2> <p> "You have successfully done purchasing process.</p>
<div id="upload_form">
<p>To send your size details for your order please upload the following file:</p>
<p>Download custom size form Provide us your custom size: File.pdf</p>
<form enctype="multipart/form-data" action="" method="post">
<input type="text" name="trxid" value="<?=$trx?>">
<input type="text" name="orderid" value="<?=$orderid?>">
<input type="text" name="custid" value="<?=$customerid?>">
<input type="file" name="file">
<input type="submit" id="submit_custom">
</form>
</div>
</body>
</html>
You are getting Illegal invocation because jQuery can't serialize the postData object for $.post.
I think you need to add .val().
postData.append('file[]', $('input[type=file]')[0].files[0].val()); // after this line
postData.append('trxid', $('input[name=trxid]').val());
postData.append('orderid', $('input[name=orderid]').val());
postData.append('custid', $('input[name=custid]').val());
I have this form which is supposed to send the info to the database for a username search. I'm putting together a search function for private servers in our student dormitory. We have a dude with username <lol> and it seems we can't search him. Other usernames search just fine. I'm I missing something?
This is the form.php file:
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.validation/1.13.1/jquery.validate.js"></script>
<script src="//cdn.jsdelivr.net/jquery.validation/1.13.1/jquery.validate.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.validation/1.13.1/additional-methods.js"></script>
<script>
$(document).ready(function() {
$('#checkForm').validate({
rules: {
IpSearch: {
ipv4:true,
require_from_group: [1, ".required_group"]
},
UserName: {
minlength: 3,
require_from_group: [1, ".required_group"]
}
},
submitHandler: function(form) {
console.log( $("#checkForm").serialize());
$('#results').text( $("#checkForm").serialize());
$.post('file.php', $("#checkForm").serialize(), function(data) {
$('#checkResult').html(data);
});
}
});
});
</script>
</head>
<body>
<form role="form" id="checkForm" name="checkForm" method="post">
<div class="form-group">
<label>Internal IP:</label>
<input id="IpSearch" name="IpSearch" placeholder="Enter IP" class="form-control optional required_group" type="text">
</div>
<div class="form-group">
<label>Username</label>
<input id="UserName" name="UserName" value="<?php if(!empty ($_POST) && isset($_POST['checkThis'])){echo $_POST['checkThis']; } else{}?>" placeholder="admin" class="form-control optional defaultInvalid required_group" type="text">
</div>
<button id="search" name="search" value="doSearch" class="btn btn-info">Search</button>
</form>
<div id="results"></div>
<div id="checkResult"></div>
</body>
</html>
and this is the file.php beginning:
<?php
echo "<pre>";
var_dump($_POST);
echo "</pre>";
// .... continues but irrelevant since I'm not getting any post data
On clicking the button, I get this in browser console:
"IpSearch=&UserName=%3Clol%3E&search=doSearch"
on #results I get:
IpSearch=&UserName=%3Clol%3E&search=doSearch
on #checkResult I get:
array(3) {
["IpSearch"]=>
string(0) ""
["UserName"]=>
string(5) ""
["search"]=>
string(8) "doSearch"
}
it doesn't show <lol> because it considered HTML tag when jquery print it.
you must escape html entities before printing it.
so change this line: $('#checkResult').html(data); to $('#checkResult').text(data);
so this will print <lol> as text not html
Try vardumping $_GET
var_dump($_GET)
And post results here :)
Looks like your script doesn't prevent default action and form gets submitted anyway
I have been reading through many articles relating to this but they only show how to prevent anything happening not only the page refresh.
But I need to have it so when enter key is pressed the text field is submitted via a ajax request without the page refresh, like how I can use the input type button with a onclick event.
iv added a very basic mock up below to help explain what I mean.
<html>
<head>
<title>Demo</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js'></script>
</head>
<body>
<form id="someForm" action="" method="post">
<!--
below is an example of the text field
id like to submit but without the
page refreshing when "Enter" is pressed
-->
<input type="text" id="demoText"/>
<button type="button" id="postBtn" onclick="postText()">Post</button>
</form>
<script>
function postText() {
alert("Random Function...");
}
</script>
</body>
</html>
You can do something like this to capture the keypress event of a control - say an input box.
$(function() {
$('#demoText').keypress(function (e) {
var key = e.which;
if(key == 13) // enter pressed
{
postText();
}
});
});
There are more examples here
To post using Ajax, do something like this:
var postText = function() {
var stuff = $.post("serverpage.php", function() {
alert( "success" );
}).fail(function() {
alert("error");
}
)};
No need for any script, the browser will do it for you if you have a submit button ( not type="button") and bind your function to submit event of the form
<form id="someForm" action="" method="post" onsubmit="postText();return false">
<input type="text" id="demoText" />
<button type="submit" id="postBtn">Post</button>
</form>
DEMO
After the advise given here this is what i came up with and it is fully functional, so thought id add it here as an answer so anyone else with a similar question can view my solution.
<html>
<head>
<title>Demo</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
</head>
<body>
<form id="form">
<input type="text" class="input" id="chatTxt" placeholder="Chat post..."/>
<input type="button" id="submit" value="Submit"/>
</form>
<script type="text/javascript">
$('form').keypress( function( e ) {
var code = e.keyCode || e.which;
if( code === 13 ) {
e.preventDefault();
$( "#submit" ).click();
};
})
$(document).ready(function(){
$("#submit").click(function(){
var ChatText = $("#chatTxt").val();
if(ChatText ==''){
alert("Chat text is empty!");
}
else{
$.post("demo.php",{ ChatText1: ChatText },
function(data) {
alert(data);
$('#form')[0].reset();
});
}
});
});
</script>
</body>
</html>