I created three separate forms and gave each of these forms an id. After the user presses next, the current form fades out and the second form fades in. After the user presses next again, the second form then fades out and the next form fades in. Inside the third form I included a submit button that should submit all my data to my database.
I am having issues passing the information through the three different forms and was wondering if anyone had any ideas on how I could more easily accomplish this.
Sample code:
<form id ="1">
<input type = "text"/>
</form>
<form id = "2">
<input type="checkbox"/>
</form>
<form id = "3" action ="upload.php">
<input type = "file">
<input type = "submit">
</form>
EDIT* adding more info: Once the user presses submit, the information passed in from form 1 and form 2 should both be posted into upload.php. I am not sure how to accomplish that so far.
You can solve this issue by using single form like below.
<form id ="1" action ="upload.php">
<div class="first-form">
<input type = "text"/>
</div>
<div class="second-form">
<input type="checkbox"/>
</div>
<div class="third-form">
<input type = "file">
<input type = "submit">
</div>
</form>
there are three div with different class. You must hide and show the div not the form.
If you want to do with normal php without ajax, try this.
<form id ="1">
<input type="text" name="form1" />
</form>
<form id = "2">
<input type="checkbox" name="form2"/>
</form>
<form id = "3" action="file.php" method="post">
<input type = "text" name="form3">
<input type = "submit" id="sub">
</form>
Script
$(document).on("click", "#sub", function () {
$('#1 :input').not(':submit').clone().hide().appendTo('#3');
$('#2 :input').not(':submit').clone().hide().appendTo('#3');
return true;
});
You can use jQuery's serialize function to achieve this:
Your html file:
<form id="1">
<input type="text" name="name" />
</form>
<form id="2">
<input type="checkbox" name="chk" />
</form>
<form id="3">
<input type="file" name="file">
<input type="submit">
</form>
Add this script (an AJAX way):
<script>
$(document).ready(function(){
$("#3").submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "upload.php",
data: $('#1, #2, #3').serialize(),
success: function(res) {
if(res==="Success"){
alert("Success!!!");
}
}
});
});
});
</script>
UPDATE
As #Santosh Patel suggests, I too suggest the same, to enclose form contents inside div. But since you have come up with a design, I suggested you jQuery.
Related
So, I've got three forms on a website, two of which are in modal windows. I need to have ajax send input values (i.e. name, phone, email, radio button - price selection different in each form), but I couldn't get it to work, I don't know how to make sure all submitted form's inputs are sent. Here are the form examples:
<form action="POST">
<input type="text" name="user_name">
<input type="tel" name="user_phone">
<input type="email" name="user_email">
<button type="submit"></button>
</form>
<form action="POST">
<input type="text" name="user_name">
<input type="tel" name="user_phone">
<button type="submit"></button>
</form>
<form action="POST">
<input type="text" name="user_name">
<input type="radio" name="user_price"value="2000">
<input type="radio" name="user_price" selected value="4000">
<input type="radio" name="user_price"value="1000">
<input type="email" name="user_email">
<button type="submit"></button>
</form>
I looked into passing a selected state through jq in the data object, but not every form has radio buttons.
Here's the ajax I've been using:
$('form').submit(function (event) {
event.preventDefault();
$.ajax({
type: "POST",
url: "./mailer/smart.php",
data: $(this).serialize()
}).done(function () {
$(this).find("#name").val("");
$(this).find("#email").val("");
$(this).find("#message").val("");
$('#thankyou').show(); //вместо #thankyou подставь нозвание блока с модальным окном
$("form").trigger("reset");
});
return false;
});
I'm new to the ajax concept, I've googled a lot, but I just don't seem to get it. I would really appreciate any help.
You can have separate event handler's to send the submitted form values.
We can use selectors to select each form. Lets say if we have id of 'form-1' for the first form, then you can use $('#form-1').submit(...) instead of generic form selector.
Before anyone marks this as a duplicate, I have looked at many sites and am currently using this one - jQuery - passing value from one input to another for guidance, yet no result... I am trying to pass a value from one input in one form to another input in a 'table'. I have put it in a table because of a very weird reason - it does not display a Sparql value when in a form only displays in a table so the input was placed in a table. My code is below:
Form
<form onclick="txtFullName.value = txtFirstName.value +'_'+ txtLastName.value">
First name : <input type="text" name="txtFirstName" value="#ViewBag.FirstName"/> <br><br>
Last name : <input type="text" name="txtLastName" value="#ViewBag.LastName" /> <br><br>
Full name : <input type="text" id="txtFullName" name="txtFullName"> <br><br />
<input id="submit12" type="button" value="Submit">
</form>
Table
<table id="results">
<Full name:
<br>
<input id="userInput" type="text" name="fullname" ${userJson.userId == ''?'': 'disabled'} value="#ViewBag.DisplayName">
<br>
<input id="submit" type="submit" value="Submit">
</table>
JQUERY
$('#submit12').on('click', function (e) { //Form submit
$('#userInput').change(function () {
$('txtFullName').val($(this).val());
});
});
I am trying to display the txtFullName into userInput input when pressing submit but right now only the `txtFullName' is displayed when pressing submit. Also the submit is the submit button in the FORM.
Anymore info needed let me know:)
You need to change the onclick to action on the form if you are trying to use submit button. The other way is to use input type button instead of submit:
So:
$(document).ready(function() {
$('#submit12').on('click', function (e) {
console.log('test');
$("#txtFullName").val($("#txtFirstName").val() + '_' + $("#txtLastName").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
First name : <input type="text" id="txtFirstName" value="First"/> <br><br>
Last name : <input type="text" id="txtLastName" value="Last" /> <br><br>
Full name : <input type="text" id="txtFullName" name="txtFullName"> <br><br />
<input id="submit12" type="button" value="Submit">
</form>
If you want to display txtFullName into userInput, simply do something like this:
$('#submit12').on('click', function (e) { //Form submit
$('#userInput').val($('#txtFullName').val());
});
And why do you need change function there , if yo need changes when click submit.
Edit your JQuery like this:
$('#submit12').on('click', function (e) { //Form submit
$('#userInput').change(function () {
$('#txtFullName').val($(this).val());
});
});
$('#submit').on('click', function () { //Form submit
$('#userInput').val($('#txtFullName').val());
});
I don't clearly understand why you do it but It can fix your code.
It is not entirely clear what the two buttons do, but the operation itself is really very simple. See comments inline for explanations:
// Wait until the DOM is loaded and all elements are avaialble
window.addEventListener("DOMContentLoaded", function(){
// Get references to the DOM elements you'll need
var theForm = document.getElementById("frmTest");
var txtFirstName = document.getElementById("txtFirstName");
var txtLasttName = document.getElementById("txtLastName");
var txtFulltName = document.getElementById("txtFullName");
var txtUserInput = document.getElementById("txtUserInput");
var btn1 = document.getElementById("btnSubmit1");
var btn2 = document.getElementById("btnSubmit2");
// Function to join names together
function combine(){
txtFullName.value = txtFirstName.value + '_' + txtLastName.value;
}
// Set event handlers
frmTest.addEventListener("click", combine);
btn1.addEventListener("click", combine);
});
<!-- Keep you JavaScript out of your HTML -->
<form id="frmTest">
First name : <input type="text" id="txtFirstName" name="txtFirstName" value="#ViewBag.FirstName">
<br><br>
Last name : <input type="text" id="txtLastName" name="txtLastName" value="#ViewBag.LastName" >
<br><br>
Full name : <input type="text" id="txtFullName" name="txtFullName"> <br><br />
<input id="btnSubmit1" type="button" value="Combine Names">
<table id="results">
<Full name:
<br>
<input id="txtUserInput" type="text" name="fullname" ${userJson.userId == ''?'': 'disabled'} value="#ViewBag.DisplayName">
<br>
<input id="btnSubmit2" type="submit" value="Submit">
</table>
</form>
All I am looking to do here is take the form inputs of one form and submit it to another form linked to an iFrame. Purpose of this is that the visitor can preview what car he has selected in the iframe, if happy press save one form one and done.
I feel like I'm almost close, but I can't figure how to send the data from form one to the iFrame post and can't find any answers on how to do this. I got a single form version working as below, but can't pull in the data from form one to submit to iFrame
<form action="/save.php" method="post" id="save">
<input type="text" name="firstname">
<input type="text" name="carname">
<input type="text" name="cartype">
<button type="submit" name="save">Save</button>
</form>
<form action="/preview.php" target="iframe" method="post" id="iframebox">
<button id="preview" type="submit" name="reload" value="post">Reload</button>
</form>
<iframe name="iframe" src="/preview.php" ></iframe>
$('#preview').click(function(e){
e.preventDefault();
var d = $("#save").serialize();
$('#iframebox').append(d);
$('#iframebox').submit();
});
This is kind of dirty, but if you need to do it in an iFrame, it works. Your preview box currently was just a form element and you were appending query string text inside of it essentially. If you want to actually send it to the iframe itself, you need to parse the inputs and have it submit to the preview page that is in the targeted iFrame. You can either use static named inputs if you know that they will always exist, or if there are going to be additional inputs that you cannot predict, you can have the JS generate hidden input elements on the fly.
In form.php
<form action="save.php" method="post" id="save">
<input type="text" name="firstname" placeholder="firstname">
<input type="text" name="carname" placeholder="carname">
<input type="text" name="cartype" placeholder="cartype">
<button type="submit" name="save">
Save
</button>
<button id="preview">
Preview
</button>
</form>
<form action="preview.php" target="iframe" method="post" id="iframebox">
<input type="hidden" name="firstname">
<input type="hidden" name="carname">
<input type="hidden" name="cartype">
</form>
<iframe name="iframe" src="preview.php" ></iframe>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$('#preview').click(function(e) {
e.preventDefault();
$("#save input").each(function(index, value){
$('#iframebox input[name="' + value.name + '"]').val(value.value);
});
$('#iframebox').submit();
return false;
});
</script>
In preview.php
<ul>
<li>
First Name : <?php echo $_POST['firstname'] ? : "N/A"; ?>
</li>
<li>
Car Name : <?php echo $_POST['carname'] ? : "N/A"; ?>
</li>
<li>
Car Type : <?php echo $_POST['cartype'] ? : "N/A"; ?>
</li>
</ul>
I have a fairly simple HTML form which has a number of HTML input buttons on it (input type="button"). The buttons use a small piece of JavaScript to change the displayed value when clicked (Yes and No). I am happy with this functionality but would like to know the best way to record the values for later submission into a database.
I have this at the moment:
<script>
function toggleynquestion(button)
{
if(document.getElementById("yn_toggle").value=="Yes"){
document.getElementById("yn_toggle").value="No";}
else if(document.getElementById("yn_toggle").value=="No"){
document.getElementById("yn_toggle").value="Yes";}
}
</script>
<form method="post" action="ynquestion_submit.php" name="yn_submit">
<p> Yes or No question :
<input type="button" name="yn_question" id="yn_toggle" value="Yes" onclick="toggleynquestion(this);"/>
</p>
<input type="submit" value="Save">
</form>
Any ideas would be greatly appreciated.
You can always use hidden form elements, they will get sent to the server just like text inputs:
function toggleynquestion(button)
{
if(document.getElementById("yn_toggle").value=="Yes"){
document.getElementById("yn_toggle").value="No";
document.getElementById("yn_answer").value="No";
} else if(document.getElementById("yn_toggle").value=="No"){
document.getElementById("yn_toggle").value="Yes";
document.getElementById("yn_answer").value="Yes";
}
}
<form method="post" action="ynquestion_submit.php" name="yn_submit">
<p> Yes or No question :
<input type="button" name="yn_question" id="yn_toggle" value="Yes" onclick="toggleynquestion(this);"/>
<input type="hidden" name="yn_answer" id="yn_answer" value="Yes" />
</p>
<input type="submit" value="Save">
</form>
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.