Develop Reference

Unintentional popup FORM closing when clicking on a BUTTON or on a INPUT ( with JS code)

I'm finding a strange behaviour in a popup FORM when I click on a BUTTON (that operates on some object using a JS code), and on a INPUT (used for submit): in both cases, the form closes, and it is an unexpected action.
Probably is due to something very easy and common that I'm not fixing, but i can't find it.
This is the HTML interested part:
<form name="contactform" id="contactform" class="contact-form">
<div class="contactform-container">
<div class="common">
<label for="name">Nome</label>
<input type="text" id="name" name="name" />
</div>
<div class="common">
<label for="name">Cognome</label>
<input type="text" id="familyName" name="familyName" />
</div>
<div class="common">
<label for="email">e-mail</label>
<input type="text" id="email" name="email" />
</div>
<div class="message">
<label for="message">Annotazioni</label>
<textarea name="message" id="message" class="message"></textarea>
</div>
<div class="passRow">
<fieldset class="validatePass">
<div class="formGroup">
<label class="formLabel"for="password">Password
<span class="passErr"></span>
</label>
<div class="passWrapper">
<input type="password"
id="password"
class="form-control input-md"
name="password"
placeholder="Enter your password">
<span class="showPass">
<i class="fas fa-eye-slash"></i>
</span>
</div>
<p class="progress">Livello di sicurezza</p>
<div id="progressBar">
<div></div>
</div>
<ul id="progressList">
<li>Un carattere minuscolo e uno maiuscolo</li>
<li>Un numero</li>
<li>Un carattere speciale tra "!,%,&,#,#,$,^,*,?,_,-"</li>
<li>Lunghezza minima: 8 caratteri</li>
</ul>
</div>
</fieldset>
</div>
<div class="securityCaptcha">
<p>Inserire il codice nei riquadri sottostanti</p>
<div class="first row">
<div class="refCheck">
<canvas class="valiCaptcha"></canvas>
</div>
<div class="refCheck">
<canvas class="valiCaptcha"></canvas>
</div>
<div class="refCheck">
<canvas class="valiCaptcha"></canvas>
</div>
<div class="refCheck last">
<canvas class="valiCaptcha"></canvas>
<button class="reloadButton">
<i class="fas fa-redo"></i>
</button>
</div>
</div>
<div class="second row">
<div class="refCheck">
<input type="text" name="" maxlength="1">
</div>
<div class="refCheck">
<input type="text" name="" maxlength="1">
</div>
<div class="refCheck">
<input type="text" name="" maxlength="1">
</div>
<div class="refCheck">
<input type="text" name="" maxlength="1">
</div>
</div>
</div>
<div class="contactArea">
<p>Compilare tutti i dati per la prenotazione.</p>
<input type="submit" name="submit" id="submit" value="send">
</div>
</div>
</form>
</div>
The BUTTON that create problem is the one with class reloadButton.
The INPUT is the one with id submit.
I think css aren't necessary.
Regarding the JS part:
let formEls = formPopup.querySelectorAll('.common, .message, .note');
let charCode = [];
const refreshButton = document.querySelectorAll('.reloadButton')[0];
const passInput = document.getElementById('password');
window.onload = function () {
document.querySelector('#reserveBtn').addEventListener('click', function () {
formPopup.classList.add('active');
});
getCode();
formPopup.querySelector('.closeButton').addEventListener('click', function () {
cleanForm();
formPopup.classList.remove('active');
});
formPopup.addEventListener('click', function (ev) {
if (ev.target.id == 'contactform-bg') {
cleanForm();
formPopup.classList.remove('active');
}
});
refreshButton.addEventListener('click', function (ev) {
charCode = [];
getCode();
});
passInput.addEventListener('keyup', function () {
passVal = passInput.value;
checkPass(passVal);
});
};
let cleanForm = function () {
formEls.forEach((item, i) => {
item.classList.remove('typing');
});
// console.log(window['contactform-bg'].innerHTML);
// console.log(document.getElementById('contactform').innerHTML);
// console.log(document.contactform.innerHTML);
document.contactform.name.value = '';
document.contactform.familyName.value = '';
document.contactform.email.value = '';
document.contactform.message.value = '';
passInput.value = '';
};
function getCode() {
let sChars = 'A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,0,1,2,3,4,5,6,7,8,9,!,#,#,$,%,^,&,*,(,)';
let arrayChars = sChars.split(',');
for (var i = 0; i <= 3; i++) {
// trova un indice casuale tra 0 e la lunghezza dell'array
RefIndex = Math.floor(Math.random() * arrayChars.length);
// assegna il carattere estratto dall'array (strana indicazione del font come giapponese(??)
let char = arrayChars[RefIndex];
charCode[i] = char.toLowerCase;
createImgCaptcha(char, i);
}
}
I avoid to add the createImgCaptcha function because it just create CANVAS and doesn't have any impact on the matter.
Is there anyone able to explain to me why the FORM closes? I tried following the steps in JS but found no errors.
Thanks in advance.

