Help to add Form to jBox Modal window

[chrisjchrisj]

Thanks for your great jBox. I have tested it to use it to block a drag & drop file upload page until the user selects that they agree to Terms and then can either Continue or Cancel (code below).

I'd like some guidance to see if I can add a Form where the user must enter a name and email address into two Form fields and have 'confirmButton' be the 'Submit' (submit the form) before he can 'Continue' (to the upload page). I have tried and failed adding the

... code into the content: ' ', area. Any guidance will be appreciated.

$(document).ready(function() {
  new jBox('Confirm', {
    content: '<h5 style="color:white;">Simply Select <i>Continue</i><br /> To Agree To The</h5> <a href="/terms.html"><h5 style="color:#cccccc;"><u>Upload Terms</u></h5></a>',
    width: 830,
    height: 205,
    cancelButton: '<a href="/index.html"><h5 style="color:white;">Return Home</h5></a>',
	confirmButton: '<h5 style="color:white;">Continue</h5>',
    confirm: function () {
    close();
    },
    cancel: function () {
    disable(),
    window.location.href = "/index.html";
    }
  }).open();
});
</script>

Much thanks for any help.

[StephanWagner]

You could use the option closeOnConfirm to prevent the jBox to close when the user clicks the confirm button. Then you can check in the confirm method if the user has filled in the textfields.

Something like that: https://jsfiddle.net/StephanWagner/qx5a6fn0/

Confirm boxes will still close when you click esc. You can change that with the option closeOnEsc, see here: https://stephanwagner.me/jBox/options#closing-jbox

[chrisjchrisj]

Much thanks Stephan for your very kind reply/guidance.
I added your jsfiddle code, to test, in replacement of my posted code. However, the Notices don't appear.
I believe I didn't have the Notice plugin, so I downloaded files and added some more links to the same page. Here's what's now on the page:

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="/js/jBox.min.js"></script>
<script src="/js/jBox.Confirm.min.js"></script>
<script src="/jBox/dist/jBox.all.js"></script>
<script src="/jBox/jBox.Notice.js"></script>
<script src="/jBox/dist/plugins/Notice.js"></script>
<script src="/jBox/dist/plugins/Notice.css"></script>
<script src="/jBox/dist/plugins/Notice.min.js"></script>
<script src="/jBox/dist/plugins/Notice.min.css"></script>
<link href="/css/jBox.css" rel="stylesheet">
<link href="/css/jBox.Confirm.css" rel="stylesheet">

with this below the footer:

<script src="/js/jBox.js"></script>
<script src="/js/jBox.Confirm.js"></script>

I cannot 'Continue' unless the fields are populated, but still neither of the Notices appear, when they prompted to.
Any additional guidance is greatly appreciated

[StephanWagner]

When you use the .all.js file, all plugins are already included, so you actually only need jQuery and the jBox js and css:

<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/StephanWagner/jBox@v1.1.0/dist/jBox.all.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/StephanWagner/jBox@v1.1.0/dist/jBox.all.min.css" rel="stylesheet">

Not sure why the Notices won't appear... Are you getting any errors in the console?

[chrisjchrisj]

Many, many thanks again for your kind guidance. Very helpful.
All Notices are working successfully, now. Regarding the Name/Email Form code that you provided via jsfiddle:

