I have a contact form 7 form which upon submission should redirect the user to the applicable page. I have three submit buttons and each should redirect to different pages. I can't figure out how to set up different redirections for the submit buttons. Anyone can help with that?
Here is my form:
<div class="popup-form" style="text-align:center; margin-bottom:0.5rem;">To be able to see the packages, please fill in the below form.</div>
<div class="popup-form">
<label> Name: <span class="required">*</span>
[text* your-name class:with-border]</label></div>
<div class="popup-form">
<label> Email: <span class="required">*</span>
[email* your-email class:with-border] </label></div>
<div class="popup-form">
<label> Company: <span class="required">*</span>
[text* Company class:with-border] </label></div>
<div class="popup-form">
<label> Phone: <span class="required">*</span>
[tel* Phone class:with-border] </label></div>
[acceptance GDPR class:popup-form] I understand and accept the privacy policy [/acceptance]
<p class="submit-button popup-form"><span class="english">[submit class:english-submit "English"]</span> [submit "Italian"][submit "Spanish"]</p>
And this is the redirection code in my header.php. At the moment it redirects no matter which submit button I click on.
document.addEventListener( 'wpcf7submit', function( event ) {
if ( '352' == event.detail.contactFormId )
{
location = 'http://example1.com';
}
}, false );
Thank you!
How about you try and give different class names to your initial labels? This will allow you to manipulate the buttons using their ID or Class name. At the moment, you are using the same class name for all your labels.
You can't. wpcf7submit event is an event that is called when form gets submitted. It can be caused by pushing a button, but also by pressing enter key.
So this event is not directly attached to any button so you can't access that button.
One way to solve this is to add custom event handlers for button clicks and set make them set value of some hidden input inside the form. This way that value will be sent with the form data.
Thank you very much for your help guys. Unfortunately none of the above worked for me.
However I managed to find a way to make it work, I added this in header.php:
<script>
window.onload=function(){
var englishSubmit = document.getElementsByClassName("english-submit");
englishSubmit[0].addEventListener("click", function()
{
window.location.href = "/packages-en/";
});
var italianSubmit = document.getElementsByClassName("italian-submit");
italianSubmit[0].addEventListener("click", function()
{
window.location.href = "/packages-it/";
});
var spanishSubmit = document.getElementsByClassName("spanish-submit ");
spanishSubmit[0].addEventListener("click", function()
{
window.location.href = "/packages-sp/";
});
}
</script>
Related
I am using Materialize css to design my post. Suppose I have a form in modal and I and post it to server.
In that form I am checking if all fields are having value.
<form>
<div class="input-field">
<input type="text" id="title" class="validate" required="" aria-required="true">
<label for="title">Title</label>
</div>
The title field is required. But when I click on a submit button in modal it is closing even if title field has empty value. Is there any way to keep the modal open for validation error in Materialize css v1.
Think about this is in separate steps. The form submission only takes place at the end of the chain, when our criteria have been met.
User Submits form
We check the form
We feedback to user
Depending on the results of 2, we may either go back to step 1, or on to step 3.
Modal Structure:
<div id="modal1" class="modal">
<div class="modal-content">
<div class="input-field">
<input type="text" id="title" class="validate" required="" aria-required="true">
<label for="title">Title</label>
<span class="helper-text" data-error="Please enter your name" data-success="Thankyou!"></span>
</div>
</div>
<div class="modal-footer">
<a id="submit-button" href="#!" class="btn">Submit</a>
close
</div>
</div>
We add optional helper-text span for user feedback, as per the documentation.
The Javascript:
document.addEventListener('DOMContentLoaded', function() {
// init modal
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems);
// get button
var button = document.querySelector('#submit-button');
// Run our own function when clicked
button.addEventListener("click", checkForm);
// Function checks for input
function checkForm() {
var input = document.querySelector('#title');
if(input.value) {
// submit form
// add valid class to show helper
input.classList.add('valid');
// close modal
instances[0].close();
// clear form
input.value = '';
// remove valid class
input.classList.remove('valid');
} else {
// prompt user for input
input.classList.add('invalid');
}
}
});
We grab the value of the text input, and based on that, add a valid or invalid class - this is the built in materialize stuff that hides or shows the relevant message that we set in data-error and data-success.
The only thing you need to add to this is the actual form submission - so something like form.submit().
Codepen.
I have created a form using the Contact Form 7 plugin for WordPress.
My form looks like this:
<label> User Name*
[text* your-name] </label>
<label> Email Adress*
[email* your-email] </label>
[submit "Register"]
I can detect if someone trying to use the same email address (already registered) via this tutorial, https://cfdbplugin.com/?page_id=904
But, WHILE showing the error message, how can I let the page redirect him to another URL after some amount of time? For example to "/homesite/?para="
Maybe I need to do something with this code
if (is_already_submitted($formName, $fieldName, $_POST[$name])) {
$result->invalidate($tag, $errorMessage);
}
}
return $result;
But I don't know how should I amend those code. Please help me.
You can do this using DOM Events. CF7 has custom DOM events, which can be used to redirect users to other page. Since you want to redirect when form data is invalid, you will need to use wpcf7invalid event.
wpcf7invalid — Fires when an Ajax form submission has completed successfully, but mail hasn’t been sent because there are fields with invalid input.
A quick example:
function my_awesome_cf7_custom_events () { ?>
<script type="text/javascript">
document.addEventListener( 'wpcf7invalid', function( event ) {
if ( 'FORM_ID' == event.detail.contactFormId ) {//<===replace FORM_ID with form id
location.replace('https://your-new-url/');
}
}, false );
</script>
<?php }
add_action( 'wp_footer', 'my_awesome_cf7_custom_events' );
Replace FORM_ID with your form id, and set your url.
More about CF7 DOM events
I have a page with table. Each table row, has two links "delete", and "edit". "delete" works fine.
I would like to do this scenario:
When user clicks on row "edit" link, a small window appears with the fields of this row.
User decide to edit or not.
User may press "Save Changes", or "Cancel".
I did the option of small window with JavaScript document.createElement(), and the window appears successfully.
But I would like to add helpers for "Save Changes", and "Cancel" buttons.
I can't do this using helpers
Template.codesList.events({
'submit form#newForm': function (events) {
// some actions
};
},
'click #edit': function () {
var px = 'px';
// Create an Overlay
var myOverlay = createOverlay();
document.body.appendChild(myOverlay);
// Create edit window display it over the Overlay
var editWindow = createPopup(300, 400);
// Create elements and append it to edit window
var editForm = editWindowForm(this._id, this.name);
editWindow.appendChild(editForm);
document.body.appendChild(editWindow);
},
'click #delete': function () {
if (confirm("Are you sure?")) {
Codes.remove({_id: this._id})
}
},
'submit form#editForm': function (event) {
event.preventDefault();
console.log("Clicked"); // This doesn't displayed
}
});
And this is the form after displaying it.
<form id="editForm" style="margin-right: 3em; margin-left: 3em;">
<div class="form-group">
<label for="itemCode" class="control-label">Code</label>
<input id="itemCode" name="itemCode" class="form-control" placeholder="Enter code">
</div>
<div class="form-group">
<label for="itemName" class="control-label">Name</label>
<input id="itemName" name="itemName" class="form-control" placeholder="Enter name">
</div>
<input type="submit" value="Save Changes" class="btn btn-primary">
<input type="button" value="Cancel" class="btn btn-info">
</form>
But when I press on "Save Changes" button, no print from console.log() and the form is making the normal submit and the page reloads again.
So, what I'm missing?
By the way that's the output of the console:
document.querySelector('form#editForm')
<form id="editForm" style="margin-right: 3em; margin-left: 3em;">…</form>
Define edit form as a template. Use event handlers as usual to handle save and cancel button clicks.
To render it, either just put it inside the page template with '#if sessionEditPopup' or if you must do it yourself then use UI.renderWithData docs here
BTW manually modifying DOM using jquery etc is something to be avoided unless there is no other way and is not the Meteor way of doing things.
Add event on click save the data into Session because Session can access globally.
And Take the data from Template.name.Healper using session,
So when u change the session value that will automatically change your page content.
Here is the link may be useful for U
http://meteortips.com/first-meteor-tutorial/sessions/
I have a form in my ASP .NET project that takes the users input, and appends it to a URL to search a wiki. The form works perfectly when you enter in a search term, and click the 'search' button, however when you type into the input box and hit enter, the page refreshes and the box clears.
my html
<form>
<label id="sideBarLabel"> Services
<input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
</label>
Search Wiki
</form>
my js
function searchWiki(){
var siteQuery = $('#query-string').val();
window.location.href = "/dosearchsite.action?queryString=" + siteQuery;
}
Can anyone help ?
Your searchWiki() js method is only called when the evenement onclick is raised on your button, but not when your form is submitted.
There is several ways to achieve what you want:
Add a js method to catch the onsubmit event of your form:
$("form").on("submit", searchWiki());
Or add a tag on your form:
<form onsubmit="searchWiki()">
Or specify the action attribute on your form:
<form action="/dosearchsite.action">
Note that in ASP.NET, the ModelBinder will link your form inputs to your controller action parameters, using the name attribute of the inputs. That means that you should not specify them in the url yourself.
You should also declare your form using Html.BeginForm or Ajax.BeginForm if you want your form to be submitted by ajax.
#Html.BeginForm("ActionName", "ControllerName")
{
<label id="sideBarLabel">Services
<input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
</label>
<input type="submit" class="button" value="Search Wiki"/>
}
This will call searchWiki when you press enter.
$('#query-string').keypress(function(event) {
if (event.keyCode == 13) {
searchWiki();
event.preventDefault();}});
Using CSS, when a link is clicked it brings up a hidden DIV that contains a form. The user will then enter information and then submit the form. I'd like the hidden DIV to remain visible, and a 'success message' to be displayed after submission. Then the user will have the option of closing the DIV. I can't get it to work without reloading the page, which causes the DIV to become hidden again. Any ideas?
<body>
Click Me
<!--POPUP-->
<div id="hideshow" style="visibility:hidden;">
<div id="fade"></div>
<div class="popup_block">
<div class="popup">
<a href="javascript:hideDiv()">
<img src="images/icon_close.png" class="cntrl" title="Close" />
</a>
<h3>Remove Camper</h3>
<form method="post" onsubmit="email.php">
<p><input name="Name" type="text" /></p>
<p><input name="Submit" type="submit" value="submit" /></p>
</form>
<div id="status" style="display:none;">success</div>
</div>
</div>
</div>
<!--END POPUP-->
<script language=javascript type='text/javascript'>
function hideDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideshow').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hideshow.visibility = 'hidden';
}
else { // IE 4
document.all.hideshow.style.visibility = 'hidden';
}
}
}
function showDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideshow').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideshow.visibility = 'visible';
}
else { // IE 4
document.all.hideshow.style.visibility = 'visible';
}
}
}
</script>
</body>
Forms by default submit content by changing to the specified page in its 'action' attribute. You will need to build additional scripts to prevent it from doing that and submit the data using either AJAX or jQuery then process the result.
Or you could simply use whatever language you're programming in to set the default visibility for the division. If the form data exists, display it by default, otherwise hide it by default.
How about using an AJAX call to post the form instead of posting back the whole page?
Instead of using a "submit" type for your button, you can use a "button" type and use a script called by onclick which will use ajax to submit the form and do whatever is necessary.
This defeats slightly the meaning of a form, but works well. You might also want to think about using a javascript library like prototype or similar (jquery, etc) that gives you the functionality to create a get or post array of your form in order to make it easier.