Ok, I found the problems and fixed them.
There were little mistakes one different from another. So, I list them:
The "FORM close object": there was a missing '#' characer in the ref attribute, so I changed the HTML from to , adding also the type attribute for greater completeness.
The "class reloadButton": I finally read that a <button>Click to do something</button> is a default submit button. I didn't know... so, I just added the right type attribute to solve, in this way: <button class="reloadButton" type="button">.
The "submit button": in this case, I changed the prevent JS command: function stopEvent(event) { event.preventDefault();}.
Now, everything works correctly. Sorry if I bored you with these silly things; either way, it's always best to learn from mistakes.

passing corresponding text-field values into the function which has the same id's

I have a button called "Add text field". When it is clicked, the group of HTML elements like two text-fields-"Text input", "file name" and one button -"Download audio file", would be created. When a "Download audio file" button is clicked, it should take the input from the corresponding text fields like "Text input" and "file name" to be passed into the function start().
Important thing is these text fields are added into the DOM with innerHTML so all the iteration would have the same id for the text-fields and even for button.
My HTML:
<form class="col-sm-12">
<div id="textfields">
<div class="form-row">
<div class="col-sm-8">
<div class="form-group">
<label for="Textarea1">Text Input</label>
<!--
<textarea class="form-control" id="textarea1" rows="10"></textarea>-->
<textarea class='form-control' id='textarea'"+textareaid=1+" rows='10'></textarea>
</div>
</div>
<div class="col-sm-3 ml-auto">
<div class="form-row">
<label for="Textarea2">File Name</label>
<!--
<input type="text" class="form-control" id="filename">-->
<input type='text' class='form-control' id='filename'"+filenameid=1+">
</div></br>
<div class="form-row text-center">
<div class="col-12">
<button type="button" class="btn btn-primary" onclick="start();">Download audio file</button>
</div>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" onclick="addTextFields();">Add Text field</button>
</form>
JavaScript to add text-fields:
var textareaid=2; var filenameid=2;
function addTextFields(){
var objTo = document.getElementById('textfields');
var divtest = document.createElement("div");
divtest.innerHTML = "<div class='form-row'><div class='col-sm-8'><div class='form-group'><label for='Textarea1'>Text Input</label><textarea class='form-control' id='textarea'"+textareaid+" rows='10'></textarea></div></div><div class='col-sm-3 ml-auto'><div class='form-group'><label for='Textarea2'>File Name</label><input type='text' class='form-control' id='filename'"+filenameid+"></br><div class='form-row text-center'><div class='col-12'><button type='button' class='btn btn-primary' onclick='start();'>Download audio file</button></div></div></div></div></div>";
objTo.appendChild(divtest);
textareaid++;
filenameid++;
}
API request for start():
'body': {
"input": {
"text":document.getElementById("textarea"+textareaid).value,
"filename":document.getElementById("filename"+filenameid).value
},
"voice": {
"languageCode": document.getElementById("languages").value,
"ssmlGender": document.getElementById("gender").value,
"name": document.getElementById("entries").value
}
}
Problem is, when the button is clicked from the second group of elements, it is still taking the parameters from first iteration instead of the second one.
This is how the elements look like in HTML.
Any ideas would be useful.

