I need to code an AJAX request with jQuery (3.2.1) and display email input value after the form was sended.
When I click on submit button, i have this following message, I didn't understand what is wrong with my code.
<form action="process.php" method="post" id="myForm">
<div class="form-line">
<input type="email" name="emailaddress" id="emailaddress" />
</div>
<div id="emailMsg"></div>
<div class="form-line">
<input type="password" name="psw" id="password" />
<button type="submit" id="submit"><span>OK</span></button>
</div>
<div id="passMsg"></div>
</form>
And this is what i have done on jQuery code
$("#myForm").on('submit',function(e) {
e.preventDefault();
var email = $("#emailaddress").val();
$.post("../process.php", {
emailaddress:emailaddress
}, function(response) {
$("#connexion-rollover").html(email);
});
});
I have also create this PHP file to add this code
<?php
echo $_POST['emailaddress'];
?>
I hope that my first message on this site was clear.
Related
I am using a jQuery function which work to hide placeholder text on form focus, this functions works perfectly on the form in main page (Index.php), however it is not working on other forms which are designed using bootstrap (Members.php) as an example. I have tried to see where is the issue but it seems not working. I don't know if version incompatibility of both Bootstrap and jQuery caused this issue?!
I am using
- jquery-3.4.1.min.js
- bootstrap-3.3.7
=========================Backend.js=================================
// here is the jQuery function
$(function(){
'use strict';
// Hide Placeholder On Form Focus
$('[placeholder]').focus(function (){
$(this).attr('data-text',$(this).attr('placeholder'));
$(this).attr('placeholder', '');
}).blur(function (){
$(this).attr('placeholder',$(this).attr('data-text'));
});
});
==============================Index.php=====================================
// Here is the form where the jQuery function works fine
<form class="login" action="<?php echo $_SERVER['PHP_SELF']?>" method = "POST">
<h4 class="text-center">Admin Login</h4>
<input class = "form-control input-lg" type="text" name="user" placeholder="Username" autocomplete="off"/>
<input class = "form-control input-lg" type="password" name="pass" placeholder="Password" autocomplete="new-password"/>
<input class = "btn btn-lg btn-primary btn-block" type="submit" value="Login" />
</form>
===============================Members.php===================================
// Function doesn't work on this form
<div class="container">
<form class="form-horizontal" action="?do=Insert" method="POST">
<!-- start username field -->
<div class="form-group">
<label class="col-sm-2 control-label" >Username</label>
<div class="col-sm-8">
<input type="text" name="username" class="form-control" autocomplete="off" required = "required" placeholder="Enter User Name" />
</div>
</div>
</form>
</div>
var input = $("input");
input.focus(function(){
$(this).attr("placeholder", " ")
});
input.blur(function(){
$(this).attr("placeholder", "example")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="example">
I have a page called page2.php. It has a form that allows you to search via jquery ajax call. The code is below. My question is, I have a different form on page1.php. How can I submit the form on page1.php to go to page2.php and have it execute the page2.php code below using the data from the form on page1.php? I know this is most likely simple, having a brain fart right now.
$(function() {
$.validate({
form: '#form_search',
validateOnBlur: false,
errorMessagePosition: 'top',
onSuccess: function(form) {
var formval = $(form).serialize();
var formurl = '/page2.php?a=search';
$('#form_results').html('<div class="form_wait_search">Searching, please wait...<br><img src="/images/search-loader.gif"></div>');
$.ajax({
type: 'POST',
url: formurl,
data: formval,
success: function(data){
var json = $.parseJSON(data);
$('#form_errors').html(json.message);
$('#form_results').html(json.results);
}
});
return false;
}
});
});
UPDATE
Here is the forms Im referring to.
On page1.php this is like a module on the right side bar. Just a form that I want to post to page2.php
<div class="scontent_box1">
<strong class="box_title"><i class="fa fa-search fa-flip-horizontal"></i> Find Locations</strong>
<form method="post" action="/page2.php">
<div class="form-group">
<label>Street Address</label>
<input type="text" class="form-control" name="ad" placeholder="Enter Street Address...">
</div>
<div class="form-group">
<label>City, State or Zip Code</label>
<input type="text" class="form-control" name="ct" placeholder="Enter City, State or Zip Code...">
</div>
<button type="submit" class="btn btn-default blue_btn">Search</button>
</form>
</div>
Now here is the form on page2.php that executes the ajax code above. I want page1.php to submit to page2.php and envoke the same jquery code above.
<div class="row no_gutters">
<div class="search_page">
<div id="form_errors"></div>
<form method="post" id="form_search">
<div class="form-group">
<label for="ad">Street Address<span class="reqfld">*</span></label>
<input type="text" class="form-control" data-validation="required" id="ad" name="ad" placeholder="Enter Street Address..." value="">
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="ct">City, State or Zip Code<span class="reqfld">*</span></label>
<input type="text" class="form-control input-sm" data-validation="required" id="ct" name="ct" placeholder="Enter City Name..." value="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-12">
<button type="submit" class="btn btn-default blue_btn btn-block">Search Locations</button>
</div>
<div class="col-md-8"></div>
</div>
</form>
</div>
<div id="form_results"></div>
</div>
Lets say i have a form that asks for name and exam result. Id like to make the form disappear and display another div when the user hits submit.
heres the form code
<form action="exam.php" method="post" id = "coursedata" class="form-horizontal">
<fieldset>
<legend>Please Complete the Details</legend>
<div class ="form-group">
<label for="name" class="control-label col-xs-2">Student name</label>
<div class="col-xs-6">
<input type="text" name="name" id="name" size="20" class="form-control" autofocus required pattern = "[A-Z][a-z]+( [A-Z][a-z]+)?" title="Please enter a name (Surname optional) with First Letter capitalised">
</div></div>
<div class ="form-group">
<label for="CA1" class="control-label col-xs-2">Assessment One</label>
<div class="col-xs-6">
<input type="number" class="form-control" min = "0" max = "100"name="CA1" id="CA1" size="3" maxlength ="3" onkey ="limit(this);" onkeyup="limit(this);" required>
</div></div>
<div class="buttonarea">
<input type="submit" value="Submit" name = "Submit">
<input type="reset" value="Clear the Info">
</div>
</fieldset>
</form>
The shortest way (asuming that form and exam.php are the same files...):
<?php
if (!isset($_POST['Submit'])) {
?>
Your form code
<?php
}
else {
// form engine
echo "<div>SUCCESS</div>";
}
?>
Hope it helps :). PS. This is a strict answer to Your question, whether there are many other questions, like how to handle form, how to verify it, etc. But this is another side of answered coin ;). Best regards :).
Use jQuery for this (JavaScript library).
Copy this in your head section
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button[type="submit"]').click(function(){
$("#coursedata").hide();
return false;
})
})
</script>
I am building a simple form script that collects a users email and returns a PIN.
The input sits in standard HTML below:
<p>
<form class="form-inline" role="form" method="POST">
<div class="form-group">
<label class="sr-only" for="srEmail">Email address</label>
<input type="email" name="srEmail" class="form-control input-lg" id="srEmail" placeholder="Enter email">
</div>
<button type="submit" name="srSubmit" class="btn btn-default btn-lg">Generate PIN</button>
</form>
</p>
I have the following if statement that checks the database to see if the email already exists, and if the user would like a PIN reminder.
if($num_rows != 0) {//if email found in table
?>
Email already registered, would you like a PIN reminder?
<form method="POST" action="">
<input type="submit" name="srSend" value="Click here to get pin reminder" />
<input type="hidden" name="srEmail" value="<?php echo strtolower($email);?>" />
</form>
<?php
exit;
}
At the moment, this returns the result to the user as a new page; how do I put this in the actual HTML of the body page, so it would actually appear below the original form input in a new <p> element?
This is a piece of cake with jquery.post
include the jquery library in your html head and you'll need a short script to get the php content by ajax
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$('#yourForm').submit(function(e){
e.preventDefault();
var data=$('#yourForm').serialize();
$.post('yourphp.php',data,function(html){
$(body).append(html);
});
});
});
</script>
</head>
<body>
<p>
<form id="yourForm" class="form-inline" role="form" method="POST">
<div class="form-group">
<label class="sr-only" for="srEmail">Email address</label>
<input type="email" name="srEmail" class="form-control input-lg" id="srEmail" placeholder="Enter email">
</div>
<button type="submit" name="srSubmit" class="btn btn-default btn-lg">Generate PIN</button>
</form>
</p>
</body>
You could able to achieve that without ajax too. Simply use a hidden iframe in your main page, then set the target attribute of your form to the iframe as follows:
<form method="post" action="page.php" target="myIframe">
.....
</form>
<p id="theResultP"></p>
<iframe src="#" name="myIframe" style="visibility: hidden"></iframe>
The question now, How could you make the page loaded in the iframe "page.php" to interact with the opener page to update the p. This may be done as follow:
//page.php
<script>
result = parent.document.getElementById('theResultP');
result.innerHtml = "<b>The message you want</b>"
</script>
I dont know if I get what you asking for,but this is my solution :
<p>
<form class="form-inline" role="form" method="POST">
<div class="form-group">
<label class="sr-only" for="srEmail">Email address</label>
<input type="email" name="srEmail" class="form-control input-lg" id="srEmail" placeholder="Enter email">
</div>
<button type="submit" name="srSubmit" class="btn btn-default btn-lg">Generate PIN</button>
</form>
</p>
<?php
if (isset($message)){
<p><?php print $message ?></p>
?>
<?php
}
?>
and in top of your file write something like this :
<?php
if($_post['srSend']){
$message='write your message here';
}
?>
i have a registration page
<form class="register" action="regist.php" method="post" >
<h3>Register</h3>
<div class="column">
<div>
<label>First Name:</label>
<input type="text" name="f_name"/>
<span ></span>
</div>
<div>
<label>Last Name:</label>
<input type="text" name="l_name"/>
<span class="error">This is an error</span>
</div>
<div>
<label>mobile:</label>
<input type="text" name="mobile"/>
<span class="error">This is an error</span>
</div>
</div>
<div class="column">
<div>
<label>Username:</label>
<input type="text"name="user"/>
<span >This is an error</span>
</div>
<div>
<label>Email:</label>
<input type="text" name="email"/>
<span class="error">This is an error</span>
</div>
<div>
<label>Password:</label>
<input type="password" name="pass"/>
<span class="error">This is an error</span>
</div>
</div>
<div class="bottom">
<div class="remember">
</div>
<input type="submit" value="Register" name="submet" />
You have an account already? Log in here
<div class="clear"></div>
</div>
</form>
that use jquery bpopup
$(function() {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#my-button').bind('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#element_to_pop_up').bPopup();
});
}
so when some one click register the form will pop up every thing work fine the problem is that i cant do validation to the form because when i click register after filling the form
the pop up will disappear so i cant make the validation on the same form
i tried
1 to make another pop up that show the error but the data wont pass to the new popup
2 to make the action $_SERVER['self_request']
can some one help me withe this please i have a project for my college i nee to do it in 3 dayes
what i need is a validation for the form in the same page or another popup before send it to the MySQL script
Make an php page ( here called validation.php ) that uses the GET function to get the info...
Then set some ID's on the input fields...
And then make an function like this:
function checkAll(){
var firstName = document.getElementById("f_name").value();
var lastName = document.getElementById("l_name").value();
$.get( "validation.php?f_name=" + firstName + "&l_name=" + lastName, function( response ) {
// console.log( response ); // server response
response = response.trim();
if(response == 1){
alert("Everything is alright");
} else{
alert(response);
return false;
}
});
}
And change your form to this:
<form class="register" action="regist.php" method="post" onSubmit="checkAll();">
Now the key is that in the validation.php ,if everything works fine then you can echo value 1, and when something is not alright, you echo the error code ( or any code, and then with an switch clause you can dynamically add the error to your form).
The return false prevents the form from submitting...