Develop Reference

trigger jquery modal popup on form submit

This is my first time working with jquery modals. I'm trying to display the popup only when the form is submitted. But instead, it's displaying on page load. How do I fix it?
<script>
$( function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Yes": function() {
$( this ).dialog( "close" );
},
"No": function() {
$( this ).dialog( "close" );
}
}
});
} );
</script>
<div id="dialog-confirm" title="Not so fast">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px
20px 0;"></span>Did you want to add a third for only $50? Click Yes to add</p>
</div>
<form id="orderform" action="/action_page.php">
Package 1:<br>
<input type="text" name="packageonename" value="">
<br>
Package 2:<br>
<input type="text" name="packagetwoname" value="">
<br><br>
<input type="submit" value="Submit">
</form>

In order to prevent the dialog from automatically opening you can set autoOpen property to false when initializing the dialog.
Then, on form's submit event, you could open the dialog by calling element.dialog("open").
Note that I have added an event.preventDefault() in the submit event handler to prevent the form from submitting.
$(function() {
$("#dialog-confirm").dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
autoOpen: false,
buttons: {
"Yes": function() {
$(this).dialog("close");
},
"No": function() {
$(this).dialog("close");
}
}
});
$("#orderform").on("submit", function(e) {
$("#dialog-confirm").dialog("open");
e.preventDefault();
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="dialog-confirm" title="Not so fast">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px
20px 0;"></span>Did you want to add a third for only $50? Click Yes to add</p>
</div>
<form id="orderform" action="/action_page.php">
Package 1:<br>
<input type="text" name="packageonename" value="">
<br> Package 2:<br>
<input type="text" name="packagetwoname" value="">
<br><br>
<input type="submit" value="Submit">
</form>

You can do like this
$('#orderform').submit(function() {
$("#dialog-confirm").dialog("open");
return true; // return false to cancel form action
});

jQuery UI Dialog Buttons won't hide

Somehow this code doesn't work properly.
All Buttons are shown, only the "Generate" Button hides after the sucessful link generation. On the same site I have another dialog, implement the same way, which is working fine.
$("#guest-link-dialog").dialog({
autoOpen: false,
resizable: false,
height: 300,
width: 510,
modal: true,
draggable: false,
closeOnEscape: false,
open: function() {
$("#closeButton").hide();
},
buttons: [{
id: 'generateButton',
text: 'Generieren',
click: function() {
$('#generatedlink').html('<img src="<?php echo Yii::app()->request->baseUrl; ?>/images/icons/32x32/loading.gif" alt="loading" style="padding-left:215px;padding-top:40px;" />');
$.getJSON('<?php echo Yii::app()->request->baseUrl; ?>/index.php?r=ajax/guestlink&fileid=' + $(this).data('fileid') + '&count=' + $('#inputcount').val())
.done(function(json) {
if (json.status == "SUCESS") {
$('#generatedlink').html('<a href="' + json.url + '" >' + json.url + '</a>');
$('#generateButton').hide();
$('#cancelButton').hide();
$('#closeButton').show();
} else if (json.status == "ERROR") {
$("#message").css('color', 'red');
}
$("#message").text(json.message);
})
.fail(function(json) {
$("#message").css('color', 'red');
$("#message").text('Fehler');
});
}
}, {
id: 'closeButton',
text: 'Schliessen',
click: function() {
$(this).dialog('close');
}
}, {
id: 'cancelButton',
text: 'Abbrechen',
click: function() {
$(this).dialog("close");
}
}],
close: function() {
$("#message").css('color', '');
$('#generatedlink').html('');
$('#generateButton').show();
$('#cancelButton').show();
$('#closeButton').hide();
}
});
Edit:
<div id="guest-link-dialog" title="Gast Link erstellen">
<form>
<fieldset style="border:1;">
<label for="count">Anzahl mögliche Downloads</label>
<input type="text" name="count" id="inputcount" class="text ui-widget-content ui-corner-all" size="1" value="1" maxlength="1" />
</fieldset>
</form>
<div id="generatedlink" style="width:100%"></div>
</div>

The problem was, the Button IDs were already used by the other Dialog.
Giving them other IDs solves the problem.

JQUERY using one Dialog open form with corresponding button

I hope you can all help me / give me a shove in the right direction.
The situation is as follows. I have several forms which should pop up (inpage) when clicked upon. To achieve this i am using the Dialog fuction of JQUERY which works perfectly. The only problem is my page is starting to contain a lot of code since i am giving every form its own dialog. Is there a way to combine the function to use 1 dialog? (so put everything in one function? - or load the form into the dialog depending on which button is pushed? I have done a lot of searching on the web but i cannot find anything which gives me a push in the right direction....hope yall are willing and able to help me. Anyways thanks in advance. (i only showed the first 2 functions ... i have around 6 more of these )
<script>
$(function(c) {
$( "#dialog" ).dialog({
autoOpen: false,
maxWidth:260,
maxHeight: 85,
width: 260,
height: 85,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#dialog" ).dialog({
position: {
my: 'left, top',
at: 'right, top',
of: $('#opener')
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
$(function(s) {
$( "#dialog2" ).dialog({
autoOpen: false,
maxWidth:300,
maxHeight: 85,
width: 300,
height: 85,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#dialog2" ).dialog({
position: {
my: 'left, top',
at: 'right, top',
of: $('#opener2')
}
});
$( "#opener2" ).click(function() {
$( "#dialog2" ).dialog( "open" );
});
</script>
<body>
<?php
if(!empty($row['voornaam'])){
?>
<div id="dialog" >Naam<br>
<p><form method="post" id="naam"> <input type="text" value="<?php echo $row['voornaam'];?>" name="voornaam" size="8"/> <input type="text" value="<?php echo $row['achternaam'];?>" name="achternaam" size="8"/> <input type="submit" value="opslaan" > </form>
</div>
<button id="opener" border="0" color="white"> <?php echo $row['voornaam'] . " " . $row['achternaam'] ;?> <img src="edit.png" width="10" height="10"></button>
<?php
} ?>
<?php
if(!empty($row['gebooredatum'])){
?><div id="dialog2" >Geboortedatum<br>
<p><form method="post" id="leeftijd" > <input type="text" value="" name="geboortedatum" placeholder="<?php echo $row['gebooredatum'];?>" size="11"/> <input type="submit" value="opslaan" > </form>
</div>
<button id="opener2" border="0" color="white"> <?php echo $leeftijd ;?> Jaar <img src="edit.png" width="10" height="10"></button>
<?php
} else {?>
<div id="dialog2">Geboortedatum<br>
<p><form method="post" id="leeftijd"> <input type="text" name="geboortedatum" placeholder="dd-mm-jjjj" size="11"/> <input type="submit" value="opslaan" "size="3"></form></p>
</div>
<button id="opener2" border="0" color="white"><?php echo "Voeg je geboortedatum toe";?> <img src="edit.png" width="10" height="10"></button>
<?php } ?>
</body>
</html>

You could use the open event provided by the jquery widget. Inside this event is where you can place some logic that would determine what you want to show in the dialog.
http://api.jqueryui.com/dialog/#event-open

How to get a value from the input and add to the href jquery

I would like to do something like the window of favorites on google chrome so the idea is write a hiperlink and then the link appears on the page.I m using jquery but doesn't work
html:
<div id="Add" title="Add Link">
<form>
<fieldset>
<label for="dir">URL</label>
<input id="dir" type="url" class="text ui-widget-content ui-corner-all"/>
</fieldset>
</form>
<div id="cuadro"></div>
$(function(){
var a = $("#Add");
a.dialog({
autoOpen: false,
height:350,
width:250,
modal: true,
buttons: {
"Accept": function(){ //Accept
AddLink();
$( this ).dialog( "close" );
},
"Reset": function(){//Reset
dir.val(" ")
},
"Cancel": function() {//Cancel
$( this ).dialog("close");
}
},
close: function() {
$( this ).dialog( "close" );
}
});
});
function AddLink(){
var dir=$("#dir);
var link=dir.val();
alert(dir.val());
$("#cuadro").append('<li>link1</li>');
}

If you want to use your linkvariable as the href then you need to change
$("#cuadro").append('<li>link1</li>');
to
$("#cuadro").append('<li>link1</li>');

DEMO FIDDLE
I'm not sure exactly what you meant by "write a hiperlink and then the link appears on the page", so I'm going to do my best and guess that this is what you want:
User types a URL into the input box.
You display it in some div below it.
HTML
<form>
<fieldset>
<label for="dir">URL</label>
<input id="dir" type="url" class="text ui-widget-content ui-corner-all"/>
</fieldset>
</form>
<p></p>
CSS
p {
color: green;
margin: 8px;
}
JavaScript
$( "#dir" )
.keyup(function() {
var value = $( this ).val();
$( "p" ).text( value );
})
.keyup();

button into tooltip using qtip plugin doesn't work

I wrote this code below used qtip plugin for html link :
$(document).ready(function() {
$('#login').qtip({
content: '<table><tr><td>Username</td><td><INPUT type="text" value="" name="username" title="Enter Username" class="txtbx"/></td>' +
'<td>Password</td><td><INPUT type="password" value="" name="password" title="Enter password" class="txtbx"/></td>' +
'<td><button id="loginbtn" type="submit" >login</button></td></tr></table>',
show: { when: { event: 'click' },
effect: { type: 'fade', length: 200 }
},
hide: { when: { event: 'unfocus' },
effect: { type: 'fade', length: 430 }
},
position: {
adjust: { resize: true
},
corner: {
target: 'bottomLeft',
tooltip: 'topLeft'
}
},
style: {
name: 'dark',
width: { max: 700 }
}
});
});
but the submit button doesn't work !!!!??? any help here !!

Does replacing <button id="loginbtn" type="submit" >login</button> with
<input name="loginbtn" id="loginbtn" type="submit" value="login" />
work?
Also, I don't see a form element anywhere with an action or method attribute wrapping all of your form inputs. Hence, I don't think the browser knows what to do when you submit the form.