Since Id's should not be same use class if you want to control multiple controls with same name. You can assign different ids to each textarea by replacing script with this so that every time new id will generate for every textarea hence it will unique.
<script>
var textareaid=2;
function addTextFields(){
var objTo = document.getElementById('textfields');
var divtest = document.createElement("div");
divtest.innerHTML = "<div class='form-row'><div class='col-sm-8'><div class='form-group'><label for='Textarea1'>Text Input</label><textarea class='form-control' id='textarea"+textareaid+"'"+
"rows='10'></textarea></div></div><div class='col-sm-3 ml-auto'><div class='form-group'><label for='Textarea2'>File Name</label><input type='text' class='form-control' id='textarea"+textareaid+"></br><div class='form-row text-center'><div class='col-12'><button type='button' class='btn btn-primary' onclick='start();'>Download audio file</button></div></div></div></div></div>";
objTo.appendChild(divtest);
textareaid++;
}
</script>

Getting data from jQuery Guillotine Plugin

I'm using the jQuery Guillotine Plugin (https://github.com/matiasgagliano/guillotine#jquery-guillotine-plugin) to let users crop their image. Afterward I need that data to go into a form, however I can't figure out for the life of me how to do it! I've been able to get the data into this just by using the right ids:
* This is the corrected code *
<form id="coords" action="includes/php/activation/s3b.php" method="post" enctype="multipart/form-data" id="data">
<!-- Create Password -->
<div class="col s12">
<h4>Looking good, '.$firstName.'!</h4>
<p>Time to crop your photo!</p>
</div>
<input type="hidden" name="u" value="'.$staffID.'">
<input type="hidden" name="a" value="'.$actCode.'">
<div id="theparent" class="col s12">
<img src="includes/php/activation/tempAvatars/'.$tempAvatar.'.jpg" id="sample_picture" alt="Image to crop" class="responsive-img />
</div>
<div class="col s12" id="controls">
<button id="rotate_left" type="button" title="Rotate left"><i class="material-icons"></i></button>
<button id="zoom_out" type="button" title="Zoom out"><i class="material-icons"></i></button>
<button id="fit" type="button" title="Fit image"><i class="material-icons"></i></button>
<button id="zoom_in" type="button" title="Zoom in"><i class="material-icons"></i></button>
<button id="rotate_right" type="button" title="Rotate right"><i class="material-icons"></i></button>
</div>
<div class="input-field col s6">
<input id="x" type="text">
<label for="x">X</label>
</div>
<div class="input-field col s6">
<input id="y" type="text">
<label for="y">Y</label>
</div>
<div class="input-field col s6">
<input id="w" type="text">
<label for="w">W</label>
</div>
<div class="input-field col s6">
<input id="h" type="text">
<label for="h">H</label>
</div>
<div class="input-field col s6">
<input id="scale" type="text">
<label for="scale">Scale</label>
</div>
<div class="input-field col s6">
<input id="angle" type="text">
<label for="angle">Angle</label>
</div>
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="includes/js/jquery.guillotine.min.js"></script>
<script src="includes/js/materialize.min.js"></script> <!-- MaterializeCSS -->
<script type='text/javascript'>
jQuery(function() {
var picture = $('#sample_picture');
// Make sure the image is completely loaded before calling the plugin
picture.one('load', function(){
// Initialize plugin (with custom event)
picture.guillotine({eventOnChange: 'guillotinechange'});
// Display inital data
var data = picture.guillotine('getData');
for(var key in data) { $('#'+key).html(data[key]); }
// Bind button actions
$('#rotate_left').click(function(){ picture.guillotine('rotateLeft'); });
$('#rotate_right').click(function(){ picture.guillotine('rotateRight'); });
$('#fit').click(function(){ picture.guillotine('fit'); });
$('#zoom_in').click(function(){ picture.guillotine('zoomIn'); });
$('#zoom_out').click(function(){ picture.guillotine('zoomOut'); });
picture.guillotine({
onChange: function(data, action){
data = picture.guillotine('getData');
}
});
// Update data on change
picture.on('guillotinechange', function(ev, data, action) {
data.scale = parseFloat(data.scale.toFixed(4));
for(var k in data) { $('#'+k).html(data[k]); }
data = picture.guillotine('getData');
var data = picture.guillotine('getData');
$('#x').val(data.x);
$('#y').text(data.y);
$('#w').text(data.w);
$('#h').text(data.h);
$('#scale').text(data.scale);
$('#angle').text(data.angle);
});
});
// Make sure the 'load' event is triggered at least once (for cached images)
if (picture.prop('complete')) picture.trigger('load')
});
</script>
but that doesn't seem to be working :( Any ideas? :D

