I am using the css modal box described by Paul R.Hayes here - http://www.paulrhayes.com/experiments/modal/
I have inserted a form into the modal box. The form target is in an iframe which is hidden on the same page. I want to close the modal window as soon as the form submits. But the form should be processed within the iframe (hidden).
How can I achieve this?
It looks like the modal window is closed by any url linking to the #close html fragment.
Therefore adding the following code to the submit handler of your form should close the modal on submission.
<form ... onsubmit="window.location.assign('#close')">
I assume the close button of the modal button calls a Javascript function. For instance "CloseModal()".
In your form tag, you can use the following code to call that function:
<form name="myform" action="myconfpage.extension" target="iframe" onSubmit="CloseModal();">
This will call the close function on submitting of the form.
Related
Am building a Wordpress plugin and am Using Vue Js.
I set up a variable that will be set to true on a button click
Then another div which is a modal that will remaining hidden with v-if as long as the variable is false. The is also a form in the div modal(pop up)
The problem is that once the value changes, on button pressed, the form submits immediately.
This has been happening but I usually ignore it because there was always a required field which will prevent the form from submitting automatically.
Vue.js Data object
{
selected_to_show : false,
}
The modal div
<div v-if="selected_to_show === true" class='mp-modal'>
<form on:submit.prevent="xhrSubmit()">
<form>
</div>
<button v-on:click="selected_to_show = true"></button>
This works but once the modal opens, the form submits immediately.
Note: There is only two button elements in the form where are all set to type="button"
The target is to prevent the form from submitting automatically when shown
If any one still uses this approach to re-render vue apps, my advice is, don't.
The best way to re-render the app is by doing
this.forceUpdate();
This will re-render the vue app instead of modifying data properties of the vue instance which are utilized during rendering.
However, don't overuse it.
Most times when your view is not re-rendering naturally, its probably because you are doing something wrong.
Hello I have a contact form I want to do it with PHP. And I have the submit button, I want when all fields are ready to press, when the email was send to change my button. First in my button is a text with background color yellow and the text is "Send". When I press the button and the email is sent I want to change the background color in red and I want to add an icon aside to text, the text is modifed in "Sent". How can I do this?
<script src="jquery.min.js"></script>
<script >
function button(){
//your ajax code for sending data
/* function retrieveData(){
$.post('server.php',{}, function(data){
});*/
$("#button").attr('value', 'Sent');
$("#button").css("background-color","red")
}
</script>
<input type="button" id="button" name="button" value="Send" onclick="button()">
Try this. You can do it with javascript.
You have a form with some inputs and a submit button.
You want to manipulate the submit button after all of the form fields were filled-in, and finally manipulate it again once the submit button was clicked.
What you need to do is to write a little javascript (either plain vanilla or jQuery, choose what suits you best) to handle two things in your form
Your form's input fields (for first submit button change):
Attach an event to the input fields to check for validation as you wish, and change the submit button accordingly.
Your form's submit button (for the second submit button change):
Attach a click event to the submit button (and make sure to prevent the default, so once the submit button was clicked, it will be manipulated in the way you wish.
I have wrote you an example, where in my scenario I have two input in my form and a submit button which is disabled and greyed-out by default.
As soon as all form fields are filled-in (not empty), the submit button becomes active (disable attribute removed and color change) - finally when the submit button is being clicked, it will change it's color to green as an indication that it was clicked.
$('#myForm input').on('keyup',function(){
var validated = true;
$('#myForm input').each(function(){
if($(this).val() === ''){
validated = false;
}
});
if(validated){
$('#submitBtn').removeClass('disabled').prop('disabled',false);
}else{
$('#submitBtn').addClass('disabled').prop('disabled',true);
}
});
$('#submitBtn').on('click',function(e){
e.preventDefault();
e.stopImmediatePropagation();
$(this).addClass('submited').prop('disabled',true);
// the rest of your code for submission..
});
Here's the simple fully working example:
https://jsfiddle.net/wx9gonrh/
Of course you can use this example and modify it to your own needs, or write your own from scratch using this as guidance.
In your case you might want to incorporate an async method for changing the submit button only after the emails were successfully sent (e.g. an ajax complete\done event)
Hope it helps!
How to make the html input field allow to be blank, when i click the submit button on the form view?
the idea is when I click the submit button, the input is a must to key in something else the behind code is unable to run, I am using the asp.net and the button is the asp button not html button
http://s15.postimg.org/wtl7xtuyx/myinputpic.png
I want to allow the new password can be blank
If clearing fields is what you want, use .reset() method.
document.getElementById("YourFormName").reset();
A working fiddle here:
https://jsfiddle.net/4fpk2z9o/
I may comprehend it wrongly as I do not really understand what do you want.
Update (To disable html 5 form validation) :
Add novalidate='' or <form action="yourform.asp" novalidate> to your form.
i've basically got a login form, it pops up in a css box asking the user to login. i was having the problem that once the user clicked submit they were being taken to the login window within the css box so made the submit button open a blank/new window.
The problem i have now though is the parent window stays open with the users login details. For security i'd really like to get rid of this, so is there a way i can close the parent window on the launch of the new one? Or even set it so that the page refreshes after the submit button is pressed to clear the css box?
Thanks
Here's what i've got so far:
<form action="login.php" method="post" target="_blank" >
<form action="login.php" method="post" target="_top" >
This will send the form to the parent window, which should completely remove the login box, and reload the parent page as well.
you can also use js
<script type="text/javascript">
function add_tab2(){
var newTab = gBrowser.addTab('http://www.google.com');
newTab.label = "MyTab";
newTab.id = "MyTab";
gBrowser.selectedTab = newTab;
aDoc = document.getElementById("MyTab");
// do something with aDoc here
window.close();
}
</script>
I am developing an application using Springs 2.0.
I have a requirement that when user clicks on a submit button on a form, a poup should be displayed showing a "select" box for selecting a predefined reasons and a "Textarea" to accept comment. (These dropdown options are picked from context so can not use static HTML page.)
These 2 values should also be stored in the database along with the other data fields in the parent form.
My problem is: if I use "window.open" then the parent form data does not get carried to child window as it is not "submitted". Also can not submit the form as it will not display popup window.
I tried searching for solution on sites, but could not find solution suitable for me.
Any help would be really appreicated.
Thanks.
Use a div as a popup instead of a new window. Or use JQuery. Example, messi popup under usage
Edit
If you just want something very basic,
<div id="modal" style="border:3px solid black; background-color:#9999ff; padding:25px; font-size:150%; text-align:center; display:none;">
This is a modal popup!<br><br>
<input type="button" value="OK" onClick="Popup.hide('modal')">
</div>
Show Modal Popup
<br>
Show Modal Popup With A Custom Screen
http://www.javascripttoolbox.com
You can use jQuery modal. Here is a similar example which accepts input in a modal http://jqueryui.com/demos/dialog/modal-form.html.
Resolved it using window.showModalDialog and normal java script. Here are the details.
Firstly I defined 2 hidden fields on parent page. When popup window is opened and submitted, the values entered in the dropdown and text area are assigned to those.
var handle = window.showModalDialog(htmlURL,this,urlProp);
when submitted,
document.getElementById("hiddenRejectionComment").value = handle.rejectionComment;
document.getElementById("hiddenRejectionReason").value = handle.rejectionReason;
Simple, wasn't it?