how to multiple parameters from javascript to html form - javascript

here is the code what i am trying
<script>
var output = "<table id='e' border><tr><td><input type='text' id=/"t"/></td><td><input type='text' id=/"t1/"></td><td><input type='text1' id=/"t2"/></td><td><input type='text1' id=/"t3"/></td><button onclick=del('"+ divId +"')>delete</button></td></tr></table>";
</script>
<body>
<form method=post action="t.php">
<input type="text" id= ??(from script...)
</body>
what shell i do in order to send parameters from script to form one by one in text field? is there any possibilty?

In php:
<?php
if($_POST['submit'])
{
$user = $_POST['user'];
$pass = $_POST['pass'];
//Here you have the text in php variables. You can do whatever you want with them
}
?>
<form method="post" enctype="multipart/form-data" name="form">
Username: <input type="text" name="user" required>
Password: <input type="password" name="pass" required>
</form>

Yes, you can get value from input text:
<input type="text" id"yourIDinput" onchange="YouFunctionJavaScript()"/>
<script>
function YouFunctionJavaScript(){
var textInput = $("#yourIDinput").val(); // Here you get value
alert(textInput); //
}
</script>
It is?

Related

how to set unique id for multiple form using JQuery and PHP

i have more than 1 form in my page. i submit this forms using ajax to database. the problem is each of this form should have unique id in order to submit with ajax(JQuery id selector), and the first form always get submitted using ajax and other form submitted with php. how can i have unique id for each form and submit all forms with AJAX?
<form action="inc/new.comment.php" method="post" id="new_comment_answer_form">
<textarea name="new_answer" id="new_answer" cols="30" rows="10" placeholder="enter your new answer"></textarea>
<!-- <input type="text" name="comment_author" id="comment_author" placeholder="author name"> -->
<input type="hidden" name="post_id" id="post_id" value="<?php echo $post_id ?>">
<input type="hidden" name="comment_id" id="comment_id" value="<?php echo $comment_id ?>">
<input type="submit" name="submit_answer" value="send" id="submit_answer">
</form>
<p id="new_answer_result"></p>
jQUERY:
$("#new_comment_answer_form").submit(function (e) {
e.preventDefault();
var new_answer = $("#new_answer").val();
var submit_answer = $("#submit_answer").val();
var post_id = $("#post_id").val();
var comment_id = $("#comment_id").val();
$(document).ajaxStart(function () {});
$(document).ajaxComplete(function () {});
$.post("./inc/new.comment.php", {
new_answer: new_answer,
submit_answer: submit_answer,
post_id: post_id,
comment_id: comment_id
}, function (data, status) {
$("#new_answer_result").html(data);
$("#new_answer").val("");
});
});
use of this code is comment on other comments in a blog site.(if that helps)
You can give for each your form unique IDs, but set the same class, for example class="submit_form". Next you should call the function by this class. Other fields you can call by names.
$(".submit_class").submit(function (e) {
e.preventDefault();
var new_answer = $(this).find("[name=new_answer]").val();
var submit_answer = $(this).find("[name=submit_answer]").val();
var post_id = $(this).find("[name=post_id]").val();
var comment_id = $(this).find("[name=comment_id]").val();
$(document).ajaxStart(function () {});
$(document).ajaxComplete(function () {});
$.post("./inc/new.comment.php", {
new_answer: new_answer,
submit_answer: submit_answer,
post_id: post_id,
comment_id: comment_id
}, function (data, status) {
$("#new_answer_result").html(data);
$(this).find("[name=new_answer]").val("");
});
});
I am guessing you have the form creation code in loop.
try this..
<?php i=0; // take post_id, if you want ?>
<form action="inc/new.comment.php" method="post" id="new_comment_answer_form_<?php echo ++i; ?>">
<textarea name="new_answer" id="new_answer" cols="30" rows="10" placeholder="enter your new answer"></textarea>
<!-- <input type="text" name="comment_author" id="comment_author" placeholder="author name"> -->
<input type="hidden" name="post_id" id="post_id" value="<?php echo $post_id ?>">
<input type="hidden" name="comment_id" id="comment_id" value="<?php echo $comment_id ?>">
<input type="submit" name="submit_answer" value="send" id="submit_answer">
</form>
<p id="new_answer_result"></p>
You will have different id as "new_comment_answer_form_1", "new_comment_answer_form_2".
You can submit multiple forms with php as well.
at the top of your file.php
if(isset($_POST['btnName1'])){
... manipulate form's content
}elseif(isset($_POST['btnName2'])){
... manipulate another forms content
}
then later on in your file have the forms, they don't even need ID, php will recognise form by button name tag
<form method="POST">
<input type="text" name="inputField">
<input type="submit" name="btnName1">
</form>
<form method="POST">
<input type="text" name="inputField">
<input type="submit" name="btnName2">
</form>

