I am trying insert some information into mysql db. One of the elements is a textarea which I filled with javascript code below. So it contains an html content. When I try to insert into db, it is inserted with html syntax (with tags and etc.). I want to insert only specific part of that content.
$('#checkoutButton').click(function(){
var content2 = $('#checkout').html();
$('#checkoutText').val(content2);
});
For instance, this is the content and I want to insert only "2 Cappuccino" and "2 Fiesta" part. What should I do?
<h3 align="centre">Order List</h3>
<p class="items"><span>2 Cappuccino</span><span class="extra">asahsajd</span></p><p class="items"> <span>2 Adet Fiesta</span><span class="extra">abvsvss </span></p>
You should be submitting this data via a form.
<form action='/url-to-send-data'>
<input type='text' name='input1'>
<input type='text' name='input2'>
<button type='submit'>Submit</button>
</form>
If you can access what data is going into the html you gave as an example you need to wrap inputs in a form which can make it easier to post the data to php:
<h3 align="centre">Order List</h3>
<form method="post">
<div class="items">
<input type="text" name="item[]" value="2 Cappuccino" />
<input type="text" name="extras[]" class="extra" value="asahsajd"/>
</div>
<div class="items">
<input type="text" name="item[]" value="2 Adet Fiesta"/>
<input type="text" name="extras[]" class="extra" value="abvsvss"/>
</div>
<input type="submit" />
</form>
You can change their values or append items to the form. Upon posting you can access them as arrays using the $_POST variable in PHP:
<?php
var_dump($_POST['item']);
?>
Related
<form name="payform" action="payment.html" method="POST">
Amount: <input type="text" id="amount">
<button id="buttonPay" type="submit" onclick="someFunction()">Submit</button>
</form>
I need to post the text box content along with some variables which are defined outside of the form.
To pass any data with a form submit you could add an input hidden tag inside your form (it has to be inside the form tag):
<input type="hidden" name="varKey" value="varVal" />
If the data lies outside the form tag for some reason, use jQuery to get the data and update the hidden tag's value
<?php
$out_side_var = "myData";
?>
<form name="payform" action="payment.html" method="POST">
Amount: <input type="text" id="amount">
<input type="hidden" name="myData" id="myData" value='<?php echo $out_side_var ?>'>
<button id="buttonPay" type="button" onclick="someFunction()">Submit</button>
</form>
I have some data being created(generated from database) using a while loop. Each set of data carries some form of id and its corresponding button is added to it. Now, when I click a button, I'd like to pass the id(single php variable) of the data related to this button to a modal window(that has a form) that pops and also make it the value of an input field. Here's my code so far:
The data from database:
<?php while ($data = mysqli_fetch_assoc($data_set)) { ?>
<div class="w3-section w3-row w3-card-2">
<div class="w3-half">
<div class="apartment-image w3-card-4">
<header class="w3-container">
<h4><?php echo $data['data_name']; ?></h4>
</header>
<div class="w3-container">
<img src="<?php echo "images/".$data['Image1']; ?>" class="w3-image" alt="<?php echo $data['dataimgname']; ?>">
</div>
<footer class="w3-contanier w3-border-top">
<div class="w3-border-right">
<button class="w3-btn w3-btn-block" type="button" name="btnBook" id="modalOpener" onclick="document.getElementById('book').style.display='block';">
Book or Request Tour
</button>
</div>
The Modal:
<div id="book" class="w3-modal">
<div class="w3-modal-content">
<header class="w3-container">
<span onclick="document.getElementById('book').style.display='none'" class="w3-closebtn">
×
</span>
<h2>Book or Request Tour</h2>
</header>
<div class="w3-container">
<form class="w3-form" action="bookntour-handler.php" method="post">
<div class="w3-group">
<label class="w3-label" for="fullname">Full Name:</label>
<input class="w3-input" type="text" name="fullname" value="">
</div>
<label class="w3-label" for="email">E-mail:</label>
<input class="w3-input" type="email" name="email" value="">
<label class="w3-label" for="telephone">Telephone:</label>
<input class="w3-input" type="text" name="telephone" value="">
<label class="w3-label" for="dataname">Data Name:</label>
<input class="w3-input" type="text" name="dataname" value="">
<div class="w3-group">
<input class="w3-btn" type="submit" name="btnSubmit" value="Submit">
</div>
</form>
</div>
<footer>
</footer>
</div>
Like I said earlier, I want to pass the id associated with the button but from my code there is nothing that mentions about "id" so let's use.
<?php echo $data["data_name"]; ?>
When I open the modal window, I'd like this variable to be made as the value for input:
<label class="w3-label" for="dataname">Data Name:</label>
<input class="w3-input" type="text" name="dataname" value="">
I have looked at a couple of options so far but most of them seem unnecessary in my case or I simply don't understand them. Like this and this and this. This seems like a workable solution but it requires me to fetch the whole data again, from the database(using AJAX) which I do not want. I just want that one value.
I am using W3CSS for my layouts and creating the modal. A solution in jQuery/JavaScript or PHP(or both) will be appreciated. Thank you!
Update
So, I somehow managed to solve part of the problem. I added this function to my external JavaScript file:
function showModal() {
document.forms["bookntourForm"]["apartmentno"].value = document.getElementsByClassName("modalOpener")[0].getAttribute("value");
document.getElementById('book').style.display='block';
}
Then the code for the button that calls the above function looks like this:
<button class="w3-btn w3-btn-block modalOpener" type="button" name="btnBook" onclick="showModal()" value="<?php echo $data['data_name']; ?>">
Book or Request Tour
</button>
This brings up a new problem. Whenever I open the modal, the value for <input class="w3-input" type="text" name="dataname" value=""> on the modal is the same for all modals although they are different when each button is generated.
You can pass your id through ajax to the backend and retrieve necessary data regarding that ID by using a query,
Then set values to the necessary place inside the success method.
As you say, I don't think as a good suggestion to use data_name instead of id.
you can set your id in hidden field and use it. because "data_name" will not be good solution to retrieve data by unique field.
I don't know if I have done this in a proper manner, but it was as simple as this. I changed the value of onclick attribute of the button to:
<button class="w3-btn w3-btn-block modalOpener" type="button" name="btnBook" onclick="showModal('<?php echo $apartment["ApartmentNo"]; ?>')">
Book or Request Tour
</button>
The showModal() function in the external JS now looks like this:
var aptNo;
function showModal(aptNo) {
document.forms["bookntourForm"]["apartmentno"].value = aptNo;
document.getElementById('book').style.display='block';
}
It now works the way I wanted.
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 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
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.