I am unable to load external file while using AJAX jQuery. I want to use jQuery AJAX to pop up form then validate, enter data in MySQL. but starting from a simple AJAX function. Kindly let me know where I am going wrong
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="test_style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("#ajax-contact-form").submit(function(){
var str = $(this).serialize();
$.ajax({
type: "POST",
url:"contact.php",
data: str,
success:function(result) {
$("#div1").html(result);
}
});
});
});
</script>
</head>
<body>
<div id="contact_form">
<form id="ajax-contact-form" name="contact" action="">
<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>
<input class="button" type="submit" name="submit" value="Send Message">
</fieldset>
</form>
</div>
</body>
</html>
and contact.php file is
<?php
echo "Hello";
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="test_style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$(".button").click(function() {
$.ajax({url:"contact.php",success:function(result){
$("#div1").html(result);
}});
return false;
});
});
</script>
</head>
<body>
<div id="contact_form">
<form name="contact" action="">
<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>
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</fieldset>
</form>
</div>
<div id="div1">
</div>
</body>
</html>
Try that:
What needed to be fixed:
1) You'd duplicated the onReady function,
2) you can use a submit form button, but since it's default action is to submit the form, the result wouldn't have been visible.
3) There was no #div1 for the result to be displayed in.
Hopefully, this has been helpful... Happy Coding!
Try with type button type
<input type="button" name="submit" class="button" id="submit_btn" value="Send" />
And also your both scripts are same use either DOM ready or $(function) like
<script>
$(document).ready(function(){
$(".button").click(function(){
$.ajax({url:"contact.php",success:function(result){
$("#div1").html(result);
}});
});
});
</script>
button is your class name so that it will represented like .button And create an div with id div1 at your html page
$("#div1").html(result);
Use one div which id is div1 inside your page which you want to show the result.
<div id="div1"></div>
Related
I have many forms on a page. I want to submit each form without reloading page. I tried many methods but could not do. I have a form similar to this. I tried using ajax as well but could't do. Please help me. Now, I'm unable to insert in database also.
<form id="a" onsubmit="return func();">
<input type="text" name="fname">
<input type="text" name="lname">
<input type="text" name="email">
<input type="submit">
</form>
Jquery
function func(){
$.ajax({
url:'registration_detail.php?id=' +reg_id,// in this you got serialize form data via post request
type : 'POST',
data : $('#a').serialize(),
success: function(response){
console.log(response);
}
});
return false;
}
Don't use " action " attribute not even with " # "
And if using AJAX, use " Return False "
$.ajax({
url : "example.php",
type : 'POST',
data : $(this).serialize();
success: function(result){
}
});
return false;
Make sure you are having a unique id for all the forms
remove action="#" and onsubmit="" from the form as you are handling the submit event in jquery
function func(id){
alert($('#'+id).serialize())
$.ajax({
url:'registration_detail.php',// in this you got serialize form data via post request
type : 'POST',
data : $('#'+id).serialize(),
success: function(response){
console.log(response);
}
});
return false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="a" onsubmit="return func('a');">
<input type="text" name="fname">
<input type="text" name="lname">
<input type="text" name="email">
<input type="submit">
</form>
<form id="b" onsubmit="return func('b');">
<input type="text" name="fname">
<input type="text" name="lname">
<input type="text" name="email">
<input type="submit">
</form>
<form id="c" onsubmit="return func('c');">
<input type="text" name="fname">
<input type="text" name="lname">
<input type="text" name="email">
<input type="submit">
</form>
id="a" should be unique for all the forms
in your code new variable reg_id will give undefined variable error, that might be the cause to reload the page.
Use below code :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<form onsubmit="return func();">
<input type="text" name="fname">
<input type="text" name="lname">
<input type="text" name="email">
<input type="submit">
</form>
</body>
<script>
function func(){
$.ajax({
url : "example.php", // in this you got serialize form data via post request
type : 'POST',
data : $('form').serialize(),
success: function(response){
console.log(response);
}
});
return false;
}
</script>
</html>
I'm pretty sure that you want that GET url to be POST as well. Obviously the code below won't work on this site here, but it shows concept of proper AJAX post.
//<![CDATA[
/* js/external.js */
$(function(){
var regId = 'someId';
$('#form').submit(function(e){
$.post('registration_detail.php', 'id='+encodeURIComponent(regId)+'&'+$(this).serialize(), function(jsonObjResp){
console.log(jsonObjResp);
}, 'json');
e.preventDefault();
});
}); // load end
//]]>
/* css/external.css */
*{
box-sizing:border-box; padding:0; margin:0;
}
html,body{
width:100%; height:100%;
}
body{
background:#ccc;
}
#content{
padding:7px;
}
label{
display:inline-block; width:80px; padding-right:4px; text-align:right;
}
input[type=text]{
width:calc(100% - 80px);
}
input{
padding:5px 7px;
}
input[type=submit]{
display:block; margin:0 auto;
}
#form>*{
margin-bottom:5px;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
<title>Test Template</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script type='text/javascript' src='js/external.js'></script>
</head>
<body>
<div id='content'>
<form id='form'>
<label for='fname'>First Name</label><input type='text' id='fname' value='' />
<label for='lname'>Last Name</label><input type='text' id='lname' value='' />
<label for='email'>Email</label><input type='text' id='email' value='' />
<input type='submit' id='submit' value='submit' />
</form>
</div>
</body>
</html>
$(document).ready(function(){
$("form").on("submit", function(){
var form_id = $(this).attr("id");
$.ajax({
url : "example.php",
type : 'POST',
data : $("#"+form_id).serialize(),
success: function(result){
}
});
return false;
})
})
I have a client that has a contact page and he wants to be able to create and edit the contact form fields.
Is there a simple php class for this?
I don't really know where to start with this.
Any tips?
Thanks in advance!
This custom Jquery Code show how you can done your job by using Jquery
$(document).ready(function(){
$("#add").on('click', function() {
$('#extra').css('display', 'block');
});
$('#dy_add').click(function(){
var type = $("#type").val();
var name = $("#name").val();
var inputName = $("#m_nam").val();
var form_field = inputName + '<input type="'+type +'" name="'+name+'" />' +'</br>' ;
$("#dynamic").append(form_field);
});
});
#extra{display:none}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form action="" method="POST" >
First Name <input type="text" name="fname" /></br>
Last Name <input type="text" name="lname" /></br>
<div id="dynamic"></div>
<input type="submit" name="submit" value="submit">
</form>
<button id="add">Add Fields</button>
<div id="extra">
<p><font color="red">Add extra form field</font></p>
Name<input type="text" id="m_nam" placeholder="input type"></br>
Type<input type="text" id="type" placeholder="input type"></br>
Input Name<input type="text" id="name" placeholder="input name">
<button id="dy_add">Add</button>
</div>
</body>
</html>
Here am working on a page were i need the content inside a textarea in a form tag to be passed to another set of form tag in the same page were i have no submit button to pass the content, please help me on this and pardon me if went wrong somewhere, thank you.
content.php
<?php
echo'
<form>
<div class="col-sm-12 form-group"><textarea rows="6" type="text" class="form-control" placeholder="Mail body" name="mail_body"></textarea></div>
//Without using submit button
</form>';
?>
pass_content.php
<?php
<form>
//pass the the content in above textarea in this form which is on the same page
</form>
?>
You can do this using jquery. Like this :
var $mail = $(".mail");
$(".email").keyup(function() {
$mail.val( this.value );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="col-sm-12 form-group"><textarea rows="6" type="text" class="form-control email" placeholder="Mail body" name="mail_body"></textarea></div>
</form>
<form>
<textarea rows="6" type="text" class="form-control mail" ></textarea>
</form>
UPDATE : As you want another field to be hidden.
you jquery code:
var $mail = $(".mail");
$(".email").keyup(function() {
$mail.val( this.value );
});
and here is your html code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="col-sm-12 form-group">
<textarea rows="6" type="text" class="form-control email" placeholder="Mail body" name="mail_body"></textarea>
</div>
</form>
<form>
<input type="hidden" class="mail" >
</form>
Check this -
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
console.log('document loaded');
$( "#box-texarea" ).keyup(function() {
console.log( "Handler for .keyup() called." );
// Get data from textarea
var userData = $(this).val();
console.log('userData : '+userData);
// Place data inside form
$('#fm-userdata').html(userData);
});
});
</script>
</head>
<body>
<textarea placeholder="Place for textarea" id="box-texarea" style="width:500px; height: 100px;"></textarea>
<br>
<form id="fm-userdata" style="border: 1px solid #ccc;"></form>
</body>
</html>
my code was working and taking my text from textbox to next page + my Input control to next page via js but suddenly there seems to be a blunder whats wrong in following code
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
var i=2;
function AddTextbox(){
container.innerHTML=container.innerHTML+'<input type="text" name="'+ i + '">';
i++;
}
</script>
</head>
<body>
<form action="next.php" method="post">
<input type="text" name="1" />
<input type="button" onClick="AddTextbox" name="btn" value="add" />
<input type="submit" name="submit" value="sub" />
<div id="container"></div>
</form>
</body>
</html>
<html>
<head>
<script>
function addElement(tag_type, target, parameters) {
//Create element
var newElement = document.createElement(tag_type);
//Add parameters
if (typeof parameters != 'undefined') {
for (parameter_name in parameters) {
newElement.setAttribute(parameter_name, parameters[parameter_name]);
}
}
//Append element to target
document.getElementById(target).appendChild(newElement);
}
</script>
</head>
<body>
<div id="targetTag"></div>
<input type="button" onClick="addElement('INPUT','targetTag',{id:'my_input_tag', name:'my_input_tag', type:'text', size:'5'}); return false;" value="Add Input Tag" />
<input type="button" onClick="addElement('INPUT','targetTag'); return false;" value="Add Input Tag W/O Parameters" />
</body>
</html>
Note If you bother to check the DOM after executing this in IE, you'll see that the name field is not available to you. IE declares this field to be read-only which is why you don't see it. The field will be properly submitted, however, as shown in this test code:
<?php
if (isset($_POST)) {
print '<pre>'.print_r($_POST,true).'</pre>';
}
?>
<html>
<head>
<script>
function addElement(tag_type, target, parameters) {
//Create element
var newElement = document.createElement(tag_type);
//Add parameters
if (typeof parameters != 'undefined') {
for (parameter_name in parameters) {
newElement.setAttribute(parameter_name, parameters[parameter_name]);
}
}
//Append element to target
document.getElementById(target).appendChild(newElement);
}
</script>
</head>
<body>
<form method="post">
<div id="targetTag"></div>
<input type="submit" value="Check"/>
</form>
<input type="button" onClick="addElement('INPUT','targetTag',{'id':'my_input_tag', 'name':'my_input_tag', 'type':'text', 'size':'5'}); return false;" value="Add Input Tag" />
<input type="button" onClick="addElement('INPUT','targetTag'); return false;" value="Add Input Tag W/O Parameters" />
</body>
</html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
var i=2;
$(document).ready(function() {
$('#button').click(function(){
$('#container').append('<input type="text" name="'+ i + '"><br/>')
i++;
});
});
</script>
</head>
<body>
<form action="next.php" method="post">
<input type="text" name="1" />
<input type="button" id="button" name="btn" value="add" />
<input type="submit" name="submit" value="sub" />
<div id="container"></div>
</form>
</body>
</html>
use click function. is this you need?
Hi all I am making a contact form popup window on my website using Jqmodal. The contact form loads and displays correctly, but the contact form itself I am trying to submit it using ajax and then want to give the user a message saying "message send" and slide the form up.
Anyway the main issue I am running into is that it submits the form but takes the user to the actual php file that it should of connected to via ajax. My code is as follows. It is probably something on the Jqmodal side of things but I am unsure if anyone could point me in the right direction that would be fantastic. Also close button is not working but I reckon I can fix that.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://www.modernizr.com/downloads/modernizr.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$("#submit").click(function() {
var action = $("#contact_form").attr('action');
var form_data = {
code:$("#code").val(),
name:$("#name").val(),
email:$("#email").val(),
message:$("#message").val(),
is_ajax:1
};
$.ajax({
type:"POST",
url:action,
data:form_data,
success: function(response)
{
if(response == 'success')
$("#form").slideUp('slow', function() {
$("#message").html("<p class='success'>Your Message Has Been Sent.</p>");
});
else
$("#message").html("<p class='error'>Code was typed incorecctly.</p>");
}
});
return false;
});
// refresh captcha
$('#refresh').click(function() {
change_captcha();
});
function change_captcha(){
document.getElementById('captcha').src="./static/classes/get_captcha.php?rnd="+Math.random();
};
});
</script>
<link href="./static/css/style.css" rel="stylesheet" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Quantico:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<span id="close">
<button class="jqmClose">Close</button>
</span>
<br/><br/>
<form name="contact_form" method="POST" action="./static/classes/contact.php" enctype="application/x-www-form-urlencoded">
<input id="name" name="name" type="text" placeholder="Full Name..." required>
<br/>
<input id="email" name="email" type="email" placeholder="Your Email..." required>
<br/>
<input id="message" name="message" type="text" placeholder="Your Message..." required>
<br/>
<section id="captcha_area">
<img src="./static/classes/get_captcha.php" alt="" id="captcha" />
<br/>
<input name="code" type="text" id="code">
</section>
<section id="refresh">?</section>
<br clear="all" /><br clear="all" />
<input type="submit" id="submit" value="Send">
</form>
<span id="message"></span>
</body>
</html>
Change $("#submit").click(function() { to => $("#submit").click(function(e) {
e.preventDefault();. Rest of the code is same. This will stop default behavior of submit action.
OR you can use, .submit event.