I've been trying to create a dynamic table that lets the user insert rows with textboxes and confirm the data/insert it on database by clicking a confirm button. The button works just fine, it inserts the table row on click, but i need a validation where the textboxes can't be blank and i can't make it work inside the function.
i've tried creating variables for the data on the textboxes, and used a simple if to confirm they are not empty, but the confirm button keeps adding the table rows without displaying the alert
$(function tableConfirm(){
$(document).on('click','.btnConfirm', function(){
var error=0;
var campo1 = document.getElementById("campo1").value;
var campo2 = document.getElementById("campo2").value;
var campo3 = document.getElementById("campo3").value;
var campo4 = document.getElementById("campo4").value;
//Html insertion
var content='<tr><td><label class="checkContainer"><input type="checkbox"><span class="checkmark"></span></label></td><td id="texto1">'+campo1+'</td><td id="texto2">'+campo2+'</td><td id="texto3">'+campo3+'</td><td id="texto4">'+campo4+'</td><td><button class="eliminar">X<!--</Button><<i class="far fa-edit"></i></button>--></td></tr>';
$(this).parents('tr').remove();//this is to remove the textboxes before inserting the row data
$('tbody',currentView).append(content);//this appends the row data
//Validation not working
if(document.getElementById("texto1").value==""){
$.alert({
useBootstrap:false,
columnClass:'small',
title:'Error!',
content:'you must fill all the blanks!',
icon:'fas fa-exclamation-triangle',
type:'red',
typeAnimated:true,
buttons:{
tryAgain:{
text:'Ok',
btnClass: 'btn-red',
action: function(){
}
}
}
});
}
//This alertbox should only be displayed if the row has no blank spaces
else
$.alert({
useBootstrap:false,
columnClass: 'small',
title: 'Success!',
content: 'Task inserted!',
type: 'green',
icon:'fas fa-check-circle',
typeAnimated: true,
buttons: {
tryAgain: {
text: 'Ok',
btnClass: 'btn-green',
action: function(){
}
},
}
});
});
});
I expect the code to alert the user when the textboxes aren't filled, but it always inserts the task and shows the respective alert.
Thank you for your time, I appreciate any kind of help!
a TD element has no value but innerHTML so repleace the following :
wrong:
if(document.getElementById("texto1").value=="")
Correct:
if(document.getElementById("texto1").innerHTML=="")
Related
I have been working on this button that opens a dialog box containing an option-selecting table when clicked on. The thing is, I want the data input by the customer to be saved in a hidden field.
I have tried targeting the speicific field with getElementById, but I have no idea how to check whether or not it worked.
$(function() {
$("#opener").click(function() {
($("#table").dialog("isOpen") == false) ? $("#table").dialog("open") : $("#table").dialog("close") ;
});
$("#table").dialog({
autoOpen: false,
width: 300,
height: 250,
position: ['center',100],
buttons: {
Abbrechen: function() {
$(this).dialog("close");
},
Fertig: function() {
$('input[name="hfield"').val($("#safety_gear_select").val());
$(this).dialog("close");
}
},
});
Does anyone know how can I achieve this? TIA
I found a solution, hopefully it will help someone else too.
This is what I added to my button's code, where 'hfield1' is the name of the hidden field I want the data saved in and the #safety_gear_select is the id of the select field containing the input I wanna save in the hidden field.
It displays the name of the choice in the console rather than the index number, but that can easily be achieved too by replacing .html() with .val()
Fertig: function() {
$('input[name="hfield1"').val($("#safety_gear_select option:selected").html());
$('input[name="hfield2"').val($("#pawl_device_select option:selected").html() );
$('input[name="hfield3"').val($("#buffer_select option:selected").html() );
$(this).dialog("close");
}
My HTML/Javascript app uses a modal popup which I created using sweet Alert 2. Let's call this "Alert1".
Alert1 is using custom HTML and there is a button inside that HTML which I want to trigger another sweet alert 2 modal popup, we'll call this one "Alert2".
Alert2 has two options. "confirm" or "cancel" If the user clicks "cancel" I want to return to Alert1.
Here is the catch: The custom HTML for Alert1 is editable therefore, I can't just re-invoke the code that originally launched the alert, because this would show the old HTML.
This is what I have tried:
function clickButton(){ //This function will be attached to the button in Alert1
var currentSwal = document.getElementById('swal2-content').innerHTML;
swal({
title: "Confirm 'Remove Script Page'",
text:
"Are you sure you want to remove this page from the script?",
type: "warning",
showConfirmButton: true,
showCancelButton: true
}).then(function(dismiss) {
if (dismiss.dismiss == "cancel" || dismiss.dismiss == 'overlay') {
swal.close;
swal({
html: currentSwal,
showConfirmButton: false,
customClass: 'swal-extra-wide',
showCloseButton: true
});
} //end if
else {
//go ahead and delete the script page
} //end else
});
}//end function
My above solution does not work. It is a bit hard to explain, but basically, the HTML code gets broken and things just don't work properly.
TLDR/My question: Is there a way to have multiple SweetAlert2 alerts? (i.e. launch alert2 from alert1 and then close alert2, returning the view to alert1?
Yes you can ,
var modals = [];
modals.push({title: 'title Of Modal1', text: 'text1' });
modals.push({title: 'title Of Modal2', text: 'text2' });
swal.queue(modals);
References
Question 38085851 Answer 1
make a for loop for 3 and use toast not sweet alert and it will be works
I have to allow only alphabets to the text box. I have validated through JavaScript on text box using "on blur". The alert from the JavaScript remains open even though I try to close.
Find the demo link and the JavaScript below.
Note: Type any non-alphabet in the text box 1 and press tab or click on somewhere else from the following link.
http://demo.acclary.com/test.aspx
The JavaScript I used is, below:
function checkalphabets(textbox) {
var pattern = /^[a-zA-Z\s]+$/;
if (!pattern.test(textbox.value)) {
modal({
type: 'warning',
title: 'Warning',
text: 'Only Alphabets allowed!',
center: false,
});
setTimeout(function () { textbox.focus(); }, 1);
exit;
return false;
}
return true;
}
$('.modal-btn').click(function() {
$('#modal-window').hide();
});
You just need to add following line of code in the modal function:
callback: function(){ $("#myTextBox").focus();}
So After change, it will be like
modal({
type: 'warning',
title: 'Warning',
text: 'Only Alphabets allowed!',
center: false,
callback: function(){ $("#myTextBox").focus();}
});
That's all.
I have created fiddle using the Modal plugin that you are using in the page.
http://jsfiddle.net/7kpsv1p4/1/
change on-blur to onchange
small changes in your code
function checkalphabets(textbox) {
var pattern = /^[a-zA-Z\s]+$/;
if (!pattern.test(textbox.value)) {
textbox.focus();
modal({
type: 'warning',
title: 'Warning',
text: 'Only Alphabets allowed!',
center: false,
});
return false;
}
return true;
}
I hope this will work.
If you use onblur and focus on the textbox together the alert box will always show in the screen, because after focusing the textbox you are closing the modal alert means that you are re-belurring the textbox.
So it's better to use :
the onchange event.
Or the onKeyup event.
Note: Using the onkeyup is a better approach to refocus the textbox safely.
And try to focus on the textbox right before showing the alert, so when you close the alert the textbox will be already focused.
EDIT:
Here's a DEMO Fiddle using the onkeyup event but a simple alert, and here's the code:
function checkalphabets(textbox) {
var pattern = /^[a-zA-Z\s]+$/;
if (!pattern.test(textbox.value)) {
setTimeout(function () { textbox.focus(); }, 1);
alert('This is wrong');
exit;
return false;
}
return true;
}
It fires whenever you type a wrong character and still focuses in teh textbox.
I am new to JavaScript so bear with me here.
I have this code below that checks a text input fields value, if it matches then I fire off my Custom Dialog object/function which shows a Dialog modal window.
Now my goal is to Clear out the text input that fired the Dialog to open if the Cancel button is clicked
I have a Callback function named cancelCallback that I can pass into my Dialog function.
In my example you can see I have cached the Input field selector hostnameSelector and then passed it into my callback.
Below that you can see I print out the object to the Console. The Console shows my NEW value for the text field but it does not update on the screen.
This could be possibly because the Text Input filed is Dynamicly added to the screen/DOM?
Any ideas on how I can get it working? I am also able to use the latest jQuery if needed to help
// Show Notice if Hostname Matches the Domain Name
$(document).on('change','div.hostName > input',function() {
// cached Input Selector
var hostnameSelector = $(this);
var hostName = $(this).val();
var domainName = $("#domainName").val();
var pattern = new RegExp(domainName + "$","g");
if ( hostName.match(pattern) != null ) {
var msg = 'Are you sure you want to delete action?';
zPanel.dialog.confirm({
heading: 'ATTENTION',
message: msg,
width: 300,
cancelCallback: function (hostname) {
hostnameSelector .value = 'hi';
console.log(hostnameSelector);
},
cancelButton: {text: 'Cancel', show: true, class: 'btn-default'},
okButton: {text: 'Confirm', show: true, class: 'btn-primary'},
});
}
});
CancelCallback should set the new value by calling:
hostnameSelector.val("hi")
I am having some difficulties in making a form submission via a boxcomponent. I am using the boxComponent as I have customized button image, and strangely the transparency only works with boxComponent.
Basically the idea is that when I click on my boxComponent button, it will do 2 things:
Submit 2 radio button values and 1 combobox value via HTTP POST to sendstock.php
On successful submission, it will then proceed to the next page
Here's what I have got for the boxComponent:
var bc_button = new Ext.BoxComponent({
autoEl: {
tag: 'img',
src: 'next_button.gif'
},
style: 'cursor: pointer;',
listeners: {
enable: function(c) {
c.getEl().on('click', function() {
myformpanel.getForm().getEl().dom.action = 'sendstock.php';
myformpanel.getForm().getEl().dom.method = 'POST';
myformpanel.getForm().submit({
success:function() {
window.location.replace("toNextPage.php");
}
});
});
}
}
});
Here is my question, the results is as per below:
comboxbox = 3,
radiobtn1 = on
radiobtn2 = on
What I required is the value of the radiobtn1 and radiobtn2 to be submitted, should provide me with Available or NoStock, instead of on.
Also, is this the correct way to send users to the next page upon successful submission?
Thanks!
Make sure you set the inputValue config property on your radio buttons.
var rad = new Ext.form.Radio({ name: 'something', inputValue: 'purple'});
The inputValue value should then be sent on form post instead of 'on'.