so, i´m trying to send some information to database with AJAX/PHP but without success, i´ve seen some codes from here but they are not working and I just get this error
TypeError: 'stepUp' called on an object that does not implement interface HTMLInputElement.
HTML
<form action="javascript:void;" id="putz" class="putz" method="POST" onsubmit="send()" enctype="multipart/form-data" >
<div class="box">
<input type="text" name="name" id="name" required>
<label>Name</label>
</div>
<div class="box">
<input type="text" name="email" id="email" required>
<label>Email</label>
</div>
<div class="box">
<input type="text" name="pass" id="pass" required>
<label>Password</label>
</div>
<div class="Box">
<p style="color: red; text-align: left; margin-left: 15px">Photo</p>
<input type="file" name="photo" style="margin-right: 140px; color: red;">
</div>
<button id="submit" type="submit">Submit</button>
</form>
And here is my ajax/javascript
</script>
<script type="text/javascript">
function send()
{
var name=document.getElementById( "name" );
var email=document.getElementById( "email" );
var pass=document.getElementById( "pass" );
$.ajax({
type: 'post',
url: 'send.php',
data: {
name:name,
email:email,
pass:pass,
},
});
}
</script>
and the send.php code
<?php
include_once('conn.php');
$name = $_POST['name'];
$email = $_POST['email'];
$pass = $_POST['pass'];
$photo = $_FILES['photo']['name'];
$tmp_name = $_FILES['photo']['tmp_name'];
move_uploaded_file($tmp_name, "img/foto_perfil/" . $photo);
$sql = "INSERT INTO user (name, email, photo, pass) VALUES ('$name', '$email','$photo', '$pass')";
mysqli_query($conn, $
You didn't have the JQuery library referenced prior to your
invocation of $.ajax().
You are referring to the actual HTML Elements as the data to pass
when you should be passing the values of those elements.
You also have trailing commas after the last key/value pair in your
data object and after the data key itself.
I would also rename any/everything that you named name as this can
cause conflicts with the Global window.name property.
(FYI) You aren't using the label element correctly. You either wrap
it around the form element that it is a label for or you give it a
for attribute with a value of the id of the form element that it
is a label for.
function send() {
// Get the values of the elements, not the elements themselves:
var userName = document.getElementById( "userName" ).value;
var email = document.getElementById( "email" ).value;
var pass = document.getElementById( "pass" ).value;
$.ajax({
type: 'post',
url: 'send.php',
data: {
userName: userName,
email: email,
pass: pass
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" id="putz" class="putz"
method="POST" onsubmit="send()" enctype="multipart/form-data" >
<div class="box">
<input type="text" name="userName" id="userName" required>
<label for="userName">Name</label>
</div>
<div class="box">
<input type="text" name="email" id="email" required>
<label for="email">Email</label>
</div>
<div class="box">
<input type="text" name="pass" id="pass" required>
<label for="pass">Password</label>
</div>
<div class="Box">
<p style="color: red; text-align: left; margin-left: 15px">Photo</p>
<input type="file" name="photo" style="margin-right: 140px; color: red;">
</div>
<button id="submit" type="submit">Submit</button>
</form>
Related
can somebody please tell me why this code is not working I want to sent form data to PHP by post method but my PHP is not receiving any request
here is my signup form
signupmodal.php
<form action="<?php htmlentities($_SERVER['PHP_SELF']) ?>" method="post" id="signupForm">
<div class="form-group">
<label for="forUserName">User Name:</label>
<input type="text" name="username" id="username" class="form-control" placeholder="Enter User Name" aria-describedby="helpId">
</div>
<div class="form-group">
<label for="forEmail">Email:</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Enter Your Email" aria-describedby="helpId">
</div>
<div class="form-group">
<label for="">password:</label>
<input type="password" name="password" id="password" class="form-control" placeholder="Enter Password" aria-describedby="helpId">
</div>
<div class="form-group">
<label for="forConfirmPassword">Confirm Password</label>
<input type="password" name="cpassword" id="cpassword" class="form-control" placeholder="Enter Confirm Password" aria-describedby="helpId">
</div>
<input type="submit" class="btn btn-primary" value="SignUp" id="subbtn" onclick="myFunction()">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
<?php echo json_encode($_POST);
// echo $_POST['email'];
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$username = $_POST['username'];
$email = $_POST['email'];
$password = $_POST['password'];
$cpassword = $_POST['cpassword'];
echo $username;
if ($password == $cpassword) {
//code
} else
echo '<div class="alert alert-danger" role="alert">
<strong>danger</strong>
</div>';
} ?>
</div>
script.js
function myFunction() {
console.log(window.location.href);
$('form').on('submit', function (event) {
$.ajax({
type: 'POST',
url: 'includes/signupmodal.php',
data: $('form#signupForm').serialize(),
success: function () {
data = $('form#signupForm').serialize();
console.log(data);
},
});
event.preventDefault();
});
}
I want to submit my data using ajax without loading the page so, please tell me where I am wrong
You are only running myFunction() when you click the submit button and by then it's too late to add a submit event listener.
I suggest you add your listener when the document is ready.
Remove the onclick="myFunction()" from your submit button and add this to your script
jQuery(function() {
myFunction() // executes when the document has completely loaded
})
// or even just
// jQuery(myFunction)
See https://api.jquery.com/jquery/#jQuery3
Here is the HTML: Line 18 below is not carrying over to $_POST['storename'] after Submit is hit. All other text fields are carrying over just fine. The only difference is that this autofills with data from database using PHP and AJAX. I've attached all coding in reference to that field.
Here's the link to the site: http://drmwebdesign.com/project002/product-insert.php
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<div class="row uniform 50%">
<div class="6u 12u(mobilep)">
<input type="text" name="pname" id="pname" value="<?php echo $pname;?>" placeholder="Product Name" />
</div>
<div class="6u 12u(mobilep)">
<input type="text" name="brand" id="brand" value="<?php echo $brand;?>" placeholder="Product Brand" />
</div>
<div class="6u 12u(mobilep)">
<input type="text" name="price" id="price" value="<?php echo $price;?>" placeholder="Product Price" />
</div>
<div class="6u 12u(mobilep)">
<input type="text" name="upc" id="upc" value="<?php echo $upc;?>" placeholder="Product UPC" />
</div>
</div>
<div class="row uniform">
<div class="12u">
<input type="text" name="storename" id="storename" class="form-control" placeholder="Enter Store Name" />
<div id="storeList"></div>
</div>
<div class="12u">
<ul class="actions align-center">
<li><input type="submit" value="Submit Product" /></li>
</ul>
</div>
</div>
</form>
<script>
$(document).ready(function(){
$('#storename').keyup(function(){
var query = $(this).val();
if(query != '')
{
$.ajax({
url:"php/storelist.php",
method:"POST",
data:{query:query},
success:function(data)
{
$('#storeList').fadeIn();
$('#storeList').html(data);
}
});
}
});
$(document).on('click', 'li', function(){
$('#storename').val($(this).text());
$('#storeList').fadeOut();
});
});
</script>
Try the following :
1) Use the chrome network to check the request / response
2) If the field contains a long data check the max post size
3) If the field is a list, and you are selecting multiple choices you need to check this question
4) check if multiple fields have the same name/id
$(document).on('click', 'li', function(){
$('#storename').val($(this).text());
$('#storeList').fadeOut();
});
Triggers when you press the submit button, setting #storename value to nothing.
Add a class to the store names and target onclick using that.
I have been using formspree on one of my sites. Everything was working fine at first then the form messages weren't sending out emails. I see the name and the message when the form is sent out, but the email just isn't registering. I looked at the shortcode and don't see anything on my end. Does anyone see the issue here?
I also have my "I'm Looking for a quote" wording overlapping my check box in most browsers. I put a p in and took it out, but I think that might be messing with the code. Anything thoughts on this as well?
Here's the HTML:
<form role="form" id="formspree" method="post">
<div class="form-group">
<label class="sr-only" for="contact-name">Your Name</label>
<input type="text" name="name" placeholder="Your Name" class="contact-email form-control" id="contact-email">
</div>
<input type="text" name="_gotcha" style="display:none">
<div class="form-group">
<label class="sr-only" for="contact-email">Email</label>
<input type="text" name="email" placeholder="Email" class="contact-email form-control" id="contact-email">
</div>
<div class="form-group">
<label class="sr-only" for="contact-message">Message</label>
<textarea name="message" placeholder="Message" class="contact-message form-control" id="contact-message" style="height: 168px;width:100%;"></textarea>
</div>
<div class="row">
<div class="col-sm-6" style="
text-align: right;
padding-right: 15px;
<div class="form-group"><label class="checkbox-inline"><input id="looking_for_quote" type="checkbox" value="quote">I'm Looking For A Quote</label>
</div>
</div>
<div class="col-sm-6">
<button type="submit" class="btn btn-lg"> Send Message</button>
</div>
</div>
</form>
and here is the script:
$(document).ready(function() {
// process the form
$('form[method=post]').submit(function(event) {
var email = "mat.mcsales#verizon.net";
if ($('#looking_for_quote').is(':checked')) {
email = "orders.mcsales#gmail.com";
}
$.ajax({
url: "https://formspree.io/" + email,
method: "POST",
data: {
message: $('textarea').val(),
from: $('input[name=name]').val(),
_reply: $('input[type=email]').val()
},
dataType: "json",
success: function() {
alert("Thanks! We'll get back to you soon.");
}
});
// stop the form from submitting the normal way and refreshing the page
event.preventDefault();
});
});
I figured it out I think.. I changed _reply: $('input[type=email]').val() to email: $('input[name=email]').val()
This is my html form submitting using jquery
<form target="_self" onsubmit="" action="javascript: postContactToGoogle()" method="post" onsubmit="">
<span id="form-error"><?php if(isset($_SESSION['alert'])){ echo $_SESSION['alert']; unset($_SESSION['alert']);} ?></span>
<div class="form-group">
<p class="no-margin bottom5">YOUR NAME (required)</p>
<input type="text" class="form-control" name="name" id="name" required>
</div>
<div class="form-group">
<p class="no-margin bottom5">YOUR EMAIL (required)</p>
<input type="email" class="form-control" name="email" id="email" required>
</div>
<div class="form-group">
<p class="no-margin bottom5">MESSAGE</p>
<textarea class="form-control" rows="5" id="message" name="message"></textarea>
</div>
<button class="btn btn-default" type="submit">Send</button>
<div style="width: 100%; display: block; float: right; padding-top: 15px;">
<div class="requestSubmited" style="display:none; text-align: center;">Your request has been sent!</div>
</div>
</form>
This is my jquery
function postContactToGoogle(){
var name = $('#name').val();
var email = $('#email').val();
var message = $('#message').val();
$.ajax({
url: "https://docs.google.com/a/mapplinks.com/forms/d/1r3SISt7ocWE32s7LJxBOOteMeMV-JTy166pH87hxwF4/formResponse",
data: {"entry.2028011364" : name, "entry.1745855979" : email, "entry.919224434": message},
type: "POST",
dataType: "xml",
statusCode: {
0: function (){
alert("saved0");
//Success message
},
200: function (){
alert("saved");
//Success Message
}
}
});
}
This is my form and jquery which i have been using.Im getting response 0 but google form is not getting updated.Please help me in this
Just follow that guide:
https://wiki.base22.com/pages/viewpage.action?pageId=72942000
This will helps.
This piece of code gets all the form variables and sends them via AJAX to the PHP script. But I want the calculated results from the PHP script that is being returned to the javascript via a JSON encoded array to be in the form of "post":{"uname":"someNamefromForm","email":"someEmail","fname":"namefromtheform","lname":"lastnamefromform"
}... The output I'm getting now is "uname=e&email=e&fname=e&lname=euname".. This is the JSON array I want to displayed at the bottom of the page for debugging purposes. Can someone tell me how to format it please
This is my HTML form
<div id="wrapper">
<h2> Validation with AJAX,JQuery,JSON and PHP</h2>
<div class="form-container">
<span id="ajax-message"></span>
<form id="ajax-form" onsubmit="return false;">
<p class="legend">All fields marked with an asterisk are required.</p>
<fieldset>
<legend>User Details</legend>
<div>
<label for="uname">Username <em>*</em></label>
<input id="uname" type="text" name="uname" value="" />
</div>
<div>
<label for="email">Email Address <em>*</em></label>
<input id="email" type="text" name="email" value="" />
</div>
<div>
<label for="fname" class="error">First Name <em>*</em></label>
<input id="fname" type="text" name="fname" value="" size="50" class="error"/>
<p class='note'>All error message go here </p>
</div>
<div>
<label for="lname">Last Name <em>*</em></label>
<input id="lname" type="text" name="lname" value="" size="50" />
</div>
</fieldset>
<div class="buttonrow">
<input type="submit" value="Submit This Form via AJAX" class="button" />
<input type="button" value="Start Again" class="button" />
<a >Refresh this Page</a>
</div>
</form>
</div>
<h3>JSON Array</h3>
<pre id='debug'></pre>
</div>
This is my javascript
$("#ajax-form").submit(function(){
var variableToSend = $(this).serialize();
$.post(
'ajaxformval_post.php',
{variable: variableToSend},
function(data){$("#debug").html(data)},
"json"
);
})
This is the php
<?php
$variable = $_POST['variable'];
echo json_encode($variable);
/*$json = array(
'booleanFlag' => TRUE,
'someText' => "AJAX should be renamed AJAJ",
'anArrayOfData' => array('name' => 'Mickey', 'ears' => 'very Big')
);*/
?>
You can send your serialized variable directly like this:
$("#ajax-form").submit(function(){
var variableToSend = $(this).serialize();
$.post(
'ajaxformval_post.php',
variableToSend,
function(data){$("#debug").html(data)},
"json"
);
});
Then on the server side simply output the json_encoded post:
<?php
$variable = $_POST;
echo json_encode($variable);
?>
Did you try changing the "json"-parameter from the $.post-method?
According to documentation https://api.jquery.com/jQuery.post/
dataType
Type: String
The type of data expected from the server. Default: Intelligent Guess (xml, json, script, text, html).
So I guess if you give him "json" he will automatically decode the returned data.