Form submit in jquery dialog box not working - javascript

In the following code, both buttons of dialog box is meant to submit form. But its not submitting when buttons from dialog are clicked. If user chose yes we need to send a value to the posting page. please help me with this.
<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post" name="edit_billto" id="edit_billto">
<input type="hidden" name="option" value="com_phpshop" />
<input type="hidden" name="page" value="<?php echo $next_page; ?>" />
<input type="hidden" name="next_page" value="<?php echo $next_page; ?>" />
<input type="hidden" name="Itemid" value="<?php echo $Itemid; ?>" />
<input type="hidden" name="autoship_flag" id="autoship_flag" value="0">
<input type="submit" id="bill_sumbit" class="button" name="submit" value="<? echo _E_SAVE ?>" <? echo $submit; ?> />
</form>
Jquery part
<div id ="alert" style="display:none"> <p> This address is used in autoship.
You need to change the address in autoship too?
</p></div>
<script>
$(document).ready(function() {
$("#alert").dialog({autoOpen: false,
modal: true,
buttons: {
No : function(){
isconfirm = true;
//$("form[name='edit billto']").unbind('submit');
$("#edit_billto").submit();
$(this).dialog("close");
//$("form[name='edit billto']").unbind('submit').submit();
},
Yes: save_info
},
resizable: true,
height: "auto",
width: "auto",
closeOnEscape: false,
title: "Autoship Update"
});
});
var isconfirm = false;
$( "form[name='edit_billto']" ).submit(function(e) {
//alert(isconfirm);
if(isconfirm === true){
return true;
}
if(isconfirm === false){
e.preventDefault();
$( "#alert" ).dialog( "open" );
}
});
function save_info(){
isconfirm = true;
$("#autoship_flag").val("1");
$("form[name='edit_billto']").unbind('submit');
$("form[name='edit_billto']").submit();
}
</script>

Not sure why, you're .submit() isn't working but you could try .trigger('click')
Something like this should work:
No : function(){
$("form[name='edit_billto']").off('submit');
$("#bill_sumbit").trigger('click');
}
,

Related

Could not validate the form input fields using PHP and JavaScript

I am facing an issue while validating the input fields inside the form using PHP and JavaScript. I am providing my code below.
<form autocomplete="off" action="<?php echo base_url() . $tourModule; ?>/search" method="GET" role="search" onSubmit="return checkform();">
<input type="text" data-module="<?php echo $module; ?>" class="hotelsearch locationlist<?php echo $tourModule; ?>" placeholder="Tourist Destination" value="<?php echo $_GET['txtSearch']; ?>">
<input type="hidden" id="txtsearch" name="txtSearch" value="<?php echo $_GET['txtSearch']; ?>">
<div class="col-md-12 form-group go-right colspecing col-xs-12 submit text-center">
<button type="submit" class="btn btn-lg pfb0 loader">
<?php echo trans( '012'); ?> </button>
</div>
</form>
<script type="text/javascript">
function checkform(){
console.log('validate form');
var textname=document.getElementById('txtsearch');
if (textname.value=='' || textname.value==null) {
alret('Please select Tourist Destination.');
return false;
}else{
return true;
}
}
</script>
Here I need before submit the form the input field will validate but in my case when I am clicking on submit button checkform function is not executing at all. I need to check that validation.
There is a typo in your code. Change alret to alert

How to Get Variables using Pop Ups in PHP?

