Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change the value of hidden input field before submitting

I have a Feedburner subscription form with two buttons, one for daily news and one for weekly news. The question is how to change the value of hidden input field with name 'uri' before submitting? My solution doesn't work.

This is what I try to use:

<form id="feedburner" action="https://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow">
    <p>
        <input autocomplete="off" value="Enter your email…"
            onblur="if (this.value == '') {this.value = 'Enter your email…';}"
            onfocus="if (this.value == 'Enter your email…') {this.value = '';}"
            type="text" name="email"/>
        <input type="hidden" name="uri"/>
        <input type="hidden" name="loc" value="en_US"/>
    </p>

    <input type="submit" value="Daily" onsubmit="document.getElementsByName('uri').value = 'androidinfodaily'; window.open('https://feedburner.google.com/fb/a/mailverify?uri=androidinfodaily', 'popupwindow'); return true" checked> 

    <input type="submit" value="Weekly" onsubmit="document.getElementsByName('uri').value = 'androidinfoweekly'; window.open('https://feedburner.google.com/fb/a/mailverify?uri=androidinfoweekly', 'popupwindow'); return true">

</form>

Solved

I have fixed my code and now it works. This is the final variant:

<form id="feedburner" action="https://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow">
    <p>
        <input autocomplete="off" value="Enter your email…"
            onblur="if (this.value == '') {this.value = 'Enter your email…';}"
            onfocus="if (this.value == 'Enter your email…') {this.value = '';}"
            type="text" name="email"/>
        <input type="hidden" name="uri" />
        <input type="hidden" name="loc" value="en_US"/>
    </p>

    <input type="submit" value="Daily" onclick="document.getElementsByName('uri')[0].value = 'androidinfodaily'; window.open('https://feedburner.google.com/fb/a/mailverify?uri=androidinfodaily', 'popupwindow'); return true"> 

    <input type="submit" value="Weekly" onclick="document.getElementsByName('uri')[0].value = 'androidinfoweekly'; window.open('https://feedburner.google.com/fb/a/mailverify?uri=androidinfoweekly', 'popupwindow'); return true">

</form>
like image 732
Iurie Avatar asked Jul 20 '15 11:07

Iurie


People also ask

Are hidden form fields submitted?

Yes, they'll get submitted unless they are removed from the document or have the disabled attribute set on them.

How do you input a hidden field?

The <input type="hidden"> defines a hidden input field. A hidden field lets web developers include data that cannot be seen or modified by users when a form is submitted. A hidden field often stores what database record that needs to be updated when the form is submitted.

How do you clear input value after submitting?

To clear an input field after submitting:Add a click event listener to a button. When the button is clicked, set the input field's value to an empty string. Setting the field's value to an empty string resets the input.


1 Answers

The submit event is fired on the form element, not on submit button, so use click handlers

Note that submit is fired only on the form element, not the button or submit input. (Forms are submitted, not buttons.)

<form id="feedburner" action="https://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow">
    <p>
        <input autocomplete="off" value="Enter your email…"
            onblur="if (this.value == '') {this.value = 'Enter your email…';}"
            onfocus="if (this.value == 'Enter your email…') {this.value = '';}"
            type="text" name="email"/>
        <input type="hidden" name="uri"/>
        <input type="hidden" name="loc" value="en_US"/>
    </p>

    <input type="submit" value="Daily" onclick="document.getElementsByName('uri')[0].value = 'androidinfodaily'; window.open('https://feedburner.google.com/fb/a/mailverify?uri=androidinfodaily', 'popupwindow'); return true" checked> 

    <input type="submit" value="Weekly" onclick="document.getElementsByName('uri')[0].value = 'androidinfoweekly'; window.open('https://feedburner.google.com/fb/a/mailverify?uri=androidinfoweekly', 'popupwindow'); return true">

</form>

Also it will be better to speprate the script to a function like

<form id="feedburner" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow">
    <p>
        <input autocomplete="off" value="Enter your email…" onblur="if (this.value == '') {this.value = 'Enter your email…';}" onfocus="if (this.value == 'Enter your email…') {this.value = '';}" type="text" name="email" />
        <input type="hidden" name="uri" />
        <input type="hidden" name="loc" value="en_US" />
    </p>
    <input type="submit" value="Daily" onclick="return beforeSubmit('androidinfodaily')" checked />
    <input type="submit" value="Weekly" onclick="return beforeSubmit('androidinfoweekly')" />
</form>

then

function beforeSubmit(type) {
    document.getElementsByName('uri')[0].value = type;
    window.open('https://feedburner.google.com/fb/a/mailverify?uri=' + type, 'popupwindow');
    return true
}
like image 174
Arun P Johny Avatar answered Sep 25 '22 01:09

Arun P Johny