I have a page with a form where a user enters details. What I need to do is, when the user clicks the submit button of the form, a popup window appears that is passed all of the values of the form.
index.php
<?php
include "add_complain.php";
?>
<form action="" enctype="multipart/form-data" method="post" >
Add Cover Pic :<br>
<input name="cover_pic" type="file" id="cover_pic"/><br>
Article title :<br>
<textarea name="article-title" id="article-title" style="width: 100%">
</textarea><br>
Article body :<br>
<textarea name="article-body" id="article-body" style="height: 100px">
</textarea><br>
Choose Image :<br>
<input name="file[]" type="file" id="file"/>
<input type="button" id="add_more" class="upload" value="Add More Files"/><br><br>
Insert Embedded code for video :<br>
<input type="text" name="embedded_code"><br>
<input name="submit" type="button" id="submit" value="SUBMIT" onclick="popup();" /><br>
</form>
<script>
function popup()
{
$(".background_popup").show();
$("#modal").show();
}
</script>
add_complain.php
<div id="modal" class="popupContainer" style="display:none;">
<header class="popupHeader">
<span class="header_title">ADD COMPLIAN</span>
<span class="modal_close"><i class="fa fa-times"></i></span>
</header>
<section class="popupBody">
<div>//fetch form data
</div>
</section>
</div
This is my code.. i m not able to fetch form values
If you just want to display the data to your modal/popup, you can use jquery val() and jquery text()
Like this:
<script>
//insert the following code to your popup function
//get the values from the form
var coverPic = $('#cover_pic').val();
var articleTitle = $('#article-title').val();
var articleBody = $('article-body').val();
//insert the values to your <p>'s
$('#coverPic').text(coverPic);
$('#articleTitle').text(articleTitle);
$('#articleBody').text(articleBody);
</script>
<!-- supposed to be your modal body -->
<div>
<p id='coverPic'></p>
<p id='articleTitle'></p>
<p id='articleBody'></p>
</div>
If you want to send it as a form data via AJAX use jquery serialize()
You can refer to this: get All Form elements values using jquery?
Related
I'm using TinyMCE text editor on my website and I have problem with gettingtext from the TinyMCE and then insert to the db. I'm propably blind, but a don't see what wrong. Working with PDO.
Header, activate the editor
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script>tinymce.init({ selector:'textarea' });</script>
Forms
<?php include "InsertArticles.php"; ?>
<div id="editor">
<form method="post">
<textarea name="Obsah"></textarea>
</form>
</div>
<div id="inputaddnadpis">
<form method="post">
Nadpis: <input type="text" name="Nadpis">
</form>
</div>
<form method="post">
<input type="submit" name="Article" id="InsertArticles" value="Add article">
<input type="submit" name="Tip" id="InsertTips" value="Add tip">
</form>
Insert
<?php
include_once "db.php";
global $db;
if (!empty($_POST["Article"])) {
$sqlVlozeni = "INSERT INTO WEB_ARTICLE (Nazev, Clanek) VALUES (:nazev, :clanek)";
$sqlProvedeni = $db->prepare($sqlVlozeni);
$stav = $sqlProvedeni->execute(array(":nazev" => $_POST["Nadpis"], ":clanek" => $_POST["Obsah"]));
}
?>
Submitting the third form will not submit values from the first two forms.
In general, only the inputs inside a particular form will be submitted with that form.
Consider using only one <form> element around all of your inputs.
<form method="post">
<div id="editor">
<textarea name="Obsah"></textarea>
</div>
<div id="inputaddnadpis">
Nadpis: <input type="text" name="Nadpis">
</div>
<input type="submit" name="Article" id="InsertArticles" value="Add article">
<input type="submit" name="Tip" id="InsertTips" value="Add tip">
</form>
I have a problem with submitting a input field. I know I am not the first one who ask this question but I looked at the answers and they didn't work.
I have an input field and a submit button inside a div. I have the code working so that you can search on button press but I can't get submitting on enter press working.
html:
<div class="search singers" action="templates/search/search_singer.php" method="POST">
<input name="search" type="text" id="search" placeholder="Search here for singers" onkeyup="autosug();" data-file="search_singers"/><input class="button" type="submit" value="Search" onclick="search();"/>
<div id="output" class="output">
</div>
</div>
Jquery code:
var link = '#search';
//post input
$(function(){
$(link).keydown(function(e){
if (e.keyCode == 13) {
$(link).submit();
//He detect an enter press but stops then
}
});
});
I found the Jquery code on this site
And here a similar question: here
problem sovled I came at the idea that I have a function that makes the ajax request to send the data to php. I now call that function on enter press.
Your form should be like this. You forgot the form tag in your code, and that's why the form won't submit.
<div class="search singers">
<form name='your form' action="templates/search/search_singer.php" method="POST">
<input name="search" type="text" id="search" placeholder="Search here for singers" onkeyup="autosug();" data-file="search_singers"/>
<input class="button" type="submit" value="Search"/>
</form>
<div id="output" class="output">
</div>
</div>
And second thing your autonsan function like this
<script>
function autosug() {
alert("You you are here");
}
</script>
You need to use a form. So when you will press enter, then form will be submitted including input field value.
<div class="search singers">
<form action="templates/search/search_singer.php" method="POST">
<input name="search" type="text" id="search" placeholder="Search here for singers" onkeyup="autosug();" data-file="search_singers"/>
<input class="button" type="submit" value="Search" onclick="search();"/>
</form>
<div id="output" class="output">
</div>
</div>
So I am actually not sure what I am doing wrong, and I am sure it is just some small mistake, but I can't seem to get the submit button to take the information in the form and and send it to the database.
Here is what my code looks like.
So with this I am able to successfully connect to the database:
<?php
$mysql_host = 'localhost';
$mysql_pass = '';
$mysql_user = 'root';``
$mysql_db = 'blog';
if (! #mysql_connect($mysql_host, $mysql_user, $mysql_pass) || ! #mysql_select_db($mysql_db)){
die('Error');
}
?>
and I able to see the contents of table by printing them to the screen.
I believe the problem is here in this simple html form:
<form action="index.php" method = "post">
<div class="ui form">
<div class="field" name = "title">
<label>Title</label>
<input type="text">
</div>
<div class="field" name = "post">
<label>New Post</label>
<textarea></textarea>
</div>
</div>
<br>
<div class="ui submit button" name = "submit">Submit New Post</div>
</form>
I am just curious as to which php code I should use to connect this form so I am able to send the contents of the form over to the database.
elements can be styled just like elements and can have type="submit" so the instead of div you can use and avoid extra spaces between attributes and values. Instead of your code:
<div class="ui submit button" type="submit" name="submit">Submit New Post</div>
you can use:
<button class="ui submit button" type="submit" name="submit">Submit New Post</button>
as like :
<form action="index.php" method="post">
<div class="ui form">
<div class="field">
<label>Title</label>
<input type="text" name="title">
</div>
<div class="field">
<label>New Post</label>
<textarea type="text" name="post"></textarea>
</div>
</div>
<br>
<button class="ui submit button" type="submit" name="submit">Submit New Post</button>
</form>
I hope you will get your desire result.
provide the name field into the html tags e.g.
<form action="index.php" method="post">
<input type="text" name="title">
<input type="text" name="Sub-title">
<input type="submit" name="submit">
</form>
Inside index.php you can write
$title = $_POST['title'];
$subtitle = $_POST['Sub-title'];
You missing name attribute from the fields and elements can be styled just like elements and can have type="submit" so the instead of div you can use and avoid extra spaces between attributes and values.
and change input of a submit div
Submit New Post
You are missing name attribute from the input fields , and the submit should be a input if you are a using normal PHP form submit
<input type="text" name="title">
and change the submit div to a input
<input type="submit" name="submit" value="Submit New Post" />
You are missing a name attribute in your form fields:
<input type="text">
Should be something like:
<input type="text" name="title">
This is mandatory in order to be able to retrieve your POST datas in your PHP page, and it applies to every input you need to process in your PHP page (in this case your <input> and your <textarea> elements).
Once done this, you'll be able to retrieve each specific POST value in your PHP page by accessing the superglobal array $_POST:
$title = $_POST['title'];
The problem is here:
<div class="ui submit button" name = "submit">Submit New Post</div>
it should be:
<div class="ui submit button" type="submit" name = "submit">Submit New Post</div>
However, I suggest you use PDo to handle this for better.
I have a div with dynamic repeating form to change image of a repeating div based on respective id, when a div image is clicked i want to trigger file input for clicked div.
contents are loaded into div(image-container) with jquery post request.
HTML
<div id="image-container"></div>
//repating dynamic form
<?php while($row=mysqli_fetch_assoc($result)):?>
<div class="image">
<form name="image_change">
<img src=".." class="image_change"/>
<input name="image" type="file" />
<input name="id" type="hidden" />
<input name="edit" type="submit" />
</form>
</div>
<?php endwhile;?>
jQuery
$('#image-container').on('click', 'form[name=image_change] .image_change', function(){
$(this).find('input[name=image]').trigger('click');
return false;
});
This works only when form is not repeating, how can i make it work with repeating form.
Please see and suggest any possible way to do this.
Thanks.
This is because you have multiple forms with the same name and only the first one is recognized.
Remove name attribute from the form:
<div class="image">
<form>
<img src=".." class="image_change"/>
<input name="image" type="file" />
<input name="id" type="hidden" />
<input name="edit" type="submit" />
</form>
</div>
and modify the js code to the following
$(document).on('click', 'form .image_change', function(){
$(this).parent().find('input[name=image]').trigger('click');
return false;
});
if you need to differentiate the form add ids to the forms.
I have a 3 page registration page. After the user selects an option on the first page and clicks submit, the form transforms into the next form using jquery's animate method, meaning it stays on the same page. The question I have is how to get the data from the first form because the content of the 2nd forms is dependent on that information. Here's my html:
<div id="Registration" style="display:none;">
<div class="box">
<form id="frmtype1" action="#" name="frmtype1" method="post">
<header>Registration Options</header><br/>
<label for="Reg_type1"><input type="radio" name="Reg_type" id="Reg_type1" value="1"/> Option 1</label> <br/><br/>
<label for="Reg_type2"><input type="radio" name="Reg_type" id="Reg_type2" value="2"/> Option 2</label><br/><br/>
<label for="Reg_type3"><input type="radio" name="Reg_type" id="Reg_type3" value="3"/> Option 3</label><br/><br/>
<p id="error_message" style="display:none">Please choose an option</p><input type="submit" class="button" name="Submit" value="Submit"/>
</form>
<form name="everything" id="everything" action="#" method="post">
<header>Registration Information</header><br/>
<label>First Name<font color="red">*</font>: <input type="text" name="fname" id="fname" /> </label><br/>
Last Name*: <input type="text" name="lname" id="lname" /> <br/>
Address*: <input type="text" name="address" id="address" /> <br/>
</form>
</div>
</div>
So once an option is selected, the first form disappears and the next one appears. So how do I get the data of which option they selected? Thanks
Since they depend on information on one form, the "pages" should really be the same form. You use the jQuery/JavaScript to show/hide the "current page". This will allow you to submit all the data in one go.
Wrap all the input elements in one html form tag
For each form "segment" you will need to use your js to hide/show the wrapping HTML container. The default being "page 1" of the form and the rest hidden.
Change your submit button to just a button and have a on click event on it. When the user clicks the button the input is validated and then the jQuery unhides "page 2".
On your last "page" have a normal submit button and then all the form data is posted in one.
For example, the html might look like this:
<script type="text/javascript">
$(document).ready(function{
$(".next-page").click(function(){
$(".box-wrapper").hide();
$("#page-" + $(this).data("page")).show();
});
});
</script>
<div class="registration">
<form name="regform" action="" method="post">
<!-- Page 1 -->
<div class="box-wrapper" id="page-1">
<div class="box">
<!-- form inputs go here -->
<input type="button" name="next-page" class="next-page" value="Continue" data-page="2"/>
</div>
</div>
<!-- Page 2 -->
<div class="box-wrapper" id="page-2" style="display: none;">
<div class="box">
<!-- form inputs go here -->
<input type="button" name="next-page" class="next-page" value="Continue" data-page="3"/>
</div>
</div>
<!-- Page 3 -->
<div class="box-wrapper" id="page-3" style="display: none;">
<div class="box">
<!-- form inputs go here -->
<input type="submit" name="submit" class="submit" value="Complete Registration"/>
</div>
</div>
</form>
</div>
Using jquery --- $('input[name=Reg_type]:checked').val() this will give you the selected value.