I have the below following :
<form action=\"http://example.co.uk/order\" method=\"post\" id=\"vouchertwo\" >
<input type=\"hidden\" id=\"discount_name\" name=\"discount_name\" value=\"123549\">
<input type=\"hidden\" name=\"submitDiscount\">
<button type=\"submit\" name=\"submitAddDiscount\" class=\"button btn btn-default button-small\"><span>OK</span></button>
</fieldset>
</form>
Currently running in php (thus the ) for now.
If I click the "OK" button manually, the voucher code 123549 is passed onto the cart and applied.
However, if I use:
<script>
window.onload = function(){
document.getElementById(\"vouchertwo\").submit();
}
</script>
to trigger the form, no value is passed along.
Any ideas what I am missing?
Took your form as-is, added a button outside the form to test submitting programmatically, works fine. The slashes are causing all sorts of issues, but that's PHP for you...
Of course, without actually submitting the form to someplace, we get a weird error. As a sample, I've created an event listener for the submit function on the form. When the form's button is clicked, the form.submit is triggered, but when I call the form.submit(), it is not. A small gotcha, but worth noting.
/***
* Created a dummy button that, when clicked,
* submits the full form.
***/
var myDummyButton = document.getElementById("dummyBtn");
var myForm = document.getElementById("vouchertwo");
myDummyButton.addEventListener("click", function(evt){
evt.preventDefault();
document.getElementById("vouchertwo").submit();
})
myForm.addEventListener("submit", function(evt){
evt.preventDefault();
console.log(this);
})<form action="#" method="post" id="vouchertwo">
<input type="hidden" id="discount_name" name="discount_name" value="123549">
<input type="hidden" name="submitDiscount">
<button type="submit" name="submitAddDiscount" class="button btn btn-default button-small"><span>OK</span></button>
</form>
<input type="button" id="dummyBtn" value="Do it!" />Now, there is a way to have both functions run the same functionality: rather than using form.submit(), use formElement.submitButtonElement.click(). By doing this, both methods will actually trigger the submit listener of the form. Take a look at this option:
/***
* Created a dummy button that, when clicked,
* submits the full form.
***/
var myDummyButton = document.getElementById("dummyBtn");
var myForm = document.getElementById("vouchertwo");
myDummyButton.addEventListener("click", function(evt){
evt.preventDefault();
document.querySelector("#vouchertwo button").click();
})
myForm.addEventListener("submit", function(evt){
evt.preventDefault();
console.log(this.querySelector("#discount_name").value );
})<form action="#" method="post" id="vouchertwo">
<input type="hidden" id="discount_name" name="discount_name" value="123549">
<input type="hidden" name="submitDiscount">
<button type="submit" name="submitAddDiscount" class="button btn btn-default button-small"><span>OK</span></button>
</form>
<input type="button" id="dummyBtn" value="Do it!" /></div>