How to add onkeypress save in php form

**This is my php index.php file. I want to type first name and last name type and auto it has to be save the database. I wrote the code using ajax. but, this is not working properly. Please can any one help me. **
index.php
<?php
$connection = mysql_connect("localhost", "root", "");
$db = mysql_select_db("type", $connection);
if(isset($_POST['submit'])){
$firstName = $_POST['firstName'];
$lastName = $_POST['lastName'];
if($firstName !=''||$lastName !=''){
//Insert Query of SQL
$query = mysql_query("insert into users(firstName, lastName) values ('$firstName', '$lastName')");
echo "<br/><br/><span>Data Inserted successfully...!!</span>";
}
else{
echo "<p>Insertion Failed <br/> Some Fields are Blank....!!</p>";
}
}
mysql_close($connection);
?>
<html>
<head>
<meta><title>Home Page</title>
<script type="text/javascript">
$(document).on('keyup','firstName','lastName',function(){
var rel = $(this).attr('rel');
var flatvalue = $(this).val();
$("#firstName"+rel).val(flatvalue);
});
</script>
</head>
<body>
<form action="" method="post">
<label for="firstName">First Name</label>
<input type="text" name="firstName" ><br><br>
<label for="lastName">Last Name</label>
<input type="text" name="lastName" ><br><br>
<input type="submit" id="submit" name="submit" value="submit"/>
</form>
</body>
</html>
onKeyPress event not proper because it call many times as per user hit.
Use onBlur event instead of onKeyPress for submit the form and save it to MySql users table.
Try below example,
PHP
<?php
$connection = mysql_connect("localhost", "jaydeep_mor", "jaydeep_mor");
$db = mysql_select_db("jaydeep_mor", $connection);
if(isset($_POST['firstName']) && isset($_POST['lastName'])){
$firstName = $_POST['firstName'];
$lastName = $_POST['lastName'];
if($firstName != '' || $lastName != ''){
//Insert Query of SQL
$query = mysql_query("insert into users(firstName, lastName) values ('$firstName', '$lastName')");
header("Location: test.php?msg=Data Inserted successfully...!!");
}
else{
echo "<p>Insertion Failed <br/> Some Fields are Blank....!!</p>";
}
}
mysql_close($connection);
?>
HTML / JAVASCRIPT
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta><title>Home Page</title>
<script type="text/javascript">
function saveData(){
document.forms["userDataForm"].submit();
}
</script>
</head>
<body>
<?php if(isset($_GET['msg']) && trim($_GET['msg'])!=""){ ?>
<br /><div><?php echo $_GET['msg']; ?></div><br />
<?php } ?>
<form action="test.php" method="post" name="userDataForm">
<label for="firstName">First Name</label>
<input type="text" name="firstName" value="<?php echo isset($_POST['firstName'])?$_POST['firstName']:''; ?>" ><br><br>
<label for="lastName">Last Name</label>
<input type="text" name="lastName" value="<?php echo isset($_POST['lastName'])?$_POST['lastName']:''; ?>" onblur="return saveData();" ><br><br>
<!--input type="submit" id="Submit" name="Submit" value="submit"/-->
</form>
</body>
</html>
<?php
$connection = mysql_connect("localhost", "root", "");
$db = mysql_select_db("type", $connection);
if(isset($_REQUEST['firstName'])){
$firstName = $_REQUEST['firstName'];
$lastName = $_REQUEST['lastName'];
if($firstName !=''||$lastName !=''){
//Insert Query of SQL
$query = mysql_query("insert into users(firstName, lastName) values ('$firstName', '$lastName')");
echo "<br/><br/><span>Data Inserted successfully...!!</span>";
die();
}
else{
echo "<p>Insertion Failed <br/> Some Fields are Blank....!!</p>";
die();
}
}
//mysql_close($connection);
?>
<html>
<head>
<meta><title>Home Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#submit').click(function(){ alert('d');
var firstname = $('#firstName').val();
var lastname = $('#lastName').val();
$.ajax({
url:'',
data:{'firstname':firstname,'lastname':lastname, },
type: 'POST',
success: function(data){
alert("Data Save: " + data);
}
});
});
});
</script>
</head>
<body>
<label for="firstName">First Name</label>
<input type="text" name="firstName" id="firstName"><br><br>
<label for="lastName">Last Name</label>
<input type="text" name="lastName" id="lastName"><br><br>
<input type="submit" id="submit" name="submit" value="submit"/>
</body>
</html>
may be this can help you,
if you want to do it via form submit then just you need to give the url of your controller function in the action method of the form
<form action="" method="post">
<label for="firstName">First Name</label>
<input type="text" name="firstName" ><br><br>
<label for="lastName">Last Name</label>
<input type="text" name="lastName" ><br><br>
<input type="submit" id="submit" name="submit" value="submit"/>
</form>
if you want to do it via ajax then you can add id attribute for first_name and last_name input and can do it in following way,
$('#submit').on('click', function(){
var first_name = $("#first_name").val();
var last_name = $("#last_name").val();
$.ajax({
url: url of your controler, //url of your controller function
type: "POST",
data: {'first_name' : first_name,'last_name':last_name},
success: function (data) {
//whatever you want to do on success
} else {
//in case of no data
}
}
});
});
in the same way you can give a class attribute to the input box and on keyup event can save the data via class
have you try doing it this way
$('body').delegate('input[type="text"]', 'keypress keydown keyup change propertychange paste', function(event) {
event.stopImmediatePropagation();
if (event.type === 'keydown' || event.type === 'keypress') {
return;
}
//insert what you want to do here
//perform some ajax
/*
$.ajax({
url: 'index.php',
method: 'POST',
data: {
'firstName' : $('input[name=firstName]).val(),
'lastName' : $('input[name=lastName]).val()
},
success: function(mResponse) {
alert(mResponse);
}
});
*/
});

