SimpleModal form submit - php

i have a php page "formpage.php", in there is an form like this:
<div id='hiddenform' style='display:hidden'>
<form name="testform" action="formpage.php" method="post">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
</div>
this form displayed with jquery and simple modal (example):
$(".show_hide").click(function(){
$('#hiddenform').modal({overlayClose:true});
});
all works fine, the box open with SimpleModal and the form is displayed, but i cant submit the form, when i press the submit button nothing happens. what should i do? the form and the submit works fine without SimpleModal.
i want submit the form (open with SimpleModal) to formpage.phhp (self) and then i use the posted variables further in the script.
thank you for your help!

Does this work? If it does something in your js is preventing the default behaviour of the form(might be simplemodal might be something else):
$(".show_hide").click(function(){
$('#hiddenform').modal({
overlayClose:true,
onShow: function() {
$('.simplemodal-data input[type=submit]').click(function() {
$.post('the_url_where_you_want_to_send_your_data_to', $(this).closest('form').serialize(), function(data) { alert('we have a response and form has been sent!'); })
}
}
});
});

Related

isset validation in PHP failing when form submitted through jquery

My if(isset) validation is returning false after I have submitted the form through jQuery ,however works fine when done without jquery. Reason I am using jQuery is because I need to submit multiple forms:
Button
<input class="btn btn-primary" type ="submit" id="myButton"
name="create_record" value="Submit 1">
jQuery:
<script>
$(document).ready(function () {
$("#myButton").click(function (event) {
event.preventDefault();
$("#form1").submit();
// $("#form2").submit();
});
});
</script>
PHP
<?php
if(isset($_POST['create_record'])){
$ecode = $_POST['ecode'];
$ename = $_POST['ename'];
$date = $_POST['date'];
$jobRole = $_POST['jobRole'];
}else{
echo "did not receive anything";
}
?>
Always getting "did not receive anything" . Can someone please help.
The submit button value only gets sent if the form is submitted in the traditional way by a button click. Since you are submitting the form via javascript, you'll need to explicitly include the submit button's value or validate your post data in some other way. If you need the value of the specific button that was clicked, something like this should work:
$("#myButton").click(function (event) {
event.preventDefault();
var el = '<input type="hidden" name="' + $(this).prop('name') + '" value="' + $(this).val() + '">';
$("#form1").append(el).submit();
});
As for your objective of submitting multiple forms at once, I believe it's impossible without using ajax as discussed here. If you need guidance on how to do that, better to open a new question.
Your code, isset($_POST['create_record']) maybe false or it didn't receive any values. If your query is only in one PHP file together with your jQuery, you need to check first your algorithm or use var_dump() for testing. Second, If it didn't work, make an alternative solution for it. Do the proper HTML code when using form or make another PHP file for receiving post purpose only.
<form action="directory_to_another_file" method="POST">
<!-- SOME INPUTS HERE -->
<input type="submit" value="Submit 1" name="create_record">
</form>
Try to test all of your codes.
You have to set form method as "POST" type and if you want to receive the form data in same page then empty the "action" key otherwise give the target link.
<?php
if(isset($_POST['create_record'])){
print_r($_POST);
}
?>
<form action="" method="POST" id="form1">
<input type="text" name="create_record" value="Submit 1"/>
</form>
Submit
<script>
$(function(){
$("#myButton").click(function (event) {
event.preventDefault();
$("#form1").submit();
});
})
</script>
Let me know if it's work for you.

HTML form submit show javascript confirm window

I have a HTML form:
<form method="post" action="addticketupdate.php">
....
</form>
Then above the form I have:
<?php
if(isset($_POST["submit"])) {
... do stuff here
}
?>
So the submit button in my form has an id and name of "submit"
I want to make a JavaScript confirm box popup when the submit button is clicked, the statement says: If user clicks "OK" the php code excuted, else do nothing.
How can I do that?
Simply use this:
<form method="post" action="addticketupdate.php" onsubmit="return confirm('Do you want to submit the form?');" >
Option 2: (On submit button click)
$('#submit').click(function() {
var res = confirm('Do you really want to submit the form?');
if(!res){
return false;
}else{
//submits form
}
});
You can do as,
<form method="post" action="addticketupdate.php" onsubmit="return confirm('Need to submit??');">
<!-- your other html input code -->
<button type="submit">submit</button>
</form>
<script>
function validate() {
var result = confirm("Do you want to submit!");
return result;
}
</script>
<form name="form-name" onsubmit="return validate();">
That should be making using dialog box instead alert popup box.
However dialog don't have full support so "Fancy Box" is the best in this case.
FancyBox
So after installizing fancy box into your website you should remove the default button they have there and change it to input type submit and add name it as "submit".

Perform 2 Actions On Button Click Form

My Requirement
Form Submission in New Window & Redirect Existing Page to a new page
on same click.
When I tried only Form submission is happening. Javascript function to redirect is not working.
Html
<form id="feedback.php" name="form1" method="post" action="feedback.php" target="_blank">
<input type="submit" class="button" value="SUMBIT" onclick="btntest_onclick();"/>
</form>
Javascript
<script>
function btntest_onclick()
{
window.location.href("mainpage.php");
}
</script>
Actual
But Only Form Submission is Happening in New Window. Existing Page is
not redirected.
Please tell me how to do this ?
Your HTML :
<form id="feedback.php" name="form1" method="post" action="feedback.php" target="_blank">
<input type="submit" class="button" value="SUMBIT" onClick="btntest_onclick()"/>
</form>
See onClick
Your Javascript :
function btntest_onclick()
{
setTimeout(function(){
window.location.href = "mainpage.php";
},0);
}
window.location.href is not a function.
And apparently it needs to be async to work.
JsFiddle
add onsubmit to your form.
and inside function do something like that:
function btntest_onclick() {
window.open("http:// your url");
window.location.href="/mainpage.php";
}

How to have two buttons in a same form to do different actions in ajax?

I have a form, which take name from form and it sends to javascript codes and show in php by Ajax. these actions are done with clicking by submit button, I need to have another button, as review in my main page. how can I address to ajax that in process.php page have "if isset(submit)" or "if isset(review)"?
I need to do different sql action when each of buttons are clicked.
how can I add another button and be able to do different action on php part in process.php page?
<script type="text/javascript">
$(document).ready(function(){
$("#myform").validate({
debug: false,
submitHandler: function(form) {
$.post('process.php', $("#myform").serialize(), function(data) {
$('#results').html(data);
});
}
});
});
</script>
<body>
<form name="myform" id="myform" action="" method="POST">
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value=""/>
<br>
<input type="submit" name="submit" value="Submit">
</form>
<div id="results"><div>
</body>
process.php:
<?php
print "<br>Your name is <b>".$_POST['name']."</b> ";
?>
You just need to add a button and an onclick handler for it.
Html:
<input type="button" id="review" value="Review"/>
Js:
$("#review").click(function(){
var myData = $("#myform").serialize() + "&review=review";
$.post('process.php', myData , function(data) {
$('#results').html(data);
});
}
);
Since you have set a variable review here, you can use it to know that is call has come by clicking the review button.
Bind the event handlers to the buttons' click events instead of the form's submit event.
Use the different event handler functions to add different pieces of extra data to the data object you pass to the ajax method.

Disable the enter key on a jquery-powered form

I have a form using the form jQuery plug in to handel the posting of the data. In the example i am working with the data is psoted to another php file which reades a database and echos back a result which is displayed below the from.
The code works very well with one glitch. If you hit the enter button while the text filed is selected everything cleared including the result that has been written to the screen. Is it possible to disable to enter key and prevent it from doing this?
FORM:
<html>
<head>
</head>
<p>enter code here
<form name="form" action="" method="">
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name"/>
<input type="button" value="get" onclick="get();"/>
</form>
<div id="age"></div>
</p>
</body>
</html>
SCRIPT:
function get() {
$.post('data.php', {name: form.name.value},
function(output) {
$('#age').hide().html(output).fadeIn(1000);
});
}
}
Cheers.
You should consider using the jQuery Forms Plugin. It will save you from doing some of the dirty work, additionally it will intercept all ways of submitting the form - so instead of having to disable the RETURN key it will submit your form via AJAX.
If you don't want that, get rid of the button with the onclick event and replace it with a submit button and register your function as a onsubmit handöer:
$('form[name=form]').submit(function(e) {
e.preventDefault();
$.post('data.php', {name: form.name.value},
function(output) {
$('#age').hide().html(output).fadeIn(1000);
});
}
});
$(document).ready(function(){
$('form').submit(function(){
return false;
});
});
This will prevent the form from submitting, however the form will not work at all for users with javascript disabled.
A found some tuts and solved the issue.
I just put this in before my Jquery code to disable the enter button.
$(function () {
$('input').keypress(function (e) {
var code = null;
code = (e.keyCode ? e.keyCode : e.which);
return (code == 13) ? false : true;
});
});

Categories