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>
Related
I am new to jquery ,i have some trouble while inserting data to mysql database using jquery.
this is my html file
<!DOCTYPE html>
<html>
<head>
<title>
staff registration
</title>
<body>
<form>
Staff Id:<input type="text" id="staffid"><br>
Password:<input type="password" id="password1"><br>
Re-enter Password:<input type="password" id="password2"><br>
Email:<input type="email" id="email"><br>
Gender:<input type="text" id="gender"><br>
Qualification:<input type="text" id="qualification"><br>
Course 1:<input type="text" id="course1"><br>
Course 2:<input type="text" id="course2"><br>
Course 3:<input type="text" id="course3"><br><br>
<input type="submit" id="submit" value="CREATE">
</form>
<script src="jquery.min.js"></script>
<script>
$("#submit").click(function(){
var staffid=$("#staffid").val();
var password1=$("#password1").val();
var password2=$("#password2").val();
var email=$("#email").val();
var gender=$("#gender").val();
var qualification=$("#qualification").val();
var course1=$("#course1").val();
var course2=$("#course2").val();
var course3=$("#course3").val();
$.post("insert.php",{si:staffid,pwd1:password1,pwd2:password2,
email:eml,gender:gen,qualification:qal,course1:c1,course2:c2,course3:c3},
function(data){
alert(data);
});
});
</script>
</body>
</html>
this is my php file named insert.php
<?php
$con=new mysqli("localhost","root","","flash");
$si=$_POST['si'];
$pwd1=$_POST['pwd1'];
$pwd2=$_POST['pwd2'];
$eml=$_POST['eml'];
$gen=$_POST['gen'];
$qal=$_POST['qal'];
$c1=$_POST['c1'];
$c2=$_POST['c2'];
$c3=$_POST['c3'];
$sql="INSERT INTO staff(staff_id,password,email_id,gender,qualification,course_1,course_2,course_3) VALUES('$si','$pwd2','$eml','$gen','$qal','$c1','$c2','$c3')";
$con->query($sql);
?>
nothing will happen while i click submit button
please anyone help me to solve this issue
Try to use the non-slim build, available here http://jquery.com/download/, such as:
https://code.jquery.com/jquery-3.3.1.min.js
Also you had issue while making the json for the post, here is the rectified version
<!DOCTYPE html>
<html>
<head>
<title>
staff registration
</title>
<body>
<form>
Staff Id:<input type="text" id="staffid"><br>
Password:<input type="password" id="password1"><br>
Re-enter Password:<input type="password" id="password2"><br>
Email:<input type="email" id="email"><br>
Gender:<input type="text" id="gender"><br>
Qualification:<input type="text" id="qualification"><br>
Course 1:<input type="text" id="course1"><br>
Course 2:<input type="text" id="course2"><br>
Course 3:<input type="text" id="course3"><br><br>
<input type="submit" id="submit" value="CREATE">
</form>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$("#submit").click(function(){
var staffid=$("#staffid").val();
var password1=$("#password1").val();
var password2=$("#password2").val();
var email=$("#email").val();
var gender=$("#gender").val();
var qualification=$("#qualification").val();
var course1=$("#course1").val();
var course2=$("#course2").val();
var course3=$("#course3").val();
$.post("insert.php",{si:staffid,pwd1:password1,pwd2:password2,
eml:email,gen:gender,qal:qualification,c1:course1,c2:course2,c3:course3},
function(data){
alert(data);
});
});</script>
</body>
</html>
I have a table with a lot of rows, each row has 2 input fields and 1 submit button. When I click on the submit button the data is passed to a PHP script, the PHP script processes the data and returns some text.
Currently the submit button is replaced with the text that is returned by the PHP script. But I want that the returned text is being shown next to the button, so the button doesn't disappear.
I am not able to fix that, maybe somebody can help me with that?
<html>
<head>
<title>Add data with Ajax</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).on('click', '#submitButton input[type=button]', function(){
var field1 = $(this).parent().parent().find(".field1").val();
var field2 = $(this).parent().parent().find(".field2").val();
var field3 = $(this).parent().parent().find(".field3").val();
var submitButton = $(this);
$.ajax({
type: "POST",
url: "add_data.php",
data: { field1: field1, field2: field2, field3: field3 }
})
.done(function(msg) {
submitButton.parent().html(msg);
});
});
</script>
</head>
<body>
<form method="POST">
<input type="hidden" class="field1" value="product 1">
<input type="text" class="field2" value="data1">
<input type="text" class="field3" value="data2">
<div id="submitButton">
<input type="button" name="submitButton" value="Add">
</div>
</form>
<form method="POST">
<input type="hidden" class="field1" value="product 2">
<input type="text" class="field2" value="data1">
<input type="text" class="field3" value="data2">
<div id="submitButton">
<input type="button" name="submitButton" value="Add">
</div>
</form>
<form method="POST">
<input type="hidden" class="field1" value="product 3">
<input type="text" class="field2" value="data1">
<input type="text" class="field3" value="data2">
<div id="submitButton">
<input type="button" name="submitButton" value="Add">
</div>
</form>
</body>
Well, instead of replacing the content:
submitButton.parent().html(msg);
append to the content:
submitButton.parent().append(msg);
I want to display contact address and permanent address same by clicking the checkbox.
For eg : if i type the contact address and click the checkbox then the same address should be displayed in permanent address field. How to do it using jquery?
Thanks in advance..
I have done it via java script. May be this is helpful for all.
Check box code:
<input type="checkbox" name="present" onclick="permanent(this.form)">
Java Script code:
<script language="JavaScript">
function permanent(p) {
if(p.present.checked == true) {
p.per_add.value = p.temp_address.value;
p.per_city.value = p.temp_city.value;
p.per_state.value = p.temp_state.value;
p.per_country.value = p.temp_country.value;
p.per_pin.value = p.temp_pin.value;
}
}
</script>
Contact Address
<input type="text" id="contact">
<input type="checkbox" id="check">
Contact Address <input type="text" id="permanent">
jquery is
$('#check').click(function() {
var c=$('#contact').val();
$("#permanent").val(c);
});
<script language="JavaScript">
$(document).ready(function(e) {
$('#check').click(function() {
var c=$('#contact').val();
$("#permanent").val(c);
});
});
</script>
</head>
<body>
<form>
<input type="text" id="contact">
<input type="checkbox" id="check">
Contact Address <input type="text" id="permanent">
</form>
function filladd()
{
if(filltoo.checked == true)
{
var tal11 =document.getElementById("tal").value;
var dist11 =document.getElementById("dist").value;
var pin11 =document.getElementById("pin").value;
var copytal =tal11 ;
var copydist =dist11 ;
var copypin =pin11 ;
document.getElementById("tal1").value = copytal;
document.getElementById("dist1").value = copydist;
document.getElementById("pin1").value = copypin;
}
else if(filltoo.checked == false)
{
document.getElementById("tal1").value='';
document.getElementById("dist1").value='';
document.getElementById("pin1").value='';
}
}
<label>Tal</label>
<br/>
<input type="Text" id="tal" name="Taluka1" class="" placeholder="" >
<br/>
<label>Distic</label>
<br/>
<input type="Text" id="dist" name="Distric1" placeholder="">
<br/>
<label>Pincodes</label>
<br/>
<input type="Text" id="pin" name="pincode1" placeholder="">
<br/>
<input type="checkbox" value="" name="filltoo" id="filltoo" onclick="filladd()" />Permanent Address same as Current Address <br/>
<label>Tal</label>
<br/>
<input type="Text" id="tal1" name="Taluka1" placeholder="" >
<br/>
<label>Distic</label>
<br/>
<input type="Text" id="dist1" name="Distric1" placeholder="">
<br/>
<label>Pincodes</label>
<br/>
<input type="Text" id="pin1" name="pincode1" placeholder="">
<br/>
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>
When I try to run my code on any other webbrowsers apart from the Internet explorer it works fine. But when I try to run the code on Internet explorer I do get an alert box saying HERE along with an Ok button. but the problem is when I click on that OK button I do not get anything. Ideally I should be getting another alert box.
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(event) {
alert("here");
$.post('process.php', {name:'test1',email:'test.com'}, function(data)
{
$('#results').html(data);
alert(data);
});
});
});
</script>
</head>
<body>
<form name="myform" id="myform" action="" method="POST">
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value=""/>
<br>
<label for="email" id="email_label">Email</label>
<input type="text" name="email" id="email" size="30" value=""/>
<br>
<input type="button" name="submit" id="submit" value="Submit">
</form>
<div id="results"><div>
</body>
</html>
Any help on this is very much appreciated.
Edit: I found out that Internet Explorer which has HTTP works perfectly fine but not on Internet Explorer which uses HTTPS.
Change your code to
<form name="myform" id="myform" action="" method="POST" onsubmit="return validate(this);">
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value=""/>
<br>
<label for="email" id="email_label">Email</label>
<input type="text" name="email" id="email" size="30" value=""/>
<br>
<input type="button" name="submit" id="submit" value="Submit">
</form>
<script>
function validate(elem){
$.post('process.php', {name:'test1',email:'test.com'}, function(data)
{
$('#results').html(data);
return true;
});
return false;
}
</script>
try using jquery $.ajax() for posting your form data using $(fomname).serialize() method
function submitYourForm()
{
$.ajax({
type: 'POST',
cache: false,
async:true,
url: 'your url',
data: $('#myform').serialize(),
success: function(data) {
alert(data);
}
});
}
change your button type from "submit" to "button" and call your function onclick the button
like
<input type="button" name="submit" onclick="submitYourForm();" value="Submit" />
remove function call onsubmit.
try this