one form two actions with javascript

Trying to first populate fields with one js button and then submit that collect data with a second js button
I can get the fields to poulate, when I click the "Populate" button, but when I try to do the submit none of the values show on the ordertest.php
Thanks
<form action="#" name="data" id="data">
<input type='button' value='Populate' onclick='popContact()' /><BR>
<input type="submit" onclick="document.getElementById('data').action = 'ordertest.php'" value="Payment Submit" /><BR>
Contact Info:<BR>
First Name: <input type='text' readonly="readonly" name='cfname' /><BR>
Last Name: <input type='text' readonly="readonly" name='clname' /><BR>
Email:<input type='text' readonly="readonly" name='cemail' /><BR>
</form>
<script type="text/javascript">
function popContact()
{
var c = window.external.Contact;
data.cfname.value = c.FirstName;
data.clname.value = c.LastName;
data.cemail.value = c.EmailAddr;
}
</script>
---> ordertest.php
<?php
$current_firstname = $_POST["cfname"];
$current_lastname = $_POST["clname"];
$current_email_address = $_POST["cemail"];
echo "current_firstname ".$current_firstname;
echo "<br>";
echo "current_lastname ".$current_lastname;
echo "<br>";
echo "current_email_address ".$current_email_address;
?>
also tried
<input type="submit" onclick="this.form.action='ordertest.php'" value="Payment Submit" />
Oppps.
using this combination works, $_GET
<input type="submit" onclick="this.form.action='order.php'" method="POST" value="Payment Submit" />
---> ordertest.php
<?php
$current_firstname = $_GET["cfname"];
$current_lastname = $_GET["clname"];
$current_email_address = $_GET["cemail"];
echo "current_firstname ".$current_firstname;
echo "<br>";
echo "current_lastname ".$current_lastname;
echo "<br>";
echo "current_email_address ".$current_email_address;
?>

Two form on a single page : How to identify which form validate using jquery ajax function