The getData method returns an object with the x, y, w and h properties you need:
You can get the instructions at any point by calling 'getData':
data = picture.guillotine('getData');
// { scale: 1.4, angle: 270, x: 10, y: 20, w: 400, h: 300 }
You can then access the properties of this object by name, not by index, and set the text() of the required elements. Try this:
var data = picture.guillotine('getData');
$('#x').text(data.x);
$('#y').text(data.y);
$('#w').text(data.w);
$('#h').text(data.h);
$('#scale').text(data.scale);
$('#angle').text(data.angle);

In my case. I changed text(from #Rory) into val. And move those line in the //update data on change:
// Update data on change
picture.on('guillotinechange', function(ev, data, action) {
data.scale = parseFloat(data.scale.toFixed(4));
for(var k in data) { $('#'+k).html(data[k]); }
$('#x').val(data.x);
$('#y').val(data.y);
$('#w').val(data.w);
$('#h').val(data.h);
$('#scale').val(data.scale);
$('#angle').val(data.angle);
});
So whenever the form is submited. The update data is sent asap.
<input type="hidden" name="x" id="x" value=""/>
<input type="hidden" name="y" id="y">
<input type="hidden" name="w" id="w">
<input type="hidden" name="h" id="h">
<input type="hidden" name="scale" id="scale">
<input type="hidden" name="angle" id="angle">

How to Save the optins in a text file without disturbing the email notif

I am using a custom optin page with a form , I want to tweak it a little bit,
I want to save all the optins on a txt file on the server without
disturbing the other functions of the form.
2nd thing I want is to show a custom Page after the optin form is
submitted.
Currently the form works like this
USER SUBMITS > PAGE REFRESHES FOR HIM > I GET AN EMAIL WITH THE SUBMITTED DATA.
Here is the form code
<div class="form fix ">
<p class="form-text">Fill This Out and See Your <br>Timeshare Report</p>
<form name="contactform" action="mail-script.php" method="POST">
<label for="fname">First Name:
<input type="text" name="fname" id="fname" />
</label><br>
<label for="lname">Last Name:
<input type="text" name="lname" id="lname" />
</label><br>
<label for="email">Email Address:
<input type="text" name="email" id="email" />
</label><br>
<label for="phone">Phone Number:
<input type="text" name="phone" id="phone" />
</label><br>
<label for="phone">Alternate Phone:
<input type="text" name="phone" id="aphone" />
</label><br>
<label for="resort">Resort Name:
<input type="text" name="resort" id="resort" />
</label><br>
<label for="amount">Amount Owed? $:
<input type="number" name="amount" id="amount" />
<p style="font-size: 12px !important;margin-top: -14px;padding-right: 30px;text-align:right;">
If Paid Off Leave Zero, Else Put Amount</p>
</label><br>
<div class="checkbox">
<div class="check-text fix">
<p>I'm Considering To</p>
</div>
<div class="check-one fix">
<input type="checkbox" name="call" id="" value="sell"/> Sell It <br>
<input type="checkbox" name="call" id="" value="buy"/> Buy It <br>
<input type="checkbox" name="call" id="" value="rent "/> Rent It
</div>
<div class="check-two fix">
<input type="checkbox" name="call" id="" value="cancel"/> Cancel Mortgage <br>
<input type="checkbox" name="call" id="" value="ownership"/> End Ownership <br>
<input type="checkbox" name="call" id="" value="give"/> Give It Back
</div>
</div>
<p class="captcha">
<img src="captcha_code_file.php?rand=<?php echo rand(); ?>" id='captchaimg' ><br>
<label for='message'>Enter the code above here :</label><br>
<input id="6_letters_code" name="6_letters_code" type="text"><br>
<small>Can't read the image? click <a href='javascript: refreshCaptcha();'>here</a> to refresh</small>
</p>
<input id="submit" type="submit" value="" />
<p class="submit-text">Ensure all fields are completed and correct, allowing you more benefits, while preventing abuse of our data.</p>
</form>
</div>
</div>
This is the mail script which sends me the email
<?php
/* Set e-mail recipient */
$myemail = "**MYEMAIL**";
/* Check all form inputs using check_input function */
$fname = check_input($_POST['fname'], "Enter your first name");
$lname = check_input($_POST['lname'], "Enter your last name");
$email = check_input($_POST['email']);
$phone = check_input($_POST['phone']);
$resort = check_input($_POST['resort']);
$amount = check_input($_POST['amount']);
$call = check_input($_POST['call']);
/* If e-mail is not valid show error message */
if (!preg_match("/([\w\-]+\#[\w\-]+\.[\w\-]+)/", $email))
{
show_error("E-mail address not valid");
}
/* If URL is not valid set $website to empty */
if (!preg_match("/^(https?:\/\/+[\w\-]+\.[\w\-]+)/i", $website))
{
$website = '';
}
/* Let's prepare the message for the e-mail */
$message = "Hello!
Your contact form has been submitted by:
First Name : $fname
Last Name : $lname
E-mail: $email
Phone : $phone
Resort: $resort
Amount: $amount
Call : $call
End of message
";
/* Send the message using mail() function */
mail($myemail, $subject, $message);
/* Redirect visitor to the thank you page */
header('Location: index.html');
exit();
/* Functions we used */
function check_input($data, $problem='')
{
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
if ($problem && strlen($data) == 0)
{
show_error($problem);
}
return $data;
}
function show_error($myError)
{
?>
if (strtolower($_POST['code']) != 'mycode') {die('Wrong access code');}
<html>
<body>
<b>Please correct the following error:</b><br />
<?php echo $myError; ?>
</body>
</html>
<?php
exit();
}
?>
Here is the online url of the page http://timesharesgroup.com/sell/index.html

you can add this code to your script after all the validation is done:
$text = "$fname\n$lname\n$email\n$phone\n$resort\n$amount\n$call\n\n";
file_put_contents('file.txt', $text, FILE_APPEND);
OR even better csv file:
$fields = array($fname,$lname,$email,$phone,$resort,$amount,$call);
$fp = fopen('file.csv', 'a');
fputcsv($fp, $fields);
fclose($fp);

Repeat a HTML/PHP code with Node Clone

I have a html & php code (article) that i need to clone it on the site.
The php variables must have different id on each article.( i have $variablex[n], $variablez[n] where n = must be 1,2,3.....ñ
By default i need to have 7 articles displayed on the site.
And when i press the Load More button to show 2 more+ and so on.
Can i do all the above things ? I mean its possible?
I have created the fiddle : jsfiddle so it can be more understandable.
Forgive my lack of experience with jquery/javascript i am more a HTML/CSS.

Don't do the load two more thing. Just put them all out there.
If you must,Use document.getElementById().style.display = 'none'; (see I added an id to each article) to hide the overflow.
Put your jsfiddle code in a loop that shows all the listings
Add JS to hide the overflow (greater than 7)
If there are more than 7b listings, add a More Button to unhide (.style.display = 'block') the next two listings.
NOTE: It appears you learned you php style from WordPress. Do not do it that way. Use Heredoc syntax for your HTML echo.
Link to PHP Manual: Heredoc Syntax
<?php
$pret1=$hotelPrices[0];
$pretdiscount = $pret1 + ($pret1 * 0.20);
$availability = $checkAvailability->searchId;
echo <<<EOT
<article class="box" data-stars="$StarRating[0] name="$hotelName[0]" data-price="$pretdiscount">
<figure class="col-sm-5 col-md-4">
<a title="" href="https://www.bookingassist.ro/test/html/ajax/slideshow-popup.html" class="hover-effect popup-gallery"><img width="270" height="160" alt="" src="$img[0][1]"></a>
</figure>
<div class="details col-sm-7 col-md-8">
<div><div>
<h4 class="box-title">$hotelName[0]<small><i class="soap-icon-departure yellow-color"></i>$hotelAddress[0], $hotelDestination[0], $Countryl</small></h4>
<div class="amenities">
<i class="soap-icon-wifi circle"></i>
<i class="soap-icon-fitnessfacility circle"></i>
<i class="soap-icon-fork circle"></i>
<i class="soap-icon-television circle"></i>
</div></div><div>
<div class="stars-$StarRating[0]-container">
<span class="stars-$StarRating[0]" style="width: 80%"></span>
</div></div></div>
<div>
<p>Pretul include cazare in camera tip $roomCattegory[0] cu masa tip $boardType[0]</p>
<div>
<span class="price"><small>pret/Sejur</small>€$pretdiscount<br/></span>
<form action="hotel-detailed.php" method="post">
<input type="hidden" name="In" value="$In" />
<input type="hidden" name="Out" value="$Out" />
<input type="hidden" name="hotel" value="$hotelCodes[0]" />
<input type="hidden" name="searchId" value="$availability" /
<input type="hidden" name="Adults" value="$Adults" />
<input type="hidden" name="Childs" value="$Childs" />
<input type="hidden" name="Offer1code" value="$hotelCodes[1]" />
<input type="hidden" name="Offer2code" value="$hotelCodes[2]" />
<input type="hidden" name="Offer3code" value="$hotelCodes[3]" />
<input type="hidden" name="Offer1pret" value="$hotelPrices[1]" />
<input type="hidden" name="Offer2pret" value="$hotelPrices[2]" />
<input type="hidden" name="Offer3pret" value="$hotelPrices[3]" />
<button type="submit"class="button btn-small full-width text-center">Detalii<small></small></button>
</form>
</div></div></div>
</article>
<div id="loadMore"><a class="uppercase full-width button btn-large"> mai multe rezultate</a></div>
EOT;
unset($ratesPerNight);
unset($roomsInfo);
unset($roomResponse);
?>
Change this from:
</article>
<div id="loadMore"><a class="uppercase full-width button btn-large"> mai multe rezultate</a></div>
EOT;
To:
</article>
EOT;
if ($id > 7){
echo <<<EOT
<button onclick="more()">More</button>'
<script type="text/javascript">
//<![CDATA[
var current = 7;
var max = $id;
var articles = document.getElementsByTagName("article");
for (var a = 7,a < articles.length,a++){
articles[a].style.display = 'none';
}
function more(){
if (current < max){current++;articles[current].style.display = 'block';
if (current < max){current++;articles[current].style.display = 'block';
}
//]]></script>
EOT;
}
Each time the More Button is clicked two more articles will appear.