This has been answered several times but it seems Sweet Alert has made changes and html:true no longer works, just trying to add a clickable URL
Docs say
HTML is no longer used. Instead, use the content object.
but they don't really provide any examples
Below code works but displays the entire <a href .... </a> rather than just the CLICK HERE
swal({
title: "TITLE HERE",
//text: "<a href='#'>CLICK HERE<a>",
html: true
});
This code should work . You can use content now with specific DOM element
var el = document.createElement("a");
el.href = "www.stackoverflow.com";
el.innerText = "Click here";
swal("Write something here:", {
content: el,
});
check this here :
https://sweetalert.js.org/docs/#content
as shown in the sample you can pass a slider input to the alert
Here is a working fiddle
https://jsfiddle.net/vq13hac4/2/
Sweet Alert can handle the creation of the html element for you. So the answer by Niladri can be rewritten as:
swal("Write something here:", {
content: {
element: "a",
attributes: {
href: "http://www.stackoverflow.com",
innerText: "Click here"}}});
#Niladri options is good for Sweet Alert 2.
var form = document.createElement("div");
form.innerHTML = `
<span id="tfHours">0</span> hours<br>
<input style="width:90%;" type="range" name="tfHours" value=0 step=1 min=0 max=25
onchange="window.changeHours(this.value)"
oninput="window.changeHours(this.value)"
><br>
<span id="tfMinutes">0</span> min<br>
<input style="width:60%;" type="range" name="tfMinutes" value=0 step=5 min=0 max=60
onchange="window.changeMinutes(this.value)"
oninput="window.changeMinutes(this.value)"
>`;
swal({
title: 'Request time to XXX',
text: 'Select time to send / request',
content: form,
buttons: {
cancel: "Cancel",
catch: {
text: "Create",
value: 5,
},
}
}).then((value) => {
//console.log(slider.value);
});
I have created a Codepen with a Sweet Alert form data inside. Try it here!
Related
I would like to use the ParsleyJS Form Validation Library to validate a form that I'm constructing within a SweetAlert2 modal.
Here's my code:
HTML
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#11.1.5/dist/sweetalert2.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.min.js"></script>
Check Zip Code
JS
$(function() {
const $btnCheckZip = $('.btn-checkzip');
$btnCheckZip.on('click', function() {
Swal.fire({
title: 'Check Product X Availability',
html: '<p>Enter your zip code below to see if product X is currently available in your area.</p><div class="error-msg"></div><div id="form-msg"></div><form id="form-checkzip" class="form"><input type="text" name="lookup" id="lookup" class="swal2-popup-input" placeholder="Enter Zip Code" value="" data-parsley-class-handler="error-msg" data-parsley-validation-threshold="5" data-parsley-pattern="^[0-9]{5}(?:-[0-9]{4})?$" data-parsley-pattern-message="Please enter a valid zip code." data-parsley-required /></form>',
showCloseButton: true,
confirmButtonText: 'Check Now',
showLoaderOnConfirm: true,
preConfirm: () => {
const inputLookup = Swal.getPopup().querySelector('#lookup').value;
const $formLookup = Swal.getPopup().querySelector('#form-checkzip');
//Trying to Bind/Trigger Parsley Validation Event
$formLookup.parsley().validate();
return {
lookup: inputLookup
}
}
});
});
});
Notes
I have tried binding Parsley to the form with both the "data-parsley-validate" and form.parsley(); approaches. Neither have worked for me.
My assumption is that it will need to be bound once the form is available in the DOM. So, I've tried the didOpen and didRender hooks in addition to preConfirm. No luck.
Question
So, my question is, simply, how can I get Parsley to bind to the form that's constructed by SweetAlert2 so that clicking the "Check Now" button will trigger validation?
I am trying to get values from multiple inputs using Sweetalert2 created with html.
swal({
type: 'question',
title: 'Confirm recipient details',
html: '<p style="color:#C00; padding-bottom:0px; margin-bottom:0px">
Cloud only terms and conditions</p>
<div class="swal_input_wrapper">
<div class="label_wrapper">Email: </div>
<input id="swal-input1" style="width:75%" class="swal2-input" autofocus><br/>
<div class="label_wrapper">Recipient: </div>
<input id="swal-input2" style="width:75%" class="swal2-input"></div><br/>
<div class="label_wrapper">Message: </div>
<textarea id="swal-input3" style="width:75%" class="swal2-textarea"></textarea>
</div>',
preConfirm: function() {
return new Promise(function(resolve) {
resolve([
$('#swal-input1').val(),
$('#swal-input2').val(),
$('#swal-input3').text()
]);
});
}
}).then(function(result) {
//values from inputs (results is an array)
email = result[0];
email_name = result[1];
email_message = result[2];
alert(email_name);
}).done();
Testing the output as I have added parts it all works until I add 'email_message = result[2];' which would suggest it can't resolve the value of the textarea. I have tried using the following to get the text from the textarea, all with no success...
$('#swal-input3').text()
$('#swal-input3').val()
$('#swal-input3').html()
Up until the point I add that line the alert(email_name) works but afterwards it stops with no errors or warnings that I can find.
Please note that the html portion of the above does not have line breaks in my script, I added them to try and make my code easier to read because the code section here doesn't seem to support wordwrap.
$('#swal-input3').val() works just fine: [JSFIDDLE]
.val() is what you need to get the value of a textarea field.
I want to show submit button after clicking on a text.
So, the HTML looks like that:
<td align="left" class="editable_td">
<form action='cms/content/save/2' type='POST'>
<p class="editable seo" >{{ news['nazwa']|raw }}
</p>
<input type='submit' name='submit' class='button2' style='display:none;' value='change title'>
</form>
</td>
and my jquery:
$(document).ready(function () {
$('.button2').on('click',function() {
alert(2);
});
var text;
var klasa;
$(".editable_td").on("click", "p.editable",function() {
var parent = $(this).parent();
text = $(this).text();
klasa = $(this).attr('class');
$(this).siblings('.button2').show();
$(this).replaceWith("<input class='editable_text' name='nazwa' type='text' value='"+text+"'>");
parent.children(":text").focus();
return false;
});
$(".editable_td").on("blur", '.editable_text',function() {
$(this).siblings('.button2').hide();
$(this).replaceWith("<p class='editable "+klasa+"'>"+text+"</p>");
});
});
of course i want to submit this form, not to alert(2), but even though i can't even alert() because after clicking on a button it simply disappears. How can i fix this? I don't want this button to be shown before clicking on this text.
EDIT
the answer is (as James Donnelly said ) to set timeout:
setTimeout(function() {
$(this).siblings('.button2').hide();
$(this).replaceWith("<p class='editable "+klasa+"'>"+text+"</p>");
}, 1);
BUT
right now when I'm sending via POST my url looks like this:
[mysite]cms/content/save/1?nazwa=Nazwa+++++++++++++++++++++&submit=change+title
and here comes another problem which i can't solve :P
( it should be like this: **[mysite]cms/content/save/1 )
SECOND EDIT:
if anybody encounters this problem: set timeout to ~200, and then change form.method to post.
We can hackily cheat this to an extent using setTimeout with a delay of 1 millsecond within the .on('blur') function:
$(".editable_td").on("blur", '.editable_text',function() {
setTimeout(function() {
$(this).siblings('.button2').hide();
$(this).replaceWith("<p class='editable "+klasa+"'>"+text+"</p>");
}, 1);
});
JSFiddle demo.
I have an x-editable input, which I'm using to edit usernames. The default action of the element is when you click on itself, you can edit a value. But I want to enable click on the element's .editable and be able to edit the value inside my input. To shorten stuff here is a jsfiddle of my current situation.
jQuery:
$(function(){
$.fn.editable.defaults.mode = 'inline';
$('#publicname-change').editable({
type: 'text',
url: '/post',
pk: 1,
placement: 'top',
title: 'Enter public name'
}
);
//ajax emulation. Type "err" to see error message
$.mockjax({
url: '/post',
responseTime: 100,
response: function(settings) {
if(settings.data.value == 'err') {
this.status = 500;
this.responseText = 'Validation error!';
} else {
this.responseText = '';
}
}
});
HTML:
<div class="control-group control-group-inline">
<label class="control-label labelModified" for="publicname-change">Public name:</label>
<div class="controls">
Mr. Doe
<div class="edit">edit <i class="icon-pencil pencil-input-change"></i></div>
</div>
</div>
It would be nice if someone can help me and edit my linked jsfiddle in the way I described. On click .edit, be able to edit value.
It has a function called enable you can use that to enable edit
$('.edit').click(function(e){
e.stopPropagation();
$('#publicname-change').editable('toggle');
});
This won't work if you don't add the first line because default behaviour is to disable edit on click of any other element.
Edit:
To enable editing only on the click of edit button and not the text, set toggle property to manual.
$('#publicname-change').editable({
type: 'text',
url: '/post',
pk: 1,
placement: 'top',
title: 'Enter public name',
toggle:'manual'
}
JSFiddle
I have code that has a text field and a button made in javascript. When the user clicks the button, it opens up a new window to a website's search page. What I wanted to do was to fill in the search field by using it's id and then activate the website's search button. I haven't seem to be able to get the text passed to the external site's textfield but here's what I have.
<script type="text/javascript">// <![CDATA[
function mySearch()
{
popupWindow = window.open(
'http://www.websitehere.com','popUpWindow','height=768,width=1024,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,status=yes')
popupWindow.focus();
popupWindow.searchpath1 = 'test value';
}
// ]]></script>
<center><form><input name="searchTxt" type="text" /><br /> <input onclick="mySearch()" value="Search" type="button" /></form></center>
textBoxId would be the id of the search textbox on the newly opened window.
If anything doesn't make sense, let me know.
here is the source code for the textbox of the external site:
<input title="Search Term" type="text" name="searchpath1" id="searchpath1" maxlength="255" size="25" style="width: 300px;" value=""/>
try something like
popupWindow.document.getElementById('textBoxId').value = 'test value';
instead of
popupWindow.textBoxId = 'test value';
You need to get the input text DOM element 'textBoxId' and set 'value' property of this obtained element.
This line is wrong
popupWindow.textBoxId = 'test value';
Use following lines to replace it:
var targetTextField = popupWindow.document.getElementById('textBoxId');
targetTextField.value = "test value";
Here, I rewrote full function definition to evaluate proposed solution. Try it and let us know how it worked! []s
function mySearch()
{
popupWindow = window.open('file:///tmp/form.html','popUpWindow','height=768,width=1024,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,status=yes')
if (window.focus())
popupWindow.focus();
var targetTextField = popupWindow.document.getElementById('textBoxId');
targetTextField.value = 'test value';
targetTextField.focus();
}