I have a html page which contains
a form with fields for sign up (registration / new member)
a form for sign in (login for already member)
The sign in form is :
<form class="dialog-form">
<div class="form-group">
<label>E-mail</label>
<input type="text" placeholder="email#domain.com" class="form-control">
</div>
<div class="form-group">
<label>PAssword</label>
<input type="password" placeholder="My PAssword" class="form-control">
</div>
<input type="submit" name="sign_in" value="Connexion" class="btn btn-primary">
</form>
The sign up form is :
<form class="dialog-form" action="bat/user_validation.php" method="post">
<div class="form-group">
<label>E-mail</label>
<input type="text" placeholder="email#domain.com" class="form-control">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" placeholder="My secret password" class="form-control">
</div>
<div class="form-group">
<label>Repeat Password</label>
<input type="password" placeholder="Type your password again" class="form-control">
</div>
<input type="submit" name="sign_up" value="Inscription" class="btn btn-primary">
</form>
One the other side, I have a php script file which contains function to check and insert a userid.
function getPassword($utilisateur) {
try {
$dbh = new PDO(DSN, USER, PASS);
$uid = $utilisateur;
$sql = "SELECT password FROM cc_users WHERE uid =:uid";
$sth = $dbh->prepare($sql);
$sth->execute(array(':uid'=>$uid));
$result = $sth->fetchAll();
return (count($result) == 1) ;
} catch (PDOException $e) {
print "Erreur ! : " . $e->getMessage() . "<br/>";
die();
}
}
function setPassword($uid, $pass) {
$dbh = new PDO(DSN, USER, PASS);
$sql = "UPDATE cc_users SET password =:pass where uid =:uid";
$sth = $dbh->prepare($sql);
$sth->execute(array(':pass'=>$pass ,':uid'=>$uid));
echo $count = $sth->rowCount();
return $dbh->exec($sql);
}
function newPassword($utilisateur, $pass) {
$crypt = crypt($pass);
return setPassword($utilisateur, $crypt);
}
function checkPassword($utilisateur, $pass) {
if (empty($pass)) return FALSE;
$interne = getPassword($utilisateur);
$crypt = crypt($pass, $interne);
return ($interne === $crypt);
}
print_r($_POST);
My questions are :
How I can check on which form the user is coming?
How can I do an $.ajax call for checking the form? If yes how?
Thanks
HTML:
Form 1:
<form id="form1">
<input type="submit" value="submit" />
</form>
Form 2:
<form id="form2">
<input type="submit" value="submit" />
</form>
jQuery:
$('form').on('submit', function () {
console.log($(this).attr('id')); // Logs the id of the submitted form
});
Give name for <form>
<form class="dialog-form" name="signin">
<form class="dialog-form" action="bat/user_validation.php" method="post" name="signup">
You can check $_POST global to see if it contains the name of your <input type="submit" />. It will contain either sign_up or sign_in, depending on what button did the user press.
For example:
if(isset($_POST['sign_up']){
$signingUp = true;
}
If you want to submit the form using jQuery ajax, you can use the following code snippet:
$.post('bat/user_validation.php', $('form.dialog-form').serialize());
Though the selector should be more concrete, probably including a form ID to distinguish between the two forms.

preventDefault() won't work with form.submit()

I'm trying to get my login form to either close my lightbox, or change the text of an errorbox depending on whether or not the login attempt was a success. I'm not sure, but i think it has to do with my
onclick="formhash(this.form, this.form.password);"
which is a JS function that hashes a password, then continues the form submit. it ends with
form.submit();
Here's my code:
HTML:
<form action="includes/process_login.php" method="post" name="login_form">
Email: <input class="searchform" type="text" name="email" size="20"/><br />
Password: <input class="searchform" type="password" name="password" id="password" size="20"/><br />
<input type="button" class="searchform"
value="Submit" size="40" style="height:45px; width:90px"
onclick="formhash(this.form, this.form.password);" />
<input type="text" id="errorbox" style="height:45px; width:180px" value=""><br>
</form>
JS:
<script>
!(function($){
$(function() {
$('form[name="login_form"]').on('submit', function(event){
event.preventDefault();//don't reload the page
$.post('includes/process_login.php', $(this).serialize(), function(data){
//data is a json object which contans the reponse
data = $.parseJSON(data);
$("fade").fadeOut();
$("light").fadeOut();
},
function(data){//error callback
data = $.parseJSON(data);
if(data.forbidden){
$("#errorBox").html("Error!");
}
else if(data.error){
$("#errorBox").html("Invalid request!");
}
});
});
return false;
});
})(window.jQuery);
</script>
PHP:
<?php
include_once 'db_connect.php';
include_once 'functions.php';
sec_session_start(); // Our custom secure way of starting a PHP session.
$response = array();
if (isset($_POST['email'], $_POST['p'])) {
$email = $_POST['email'];
$password = $_POST['p'];
if (login($email, $password, $mysqli) == true) {
http_response_code(200);//HTTP OK, requires php 5.4
$response['success'] = true;
} else {
// Login failed
$response['error'] = true;
http_response_code(401);//HTTP forbidden
}
} else {
// The correct POST variables were not sent to this page.
$response['error'] = true;
http_response_code(400);//HTTP bad request
}
echo json_encode($response);
When I log in, the preventDefault() doesn't work. It opens process_login.php in a new page and displays "{"success":true}" on a blank page. Any suggestions? (keeping in mind that it needs to be as secure as possible)
You could try moving it all into a single handler call. By changing the type="button" to type="submit" on your form.
<form action="includes/process_login.php" method="post" name="login_form">
Email: <input class="searchform" type="text" name="email" size="20"/><br />
Password: <input class="searchform" type="password" name="password" id="password" size="20"/><br />
<input type="submit" class="searchform" value="Submit" size="40" style="height:45px; width:90px" />
<input type="text" id="errorbox" style="height:45px; width:180px" value=""><br>
Then you could move your formhash function into the submit function
!(function($){
$(function() {
$('form[name="login_form"]').on('submit', function(event){
event.preventDefault();//don't reload the page
formhash(var1, var2);
$.post('includes/process_login.php', $(this).serialize(), function(data){
//data is a json object which contans the reponse
data = $.parseJSON(data);
$("fade").fadeOut();
$("light").fadeOut();
},
...//the rest of your code

Categories

Resources