I am using a checkbox to change the form action on a MailChimp-form dynamically. When the DOM is loaded, the form action URL is something like this:
https://X.us3.list-manage.com/subscribe/post?u=X&id=X&EBIRD=XYZ
When I submit the form, the EBIRD-value of XYZ is pushed to MailChimp. Now, when I check the checkbox, I can see from the DOM and my console that the new form action is this:
https://X.us3.list-manage.com/subscribe/post?u=X&id=X&EBIRD=NEW-VALUE
Why is it then, that submitting the form still pushes XYZ and not NEW-VALUE? I have been in touch with MailChimp technical support. They said that when choosing "View Source" on the page, the old value was still there. But isn't that just because that is how the page is loaded in the first place?
Relevant HTML:
<form action="https://X.us3.list-manage.com/subscribe/post?u=X&id=X&EBIRD=XYZ" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
Relevant jQuery:
var formActionYes = "https://X.us3.list-manage.com/subscribe/post?u=X&id=X&EBIRD=NEW-VALUE";
var formActionNo = "https://X.us3.list-manage.com/subscribe/post?u=X&id=X&EBIRD=NEW-VALUE-2";
$('#cu-ebird').change(function() {
if(this.checked) {
$("#mc-embedded-subscribe-form").prop('action',formActionYes);
console.log($("#mc-embedded-subscribe-form").prop('action'));
} else {
$("#mc-embedded-subscribe-form").prop('action',formActionNo);
console.log($("#mc-embedded-subscribe-form").prop('action'));
}
});
The console logs what I want. The DOM shows what I want. MailChimp recieves the old value.
What am I missing?
Don't use HTML entities like & in JavaScript strings. That's only processed in HTML code, not when properties are assigned in JavaScript.
var formActionYes = "https://X.us3.list-manage.com/subscribe/post?u=X&id=X&EBIRD=NEW-VALUE";
var formActionNo = "https://X.us3.list-manage.com/subscribe/post?u=X&id=X&EBIRD=NEW-VALUE-2";
Although I'm not sure why this would impact the EBIRD parameter. It should cause the id parameter to be renamed to amp;id.
Another thing you could try is using .attr() rather than .prop().
This can be solved by not trying to change the form action at all. Just remove the merge field from the form action. Instead, you need to add a hidden input field to your form:
<input id="ebird" type="hidden" name="EBIRD" value="">
Then you change the value of this using the script:
$("#ebird").attr('value','NEW-VALUE');
Voila, everything shows up in MailChimp as it should.
Related
I'm trying to write a function to copy some fields (in real time) from a specific form, to another form
I try to be more specific:
I have 2 forms
- The first form is the one the user will fill in.
- The other form is hidden.
When the user will fill the first form, the second form (hidden) will be filled by the same informations.
Some fields are automatically filled by some calculations, so I can't use keyup/keypress or "click" to start the function
I wrote something like this, but it doesn't work
$(function(){
var form1 = $('#form1'),
form2 = $('#form2');
$('#fieldname_form1').change(function(){
$('input[name="inputname2"]', form2).val(function(){
return $('input[name="inputname1"]', form1).val();
});
});
});
You can copy in real time using the keyup function, something like this. Otherwise, when you say
Some fields are automatically filled by some calculations
What do you mean? These calculations are made by you using JS or what? Because, if you are using JS you can fill the two fields at the same time when you make the calculations.
this works for me...
$(function() {
$('#i1').change(function(evt) {
$('#i2').val(evt.target.value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" name="name1" id="i1" />
</form>
<form>
<input type="text" name="name2" id="i2" />
</form>
The change event is fired after the element has lost the focus. For the "user editable" elements you should use keyup (for the textbox) and change for the drop down elements.
On the other hand, for the fields filled automatically, you don't have any nice and clean solutions. I can think in two options:
If the calculations trigger is always the user changing some value, you could copy every form value after that happens.
(very bad option, but it would still work) You could be constantly checking for changes in every element and copying them using setInterval function.
As a side note
As well as your code should work, there is a simpler way to do it:
$('#fieldname_form1').change(function(){
var value = $('input[name="inputname1"]', form1).val();
$('input[name="inputname2"]', form2).val(value);
});
This should work -
$(function() {
var form1 = $('#form1'),
form2 = $('#form2');
$('#fieldname_form1').change(function() {
$('input[name="inputname2"]', form2).val($(this).val());
});
});
NOTE: I had posted the following as answer to one of the question(Get the value of the dynamic anchor tag and pass it to the next page), but there is a glitch. So posting it again. This is not a duplicate of any existing thread
I want to achieve the following using Tornado, html, javascript -
On clicking a link (anchor tag), {which has a dynamically generated value - {{d[0]}} , coming from MySQL database (id).}, I should be able to get the id value (say 100) and send it to the tornado controller and use a logic to pull out all details related to that id.
id -------- Note
100 ----- Note on 100
101 ----- Note on 101
Step 1 -
a href = "TornadoHandlerPath"
would send it as default Get Method, but I wanted it to be sent using Post Method.
So I followed this link - http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml
included method post to the form. So my new anchor tag looked like this
a href="javascript: submitForm()" id="id" name="id">
{{d[0]}} </a>
Step 2 - I included a hidden field in html above the anchor tag
<input type="hidden" name="cid" id="cid">
and In the javascript function I got the value of id and assigned it to the hidden field.
So when the form got submitted, the id would be sent along with the post request.
function submitForm() {
var id = $("#id").html();
var hidden = document.getElementById("cid");
hidden.value = id;
var form = document.getElementById("form");
form.submit();
}
And in Tornado Handler I caught it with self.get_argument("cid") and move on with the logic implementation.
There is a glitch in this method. Even if i click on different id say 103, it still displays the details of id 100 only!! This is because I am pulling the data, based on id. And all rows have same id.
I tried using
var id = $(this).closest('td').html(), but it dint work.
The entire code is here -
$('.alink').on('click', function() {
var id = $(this).closest('td').html();
var hidden = document.getElementById("cid");
hidden.value = id;
var form = document.getElementById("form");
form.submit();
});
HTML
<td>
<form name="form" id="ft" action="/TornadoHandler" method="Post">
<input type="hidden" name="cid" id="cid">
{{d[0]}}
</form>
</td>
I am stuck here for long time. Pls Help Me!!
you could use data attributes to move data around.no need for the hidden field, just put it straight on the anchor tag
function submitForm(thelink){ alert(thelink.getAttribute('data-info'));
}
1
2
3
I have a form with a « newInput » button, which add dynamically in javascript a new input when I click to it.
When I have an error in my form, I re-load the view with the form. It’s normal, but .. Because I use dynamic javascript for adding new input, all the input added are removed when I reload..
There is something I can do ?
This is an exemple of my view.tpl :
<input type="text" placeholder="ex: cerise"
onfocus="javascript:autoComplet('jigd1', '{site_url('recettes/getIngredient')}')" value="{set_value('igd[]')}" id="jigd1" name="igd[]"/>
{form_error('igd[]')}
I add a partiel code of my js file
var cpt=1;
function addField(uriIngredient, uriLabel) {
try
{
cpt=cpt+1;
var inputIgd = document.createElement('input'),
button = document.createElement('input'),
div = document.createElement('div'),
inputIgd.setAttribute('type','text');
inputIgd.setAttribute('name','igd[]');
inputIgd.setAttribute('id','jigd'+cpt);
button.setAttribute('type','button');
button.setAttribute('onclick','javascript:supField("igd'+cpt+'")');
button.setAttribute('value','Supprimer');
div.setAttribute('id','igd'+cpt);
div.appendChild(inputIgd);
div.appendChild(button);
document.getElementById("listIgd").appendChild(div);
...
Since you are appending new input/button to dom dynamically and not saving its state by making ajax call/submitting form you cannot retain the input/button after reloading the page.
Using localStorage, to keep the information of previously added input/buttom would be preferable.
PS : since you havent added any code which you tried, its really hard to explain localStorage with specific code.
as soon as you append, add the state of the form into localStorage,
When you loading the page, look for the localStorage to check the previously added inputs
you can set the item into localStorage :
window.localStorage.setItem('key','value')
You can retrieve them like this :
window.localStorage.getItem('key')
I have some elements on a page and I want to make use of the nice bubble style messages such as described here HTML5 form validation. It seems that to use them it is required they are within a form element and they only can be used on validation once the form is attempted to be submitted.
Taking from the linked example, I want to know how to get the following to work as described (i.e for this example pop a bubble message if the user sets a time before now)
Fiddle for this: My attempt without form
<body>
<label>
Arrival Date:
<input id="arrivalDate" type="date" onchange="dateChanged()" />
</label>
<input type="button" value="Test Reservation"></input>
<script type="text/javascript">
function dateChanged(e){
var arrivalDate = document.getElementById("arrivalDate");
var value = new Date(arrivalDate.value);
if (value < new Date()) {
arrivalDate.setCustomValidity("Arrival date must be after now!");
} else {
arrivalDate.setCustomValidity("");
}
arrivalDate.checkValidity();
}
</script>
</body>
Specifically in my case I have 2 KendoUI DateTimePickers being used to select the time range which is used to display information dynamically on the page. I'd like if I could use these bubble messages if the user tries to make the start time after the end time.
There's no way to manually trigger the validation. Using .checkValidity() will only return true/false if the context of what your checking is valid or not, i.e. if you did form.checkValidity() it will check if all form elements are valid, or input.checkValidity() only check the validity of that single element.
The only way to trigger the validation is on submit. You can simulate this by having a submit button and calling the click function.
if (!arrivalDate.checkValidity())
{
document.getElementById('submit_reservation').click();
}
Fiddle: http://jsfiddle.net/QGpQj/3/
Note: I've added window.dateChanged = .... because of your inline event listener. You really should be using .addEventListener or, ideally, jQuery for this to add backwards compatability support for those non-supported browsers.
In my main jsp page, I have something like
<%# include file="../customParametersHorizontal.jsp" %>
<tr>
<td align="center" class="ReportParamsGenerateButtonCell">
<html:submit onclick="if(preGenerateCriteria()){return true;} else {return false;}">Generate</html:submit>
</td>
</tr>
Within customParametersHorizontal.jsp, there is another include for dateSelection1.jsp, which validates date and time set on the form.
<script>
function validateHHMM(inputField, message) {
var isValid = /^(0?[1-9]|1[012])(:[0-5]\d) [APap][mM]$/.test(inputField);
if (isValid) {
}else {
alert("Time must be entered in the format HH:MM AM/PM");
}
return isValid;
}
</script>
So, within dateSelection1.jsp, I tried to disable the button in the main jsp using :
document.form1.ReportParamsGenerateButtonCell.disabled= true;
But, I get an error saying object is null or not defined.
Is there anyway, I can set a var, so that it can be chacked by the main form and disable the button accordingly?
Here's a way to do it, retaining the <html:submit> tag, and without introducing jQuery: First, add the styleId attribute so that your button has an HTML ID you can grab onto:
<html:submit styleId="my_submit" onclick="if(preGenerateCriteria()){return true;} else {return false;}">Generate</html:submit>
Next, use the ID to get the element of the DOM and disable it:
var elt = document.getElementById("my_submit");
elt.disabled = true;
Update
If I understand the original question correctly, main.jsp includes customParametersHorizontal.jsp, whici includes dateSelection1.jsp. So the three scripts are rendering just one HTML page, hence one document object.
I only see (partial) code for one <form> on the HTML page. Even if you do have more than one form, .getElementById() works across all DOM elements in all forms, as opposed to the document.form1 style of accessing elements.
Be sure that you call validateHHMM() at the appropriate point to enable/disable your submit button, and make sure that the button is re-enabled once the user corrects his input to make it valid.
document.form1.ReportParamsGenerateButtonCell will return null or error unless you have the elements with name attribute set to form1 and ReportParamsGenerateButtonCell like the example bellow:
<form name="form1">
<input type="submit" name="ReportParamsGenerateButton" value="Generate" />
</form>
This way you could do document.form1.ReportParamsGenerateButton.disabled = true without problem.