I am new in PHP. I have two files. file_upload.php and test1.php i have a button on file_upload.php
<input type="button" value="Link More Opinion" onclick="popUp('test1.php');" />
JavaScript of that Button
<script type="text/javascript">
function popUp(url) {
window.open(url,'PHP Pop Up','width=500,height=500');
}
</script>
When i click on Button test1.php file is open in Pop Up window contain checkbox
Here is code
<?php
include "connection.php";
$sql= "SELECT * FROM `og_companies` ORDER BY name";
$result = mysql_query($sql) ;
while($row = mysql_fetch_array($result))
{
$all_opinions[] = $row['name'];
}
$all_opinions_implode = implode(",", $all_opinions);
$all_opinions_explode = explode (",", $all_opinions_implode);
?>
<form action="file_upload.php" id="form" method="post" name="form">
<?php
for ($i=0; $i<count($all_opinions_explode); $i++) {
echo "<input type='checkbox' name='test_link' > $all_opinions_explode[$i]";
//echo ;
echo'</br>';
}
?>
<input type="submit" name="submit" id="submit" value="submit"/>
Now i want to get Value of Checkbox on file_upload.php but i fail. Can anyone please help me?
you can solve your problem by using fancybox to open inline element!
I put both of your pages in one file and then I use fancy box to open #form1 element when you click on the button.
then you can check the checkboxes and see the result;
checked values printed to #print-values div element.
$(document)
.ready(function() {
$(".various").fancybox({
maxWidth: 800,
maxHeight: 600,
fitToView: false,
width: '70%',
height: '70%',
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none'
});
$('.button1').click(function(e) {
e.preventDefault();
$('.various').click();
});
})
.on('change', '[name=test-link]', function() {
$('#print-values').empty();
$('#print-values').append("<span>You've checked:</span><br />");
$('[name=test-link]').each(function() {
if ($(this).prop("checked")) {
var v = $(this).val();
$('#print-values').append(v + "<br />");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
<a class="various" href="#form1" style='display: none;'></a>
<input class='button1' type="button" value="Link More Opinion" />
<div id='print-values'></div>
<div style='display: none;'>
<form id='form1'>
<input type='checkbox' name='test-link' value="1" />
<span>1</span>
<br />
<input type='checkbox' name='test-link' value="2" />
<span>2</span>
<br />
<input type='checkbox' name='test-link' value="3" />
<span>3</span>
<br />
</form>
</div>

Disable a button when textbox has data in it

I see so many people ask to disable a button when a textbox is empty . how about disable a button when a textbox has data ?
this is my button code
<input type="submit" name="submit" value="Reserve" />
this is my textbox code
Name : <br><br><input type="text" name="name" value="<?php echo $name;?>" <?php if($name != "") echo "readonly"?> /> <br><br>
Name : <br><br><input type="text" name="name2" value="<?php echo $name2;?>" <?php if($name2 != "") echo "readonly"?> /> <br><br>
<input type="submit" name="submit" value="Reserve" <?php echo ($name != "")?"disabled":""; ?>/>
Using jQuery
$(":input").bind('keyup mouseup',function(){
disable_button();
});
function disable_button()
{
flag = false;
$(":input").each(function(){
if($(this).val()==""){
flag=true;
}
});
if(flag){
$("input[type=submit]").prop("disabled",false);
}
else
{
$("input[type=submit]").prop("disabled",true);
}
}
Demo

jquery slidetoggle is not hiding

i have a login hyperlink. so when i click on it a login form with id=nd_login_form will show.
<li class="active"><a href="#nd_login_form" ><?php _e('Login', 'ninety'); ?></a></li>
this is the login link. the form is:
<form action="<?php echo home_url(); ?>/?wcz" method="post" class="nd_form" id="nd_login_form" style="z-index:100;background:gainsboro;position:absolute;"><div class="nd_form_inner">
<p><label for="nd_username"><?php _e('Username','ninety'); ?>:</label> <input type="text" class="text" name="log" id="nd_username" placeholder="<?php _e('Username', 'ninety'); ?>" /></p>
<p><label for="nd_password"><?php _e('Password','ninety'); ?>:</label> <input type="password" class="text" name="pwd" id="nd_password" placeholder="<?php _e('Password','ninety'); ?>" /></p>
<input type="submit" class="button" value="<?php _e('Login →','ninety'); ?>" />
<input name="nd_login" type="hidden" value="true" />
<input name="redirect_to" type="hidden" id="redirect_to" value="<?php echo nd_login_current_url(); ?>" />
</p>
</div></form>
the jquery script i used is:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
(function ($) {
$(document).ready(function() {
$("#nd_login_form").slideUp();
$(".active").click(function () {
$("#nd_login_form").slideToggle("fast");
});
});
})(jQuery);
</script>
So the problem is when the document is ready first the form will not appear correctly and it will show up on clicking the login link. till now everything is fine. but on the next click on the login hyperlink the form is not hiding or sliding up. can anyone help me to find the mistake in here.??
replace the script with this
$(document).ready(function() {
$("#nd_login_form").slideDown();
$(".active").on('click',function () {
$("#nd_login_form").slideToggle("fast");
});
});
you have two docuent.ready functions in your script. and at first you want to show the form use the slideDown() class.Working Fiddle
Just add display:none to the form style
<form action="<?php echo home_url(); ?>/?wcz" method="post"
class="nd_form"
id="nd_login_form"
style="z-index:100;background:gainsboro;position:absolute;display:none">
and jQuery:
$(document).ready(function() {
$(".active").on('click',function () {
$("#nd_login_form").slideToggle("fast");
});
});
WORKING DEMO

form validation with captcha script

I have created custom contact from with Ajax and implemented in WordPress. Now I want to add custom captcha script.
Currently I am using this captcha script for my contact form 9lessons phpcaptcha but after implementing I am getting verification Wrong alert box every time. I don't know whats wrong in my code.
FYI: I have created plugin file so I have added all code in one file.
My Code:
<?php
session_start();
$cap = 'notEq';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if ($_POST['captcha'] == $_SESSION['cap_code']) {
// Captcha verification is Correct. Do something here!
$cap = 'Eq';
} else {
// Captcha verification is wrong. Take other action
$cap = '';
}
}
?>
<?php
function saleContactForm() {
?>
<form method="post" action="" id="SaleForm">
<ul class="cnt-frm">
<li><input name="sa_first_name" id="sa_first_name" type="text" value="First Name*" class="sl-txbx" maxlength="20" onchange="return trim(this)"></li>
<li><input name="sa_last_name" id="sa_last_name" type="text" value="Last Name*" class="sl-txbx" maxlength="20" onchange="return trim(this)"></li>
<li><input name="sa_company" id="sa_company" type="text" value="Company*" class="sl-txbx" maxlength="20" onchange="return trim(this)"></li>
<li><input name="sa_email" id="sa_email" type="text" value="Email*" class="sl-txbx" onchange="return trim(this)"></li>
<li><input name="sa_phone" id="sa_phone" type="text" value="Phone*" class="sl-txbx" maxlength="14" onchange="return trim(this)"></li>
<li><textarea name="sa_message" id="sa_message" class="sl-txara" onchange="return trim(this)">Message*</textarea></li>
<li><input type="hidden" name="action" value="saleAction"/></li>
<li>
<input type="text" name="captcha" id="captcha" maxlength="6" size="6"/>
<img src="http://localhost/example/wp-content/plugins/sale/captcha.php"/>
</li>
<li><input type="reset" name="reset" value="reset" id="sale_reset" class="re_none"></li>
<li><input type="submit" name="submit" value="submit" class="submit"></li>
</ul>
</form>
<script type="text/javascript">
jQuery('#SaleForm').submit(ajaxSubmit);
function ajaxSubmit(){
var capch = '<?php echo $cap; ?>';
if(capch != 'notEq'){
if(capch == 'Eq'){
alert("Your form is successfully Submitted ");
}else{
alert("verification Wrong!");
return false;
}
}
var SaleForm = jQuery(this).serialize();
jQuery.ajax({
type:"POST",
url: "<?php echo esc_url( home_url( '/' ) ); ?>wp-admin/admin-ajax.php",
data: SaleForm,
success:function(data){
alert('Thanks! Your request has been sent.');
jQuery( "#sale_reset" ).trigger( "click" );
},
error: function(errorThrown){
alert(errorThrown);
}
});
return false;
}
</script>
<?php
}
function widget_saleContactForm() {
saleContactForm();
}
wp_enqueue_script('jquery');
add_action('wp_ajax_saleAction', 'saleAction');
function saleAction() {
$sa_first_name = $_POST['sa_first_name'];
die();
}
add_action('wp_ajax_nopriv_saleAction', 'saleAction');
?>
captcha.php:
<?php
session_start();
$ranStr = md5(microtime());
$ranStr = substr($ranStr, 0, 6);
$_SESSION['cap_code'] = $ranStr;
$newImage = imagecreatefromjpeg("cap_bg.jpg");
$txtColor = imagecolorallocate($newImage, 0, 0, 0);
imagestring($newImage, 5, 5, 5, $ranStr, $txtColor);
header("Content-type: image/jpeg");
imagejpeg($newImage);
?>
I will appreciate if you help to sort out this issue.
Thanks.
As I seen your code, it will not call the captcha verification.
change the submit button name to some thing else otherwise the jquery submit will not triggered.
Verify the captcha using ajax on form submit event.
When it captcha code is correct then again send the ajax request to store the data.if its incorrect refresh the captcha image.

Categories