We Keep Coding

How to submit form AND set post variables in javascript

I have three buttons in my form. I want to use JS to confirm when clicking the delete button. Upon confirm, the form should be submitted. How do i do that?
This is how far I got:
My form:
<form method="post" id="form1">
<button id="button1" name="action" type="submit" value="save"></button>
<button id="button2" name="action" type="submit" value="update"></button>
<button id="button3" name="action" type="submit" value="delete"></button>
</form>
and a JS (swal) script to confirm before submitting
<script>
var formname = "are you sure you want to proceed?";
document.querySelector("#button3").addEventListener('click', function(e) {
var form = this;
e.preventDefault();
swal({
title: "Delete?",
text: formname,
icon: "warning",
buttons: [
'Cancel',
'Yes'
],
dangerMode: true,
}).then(function(isConfirm) {
if (isConfirm) {
document.querySelector("#form1").submit();
}
});
});
The confirmation script runs fine, but upon clicking on yes the form is submitted without action=delete..

First try to put type="button" for 'delete'.
(Type Button won't submit form on its own. It is a simple button which is used to perform some operation by using javascript whereas Type Submit is a kind of button which by default submit the form whenever user clicks on submit button)
<button id="button3" name="action" type="button" click="deleteFormData()" value="delete"></button>
function deleteFormData(){
// write the delete action here
}

jqueryui dialog inside php while loop not opening as expected

i want to show jquery dialog on link click but when i click multiple dialog are opening instead of one.
i tried this but still not working.
if i use next() method then no dialog is opening as you can read in link above.
i think i should use data attribute but i don't know how to use it.
Here is my jqueryui dialog div content inside a php while loop:
while ($rows8 = $sql8->fetch_assoc()){
echo "<div id='view-reply'>
<span class='report_link'><a data-myid='$rows8[reply_id]' class='rp' href='javascript:void(0);'><img src='img/admin.png' alt='report to admin' title='report to admin'/></a></span>
<div style='display: none;' class='post_reply_report_win'>
<h4><span>Report to Admin</span><hr/></h4>
<form class='reportForm' method='post' action='report_process.php?uid=".urlencode(base64_encode($rows8['reply_by']))."&p=".urlencode(base64_encode($rows8['reply_to_post']))." '>
<p><span>Subject</span><br/>
<input type='text' name='reporttxt' maxlength='100' required autofocus /></p>
<p><span>Details</span><br/>
<textarea name='reportarea' maxlength='500' required ></textarea></p>
<p><input type='submit' name='reportsub' id='sub' value='Submit'/></p>
</form>
</div>
</div>
}
and i am displaying it like this:
$(document).ready(function(){
$(".post_reply_report_win").dialog({
modal : true,
draggable : false,
resizable : false,
autoOpen : false,
buttons: [
{
text: "Cancel",
click: function () {
$(this).dialog("close");
},
style: "outline: none;"
}
],
close : function(event, ui){
$(this).dialog("close");
}
});
$("#view-reply .report_link a").click(function() {
$(".post_reply_report_win").dialog("open");
return false;
});
});

Your click listener simple opens them all as they do all have the class!
$(".post_reply_report_win").dialog("open");
You need to have unique identifiers for opening the dialog. Assignment can be done by class.
So I would go like this:
Give this line <div style='display: none;' class='post_reply_report_win'> a unique id like so <div style='display: none;' class='post_reply_report_win' id='post_reply_report_dialog_<?echo $i;?>';
$i would start at 1 and $i++ at the end in your loop.
your listener should then use .closest() from jquery to find the closest .post_reply_report_win element and get the id from that.
that id is the one you pass to your .open call of the dialog.
$('#'+$(this).closest('.post_reply_report_win').attr('id')).dialog("open");

The id should be unique. id='view-reply' is inside while loop and it is repeating.
Try below code:
$(".report_link a").click(function() {
$(this).parent('.report_link').next('.post_reply_report_win').dialog("open");
return false;
});

i have solved it myself after a long research.
i am posting my solution here just to help others that are also searching for the solution :)
So here is the solution:
php:
while ($rows8 = $sql8->fetch_assoc()){
echo "<span class='post_reply_report_link'><a data-myid='$rows8[reply_id]' class='rp' href='javascript:void(0);'><img src='img/admin.png' alt='report to admin' title='report abuse'/></a></span>
<div class='post_reply_report_win_$rows8[reply_id]' id='post_reply_report_win' >
<h4><span>Report Abuse</span><hr/></h4>
<form class='post_reply_report_form' method='post' action='report_process.php?uid=".urlencode(base64_encode($rows8['reply_by']))."&p=".urlencode(base64_encode($rows8['reply_to_post']))." '>
<p><span>Subject</span><br/>
<input type='text' name='reporttxt' maxlength='100' required autofocus /></p>
<p><span>Details</span><br/>
<textarea name='reportarea' maxlength='500' required ></textarea></p>
<p><input type='submit' name='reportsub' id='sub' value='Submit'/></p>
</form>
</div>";
}
javascript:
$(document).ready(function(){
$(".post_reply_report_link a").click(function() {
var myID = $(this).attr("data-myid");
$(".post_reply_report_win_"+myID).dialog({
modal : true,
draggable : false,
resizable : false,
buttons: [
{
text: "Cancel",
click: function () {
$(this).dialog("close");
},
style: "outline: none;"
}
],
close : function(event, ui){
$(this).dialog("close");
}
});
});

jQuery: Can't get the submit button to work

I am familiar with JavaScript but new to jQuery and very lost at the moment. I realise this question has been asked before, but I am not clear on how to solve this one. I am creating a dialog box with a submit button. When the submit button is clicked, it should direct to the function ’getUsername()’. I tested the code in JavaScript and I got it to work successfully, but can’t get the same result with the jQuery dialog box. The dialog box shows, with the text input and submit button, but clicking the button doesn't yield any result.
This is the html code:
<body onload="showDialog()">
<form id="usernameInput" action="" onsubmit="return getUsername()">
<br><br>
<input type="text" id="usernameBox" required>
<input type="submit" value="Start chatting!">
</form>
</div>
</body>
and this is the script:
function showDialog(){
$(document).ready(function(){
$( "form" ).dialog({
open: function() {
$( this ).find( "[type=submit]" ).hide(); },
title: 'Enter username',
width: 500,
height: 300,
modal: false,
buttons: [{
text: "Start chatting!",
click: $.noop,
type: "submit"
}
]
});
});
}

Because the submit button is created outside the form, so the automatic form submit won't work
function showDialog() {
$(document).ready(function () {
$("form").dialog({
open: function () {
$(this).find("[type=submit]").hide();
},
title: 'Enter username',
width: 500,
height: 300,
modal: false,
buttons: [{
text: "Start chatting!",
click: function(){
$("form").submit()
},
type: "submit"
}]
});
});
}
See the dom structure
Demo: Fiddle

confitional focus on textbox using jquery

I have two checkboxes like this:
<input id="isGenericPassword" name="isGenericPassword"
onclick="IsGenericOrUnique(this.id);" type="checkbox" value="true" />
<input name="isGenericPassword" type="hidden" value="false" />
<input checked="checked" id="isUniquePassword" name="isUniquePassword"
onclick="IsGenericOrUnique(this.id);" type="checkbox" value="true" />
<input name="isUniquePassword" type="hidden" value="false" />
<input id="UniquePassword" name="UniquePassword" style="display:none"
type="text" value="" />
in document.ready, I have
$('#isUniquePassword').is(':checked')
? $("#UniquePassword").show()
: $("#UniquePassword").hide();
so that related textbox is visible if checkbox is checked.
I am hiding the textbox UniquePassword on click of isUniquePassword checkbox
$("#isUniquePassword").click(function () {
$("#UniquePassword").toggle(this.checked);
if ($("#isUniquePassword").is(':checked')) {
// unique password gets focus only if related checkbox is checked
$("#UniquePassword").focus();
}
});
and show dialogue when user tries to go away without typing anything
$("#UniquePassword").blur(function () {
if ($("#isUniquePassword").is(':checked') &&
$("#UniquePassword").val() == '')
{
$("#dialog-RecipientEmail-error").dialog("open");
}
});
and on Ok button click of that dialogue, setting focus again to that textbox so that value is entered
$("#dialog-RecipientEmail-error").dialog({
autoOpen: false,
resizeable: false,
width: 300,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
$("#UniquePassword").focus();
}
}
});
No I want that if isGenericPassword is checked or isUniquePassword is unchecked then I should get that error dialogue

$("#UniquePassword").focus(); will not focus the field rather it will trigger the actions which are bound with focus event. To focus a field, you need to get the handle of the HTML element
$("#UniquePassword").get(0).focus();
That should work.

Trying to set value on hidden parameter on click of submit button in form

Trying to set a parameter on a hidden field on click of submit button.
$('.delete').on('click', function() {
$('#id').val('1000');
});
This is the hidden field:
<input type="hidden" name="itemId" id="id" />
And this is one of my submit buttons:
<input type="submit" value="Delete item" class="delete" />
However at the server the itemId field is empty.

Try to do it by using Jquery .attr() function :
Change:
$('.delete').on('click', function() {
$('#id').val('1000');
});
To:
$('.delete').click(function() {
$('#id').attr('value','1000');
});