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/
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 tried to add a handler to Submit button
<input type="submit" value="Submit/ Soumettre" onclick='submitform(); this.disabled = true;'>
function submitform()
{
let myForm = document.getElementById('MyForm');
myForm.submit();
}
but that kills all input field validators (in my case email field validator).
Magnolia should have something for such a common use-case.
Clarification: Model class attached to "Page after submit" perform time-consuming request to service. So the user doesn't see a new page and can click submit button several times.
Instead of attaching handler on submit button I put handler on form.onsubmit
<div id='shadow' style="display: none; position: absolute; width:100%;height:100%;opacity:0.3;z-index:100;background:#000"></div>
<form id="MyForm" method="post" action="" enctype="multipart/form-data" onsubmit="blockScreen()"> ... </form>
function blockScreen(){
let elem = document.getElementById('shadow');
elem.style.display = 'block';
elem.addEventListener('click', function(){}, false);
}
That shadow blocks the screen and activated only when all validators are completed
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>
I am new to Meteor this is how I kept the button in html file.
<input type="button" class="number" value="1">
<input type="button" class="number" value="2">
<input type="button" class="number" value="3">
How to get the value of these buttons in the js file.
Any one help me.
Thanks in advance.
Get the value using an event:
'click .number': function(event, template) {
console.log(event.currentTarget.value);
}
Or plain Jquery:
$($('.number')[0]).val()
$($('.number')[1]).val()
$($('.number')[2]).val()
well to determine which buttons get clicked you can simply use event handlers for your template. And its very important to know that the buttons are identified through their class names. Therefor you have to choose unique classnames.
For example if you have the buttons inside a template called template1 you just do the following:
//in your .html inside your template1
<button class="button1">Button1</button>
<button class="button2">Button2</button>
<button class="button3">Button3</button>
and the corresponding JS:
//in your clientside JS
Template.template1.events({
"click.button1": function () {
//exec code when button1 clicked
//[...]
},
"click.button2": function () {
//exec code when button2 clicked
//[...]
},
"click.button3": function () {
//exec code when button3 clicked
//[...]
}
});
if your buttons aren't in an template, but just inside your just use the area as template. for example Template.body.events will handle events in your body.
Can be done like below:
Template.TemplateName.events({
'click .number': function (event,template) {
return event.target.value;
}
});
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();}});