I have a form with ,
In the form after user clicks on Submit , he will be taken to another page which would show all the data entered, Which would allow the user to verify the content.(User will have a look at the content , to see what he entered is correct).
Once user verifies he would submit the data and Insert to DB should be done.
I want to know a method in which i could carry on the approach, to do this.
How can i implement this
EDIT MORE EXPLAIN
addemp.php
The Main Div With Form
<div class="panel-body">
<form>
Employee : <input Type="text" id="name">
<input type="submit" value="check">
</div>
The Second Div in the same form should show once submit is clicked
<div class="submit panel-body">
<form>
Employee : <Employee Name asin main div>
<input type="submit" > <--! this submit would post data
</form>
</div>
how to pass the value from 1st div to the second , and from the second INSERT to db.how can i do without page refresh ?
Use following script on location file
$action='';
if(isset($_POST['submit'])){
//create form here
//Change the action of form
$action = 'save.php';
}
echo '<form method="POST" action="'.$action.'">
<input type="text" name="nric" value="'.isset($_POST['nric'])?$_POST['nric'].'" />
<input type="text" name="empName" value="'.isset($_POST['empName'])?$_POST['empName'].'" />
<input type="text" name="location" value="'.isset($_POST['location'])?$_POST['location'].'" />
<input type="submit" value="Submit"/>
</form>';
EDIT: You don't need to use a form in this case. You can simply use JQuery to show the data from text boxes in a DIV and a button that will POST the data for you on the server.
<input type="text" name="nric" id="nric" />
<input type="text" name="empName" id="empName" />
<input type="text" name="location" id="location" />
<input id="sndData" type="button" value="Submit" />
<div id="showData"></div>
JQuery:
$('#sndData').click(function(){
var makeData = "<p>NRIC: "+$('#nric').val()+"</p><p>Employee Name: "+$('#empName').val()+"</p><p>Location: "+$('#location').val()+"</p>";
$('#showData').html(makeData);
});
When you've done that, just create/show a HTML button that will POST the data for you.
If this answers your question, please mark it as an answer.
Related
I have made a form in my site, which will allow me to get suggestions about Rubik's cube algorithms, but how to know what input the user has? For better understanding, I've given the code below:
<form method="POST">
<label>Your name: </label><br>
<input type="text" name="name" placeholder="Your Name" required><br><br>
<label>Your E-mail: </label><br>
<input type="email" name="email" placeholder="email#domain.com" required><br><br>
<label>Select puzzle: </label><br>
<input type="radio" name="2x2" value="2x2">2x2<br>
<input type="radio" name="3x3" value="3x3">3x3<br><br>
<label>Select set/subset: </label><br>
<input list="set"><br><br>
<datalist id="set">
<option>Ortega OLL</option>
<option>Ortega PBLL</option>
<option>CLL</option>
<option>EG-1</option>
<option>EG-2</option>
<option>F2L</option>
<option>OLL</option>
<option>PLL</option>
<option>COLL</option>
<option>WV</option>
</datalist>
<label>Your Alg: </label><br>
<input type="text" name="alg"><br><br>
<input type="submit" name="submit" class="w3-black w3-button w3-hover-white w3-hover-text-blue w3-text-white">
</form>
Please add action attribute to your form tag and on submit here is the example
<form action="getvalue.php" method="post">
</form>
Note: Every form element must have unique name .
after adding action attribute then create getvalue.php file and add following code in to it
<?php
print_r($_POST);
?>
Above code will give all the form field values
do let me know if it was helpfull...
I'm not sure exactly what you want to do, but here is an example of a form that submits to itself. This will allow you to remain on the same page after the form has been submitted. You can change what the user sees to indicate that the form was done successfully/etc. I have tested this code and it works.
<main>
<?php
// When the form is submitted
if (isset($_POST["submitButton"])){
//Do something with the data from the form - you don't have to print it out.
//This is all done on the server.
//Connect to DATABASE, send an EMAIL, VALIDATE the form, etc.
print("<pre>");
print_r($_POST); // for all GET variables
print("</pre>")
?>
<!-- This HTML will be visible to the user after the form has been submitted. -->
<h1>The form has been submitted successfully!</h1>
<?php
}else{ //If the form has not been submitted
?>
<form method = "post" >
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" id = "submitButton" name = "submitButton" value="Submit">
</form>
<?php
} //End else
?>
</main>
Below is the simple requirement in html, jQuery, servlet
Implementation: Forgot password module
Username text field and send button. --> OK
User enters username and press send button. --> Ok
Fire jquery on click event, post method --> OK
From DB get the security question for username --> OK
Get result in jquery call --> OK
display security question value in text field --> NOK
Some how I feel, the text field is updated and refreshed to old value.
so in my case,
step 1) Text value - placeholder property value
step 2) update from jQuery
step 3) again refreshed to placeholder property value
jQuery
$(document).on("click", "#btnuserName", function() {
$.post("/zmcwebadmin/ForgotPasswordServlet",function(securityQuestion) {
alert("I got the response in ajax "+ securityQuestion);//value is correct
$("input[type=text].txt_securityQuestion").val(securityQuestion); //problem here
console.log("txt_securityQuestion");
});
});
html
<input type="text" id="ForgotPassUname" name="user_name" class="changepassformat"placeholder="Enter Username">
<button class="buttonformat" id="btnuserName" name="btnuserName">SEND</button><br>
<input type="text" id="txt_securityQuestion" name="txt_securityQuestion" class="changepassformat" placeholder="Security Question"><br>
<input type="text" id="SecurityAns" name="SecurityAns" class="changepassformat" placeholder="Enter the Answer">
Entire html code
<body background="../Images/zebra_background.jpg">
<div id="header">
<span style="float: left">ZMC Server </span> <img
src="../Images/zebra_logo.png" width=150px height=50px
style="float: right; padding-top: 5px">
<form id="form_logout">
<input type="image" class="logbuttonformat" id="logoutbtn"
src="../Images/logout_deselected.png" onclick="changeLogoutImage()"
alt="submit" style="padding: auto">
</form>
</div>
<form id="form_forgotpswd" >
<p class="slectedNameformat"> FORGOT PASSWORD </p>
<input type="text" id="ForgotPassUname" name="user_name" class="changepassformat"placeholder="Enter Username">
<button class="buttonformat" id="btnuserName" name="btnuserName">SEND</button><br>
<input type="text" id="txt_securityQuestion" name="txt_securityQuestion" class="changepassformat">
<br>
<input type="text" id="SecurityAns" name="SecurityAns"class="changepassformat" placeholder="Enter the Answer">
<br><input type="button" class="buttonformat" value="SUBMIT">
</form>
</body>
</html>
You need id selector instead of class selector here as txt_securityQuestion is id of element and not its class:
$("#txt_securityQuestion").val(securityQuestion);
I have a little problem and i cant solve it. Below is my form. The question is: how can i put image which was put in input where is ajaximage.php to another form to a hidden input. I want the image was firstly send by ajaximage.php and shown and keept by another form and send to upload.php
<div class="kontakt">
<input type="checkbox" name="check" value="1" onclick="document.getElementById('imgfile').style.display = this.checked ? 'block' : 'none';
this.elements['photoimg'].disabled = this.form.elements['nazwa3'].disabled = !this.checked" />
<form id="imageform" name="nazwa2" disabled="disabled"style="display: none" method="post" enctype="multipart/form-data" action='ajaximage.php'>
<input id="imgfile" style="display: none" type="file" name="photoimg" id="photoimg" />
<div id='preview'></div>
</form>
<form id="dodaj" method="POST" enctype="multipart/form-data" action="upload.php">
<input type="hidden" name="ok" value="1">
<input type="hidden" name="MAX_FILE_SIZE" value="665600">
<input type="file" style="margin-bottom:30px; margin-top:20px;" name="plik" size="40" />
<textarea rows="4" cols="50" style="margin-bottom:30px;" placeholder="Wpisz swój tekst." required name="tekst" wrap="virtual">
<?php
if(isset($_SESSION['tekst']))
{
$tekst = $_SESSION['tekst'];
echo $tekst;
}
?>
</textarea>
<input type="submit" value="Dodaj" />
</form>
</div>
You can't add a file from one <input type="file"> to another <input type="file">.
This is because you can't set a file inputs value due to security reasons.
You cannot pass uploaded files directly to another form. You need to move it into a temporary location and give it a unique filename which you can then store into a hidden field in the second form. When you submit the second form then you receive the hidden value and you are then able to access the previously uploaded file.
See this: http://php.net/manual/en/function.move-uploaded-file.php
So I want to have one login, but I have 2 different forms to distinguish different functions. How do I pass the login forms between the other 2 functions.
I know javascript and vbs, not jquery.
Example:
I want the same user and pass to appy to both forms without having to make 2 seperate inputs
<%
username = Request.Form("username")
password = Request.Form("password")
%>
<input name="username" />
<input name="password" type="password" />
<form action="test.asp?f=test1" method="post">
text inputs with a submit button
</form>
<form action="test.asp?f=test2" method="post">
different inputs with another submit button
</form>
I haven't used ASP Classic for ages so I am not sure if this is a correct answer, but you can give it try. Since you have two buttons and you want to know which button is being clicked. Why don't you give value to each submit button and then give it the same name? For example.
<form action="test.asp" method="post">
<input name="username" />
<input name="password" type="password" />
<input name='action' type="button" value="Submit One" />
<input name='action' type="button" value="Submit Two" />
</form>
The ASP part
If Request.Form("action") = "Submit One" Then
'' First button is clicked
Else
'' Second button is clicked
End If
I think you're possibly over-thinking this.
I'd put the username and password inputs into a single form and have both submit buttons displayed as follows:
<form action="test.asp?f=test1" method="post">
<input name="username" />
<input name="password" type="password" />
<input id="submit-1" type="button" value="Submit One" />
<input id="submit-2" type="button" value="Submit Two" />
</form>
Then, using JavaScript I'd wire up click event handlers on each button such that when the user click either one, the form action URL querystring would be updated before submitting the form.
var button1 = document.getElementById("submit-1");
var button2 = document.getElementById("submit-2");
b1.onclick = function() {
document.form.action = "test.asp?f=test1";
document.form.submit();
}
b2.onclick = function() {
document.form.action = "test.asp?f=test2";
document.form.submit();
}
HTML:
I want to pass the value from the gsearch to the q parameter. The following is the ways I make but it couldn't work. How should I do it?
action="http://test.com/search.php?q=<script type="text/javascript">document.getElementById('gsearch').value;</script>">
updated:
in my site. i want to make a google custom search: so i put the following code in the homepage. 0156290304977:8texhu0mrk the google search value. gsearch.php page which i put the google custom search code in and show the searched result
<form method="get" action="http://test.com/gsearch.php?cx=0156290304977:8texhu0mrk&cof=FORID:11&ie=UTF-8&q=..." >
<input type="text" title="" value="" name="q" class="search-input" id="gsearch" />
<input type="submit" value="" name="sa" id="search-button"/>
</form>
now, i want to when the user input the searched text in the gsearch text box, if he click the submit button,. then on the gsearch.php page shows the searched result.
if you want to submit to this: http://test.com/search.php?q=theinput
just do this:
<form target="_top" method="get" action="http://www.cnn.com/search.php" >
<input type="text" title="" value="theinput" name="q" class="search-input" id="gsearch" />
<input type="submit" value="submit" id="search-button"/>
</form>
the entire idea behind the <form> element is that it is making sure that all of the inputs from the user will be sent to the action.
the form will take the input from the q and add it to the action automatically.
so in your simple case. no manipulation is required.
Test it here
http://jsfiddle.net/L4rHG/1/
this will be submitted to http://edition.cnn.com/search.php?q=theinput
Or you need over javascritpt
<script>
function SubmitForm(){
window.open("http://test.com/search.php?q="+document.getElementById('gsearch').value)
return false;
}
</script>
<form method="get" action="http://test.com/search.php" onSubmit="SubmitForm();false" >
<input type="text" title="" value="" name="q" class="search-input" id="gsearch" />
<input type="submit" value="" name="sa" id="search-button"/>
</form>
<form action="http://test.com/search.php?q=">
<script>
document.forms[0].action += 'new_action.html';
</script>