var myConfirm;
$(document).ready(function() {
  myConfirm = new jBox('Confirm', {
    content: $('.my-jbox-form'),
    width: 830,
    height: 205,
    cancelButton: 'Return Home',
    confirmButton: 'Continue',
    closeOnConfirm: false,
    closeOnEsc: false,
    confirm: function() {
      if (
	!$('#name').val() ||
	!$('#email').val()
    	) {
ETC....

I have expanded the html to include submitting the populated fields:

<div class="my-jbox-form" style="display: none">
<form action='submit.php' method='post' name='myform' onSubmit="return checkemail()">
<input class="form-control" type="text" id="name" placeholder="Name">
<br>
<input class="form-control" type="email" id="email" placeholder="Email" required>
<input class="btnbtn-action" type='submit' value="Continue">
</div>

However, I don't know how to make the 'Submit' button be the: confirmButton: 'Continue',
I have tried several things without success.
Thank you for any additional guidance.

[StephanWagner]

Then you would have to submit the form fields manually. At least that what I would do. Something like that: https://jsfiddle.net/StephanWagner/qx5a6fn0/10/

Once the ajax request is complete, you can handle the response accordingly. See more at jQuery ajax: https://api.jquery.com/jquery.ajax/

[chrisjchrisj]

Much thanks again for your very kind reply/assistance.
I'm not clear on what you mean by "submit the form fields manually". Do you mean by selecting 'Continue'?
I tried your jsfiddle code, in your link, and on my test page, and in both nothing happens after 'Continue' is selected.
Also, could you please clarify what you mean by "handle the response accordingly"?

I have this submit.php file to process the Form field info:

<?php
if($_POST){
	$to = 'chrisj...@.....com';
	$subject = 'Thank you for your info';
	$name = $_POST['name'];
	$email = $_POST['email'];
	$message = $_POST['message'];
	$message1 = $_POST['message'];
	$headers = $name;
	$headers = 'from: info@.....com';
	$message1 .= "\r\n\r\nName: ".$_POST['name']." \r\n Email: ".$_POST['email']." ";
	$message = "Hello {$_POST['name']}, ~ Thank you for your input\r\n\r\n";
   		mail( $to, $subject, $message1, $headers );
   		mail( $email, $subject, $message, $headers );
		header('Location: https://....');
   exit;
}
?>

Any additional guidance is greatly appreciated.

[StephanWagner]

Yeah, nothing happens because the ajax call goes to submit.php and that page needs to be reachable via the ajax call. You can set up everything in the confirm method manually.

You are sending the values from the name and email textfields via ajax to submit.php. On that page you need to validate the input and then send some response back. Then you need to use the success, complete and/or error methods from the jQuery ajax function to handle the response accordingly.

Edit: Something like that:

$.ajax({
  url: 'https://MY_DOMAIN/submit.php',
  method: 'post',
  data: {
    name: $('#name').val(),
    email: $('#email').val()
  },
  success: function (response) {
    console.log(response);
    if (response.success) {
      // Ajax call was successful, the success key in the response object comes from the server
      // Now you can handle here what should happen when everything was OK
      alert('Success');
    } else {
      // An error occured
      // Now you can handle here what should happen when an error occurred or the textfields couldn't be validated
      alert('Error');
    }
  }
});

[chrisjchrisj]

Much thanks again for your replies.
I attempted adding this call back validation code ( everything above if($_POST) ) in the submit.php file, without success:

<?php
header('Content-type: application/json');
$errors         = array();  
$data           = array();  

    if (empty($_POST['name']))
        $errors['name'] = 'Name is required.';

    if (empty($_POST['email']))
        $errors['email'] = 'Email is required.';

    if ( ! empty($errors)) {

        $data['success'] = false;
        $data['errors']  = $errors;
    }
    echo json_encode($data);

if(empty($errors)) {
//if($_POST) 
//{
	$to = 'chrisj....@hotmail.com';
	$subject = 'Thank You';
	$name = $_POST['name'];
	$email = $_POST['email'];
	$message = $_POST['message'];
	$message1 = $_POST['message'];
	$headers = $name;
	$headers = 'from: support@web-site-name.com';

	$message1 .= "\r\n\r\nName: ".$_POST['name']." \r\n Email: ".$_POST['email']." ";

	$message = "Hello {$_POST['name']}, ~ Thank you\r\n\r\n";

   		mail( $to, $subject, $message1, $headers );
   		mail( $email, $subject, $message, $headers );
$data['success'] = true;
echo $name;
echo $email;

   exit;
}?>

And I have the .js:

var myConfirm;
$(document).ready(function() {

  myConfirm = new jBox('Confirm', {
    content: $('.my-jbox-form'),
    width: 830,
    height: 205,
    cancelButton: 'Return Home',
    confirmButton: 'Continue',
    closeOnConfirm: false,
    closeOnEsc: false,
    confirm: function() {
    $.ajax({
  url: 'https://...../submit.php',
  method: 'post',
  data: {
    name: $('#name').val(),
    email: $('#email').val()
  },
  success: function (response) {
    console.log(response);
    if (response.success) {
    myConfirm.close();
      //alert('Success');
    } else {
      alert('Error');
    }
  }
});

And I’ve tried to add: myConfirm.close(); into the .js code, but not sure where is the best place to put it.

After excuting the Form, still get a dialog box, on the Form page, that shows “web-site-name.com says Error”, yet the Form’s field info gets sent successfully.

And after Form submit, in the dev tools > Console it only shows one line,

[ ] upload.html:78
And, of course, the Form (jBox) doesn’t close.
Any additional guidance/suggestions with call back and validation, and close() is appreciated.

[StephanWagner]

How does your response object look like in console.log(response);?
It needs to be an object. And when the ajax call was successful it should contain {success: true}.

It seems to me you are just returning the email addresses as strings:

$data['success'] = true;
echo $name;
echo $email;

This should be something like echo json_encode($data);.

I'm closing this issue for now as this is not jBox related. Feel free to send me a mail if you have further problems: stephanwagner.me@gmail.com