CODEWITHSUNDEEP
htmlformsbuttonreset
Krischu
Krischu

Reputation: 1125

Clearing a portion of a HTML FORM (Reset button)

My contact form has two columns. Is there a means to have a RESET button for each column, or a button that only selects a portion of the fields?

So in this example a second button that only clears the right column (resets all radio buttons e.g.)

<!DOCTYPE html>
<html class="no-js">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1" />

<title>Kontaktformular</title>
<style  type="text/css" media="screen">

body {
    font: normal 12px / 19px Arial, Helvetica, sans-serif;
    color: #626363;
    -webkit-text-size-adjust: 100%;
    margin: 0;
    padding: 0;
    background-color: #fff 
}

.formContainer {
    background-color: #f1f1f2 ;
    padding-left: 20px ;
    padding-top: 20px ;
    padding-bottom: 20px ;
}

.formContainer *:focus {
    outline: 0 ;
}

.formContainer .additionalData{
    padding-top: 30px ;
    /*padding-left: 100px;*/
}

.formContainer .additionalData h2{
    font-size: 12px ;
    line-height: 19px ;
    margin-bottom: 5px ;
}

.formContainer p{
    color: #000 ;
    margin: 0px ;
    margin-bottom: 10px ;
}

.formContainer .formField {
    margin-bottom: 5px ;
}

.formContainer .additionalData .formField {
    margin-bottom: 5px ;
}

.formContainer .additionalData .block{
    margin-bottom: 30px ;
}

.formContainer .formField .formFieldLeft{
    width:60px ;
    float: left ;
}

.formContainer .formField .formFieldRight{
    width:320px ;
    float: right ;

}

.formContainer input {
    border: 1px solid #CCC ;
    padding:6px ;
}

.formContainer label {
    display: block ;
    color: #626363 ;
    vertical-align: bottom ; 
}

.formContainer label.no-break, .formContainer input.no-break {
    display: inline-block ;
}

.formContainer label.rightdistance {
    padding-right: 10px ;
}

.formContainer input[type="text"], .formContainer input[type="email"] {
    width:200px ;
    -webkit-border-radius: 3px ;
    -moz-border-radius: 3px ;
    border-radius: 3px ;
}

.formContainer input.small1 {
    border: 1px solid #CCC ;
    width:50px ;
}

.formContainer input.small2 {
    border: 1px solid #CCC ;
    width:120px ;
}

.formContainer textarea{
    width: 210px ;
    border: 1px solid #CCC ;
    min-height: 100px ;
    font: normal 12px / 19px Arial, Helvetica, sans-serif ;
    padding:6px ;
}

.formContainer span.break {
    display: block ;
}

.formContainer .button{
    display: inline-block ;
    padding: 4px 12px ;
    margin-bottom: 0 ;
    font-size: 14px ;
    line-height: 20px ;
    color: #626363 ;
    text-align: center ;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75) ;
    vertical-align: middle ;
    cursor: pointer ;
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6) ;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)) ;
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6) ;
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6) ;
    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6) ;
    background-repeat: repeat-x ;
    border: 1px solid #bbbbbb ;
    border-color: #e6e6e6 #e6e6e6 #bfbfbf ;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25) ;
    border-bottom-color: #bfbfbf ;
    -webkit-border-radius: 4px ;
    -moz-border-radius: 4px ;
    border-radius: 4px ;
}
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */


@media (min-width: 480px) {

    .formContainer .clientData{
        width: 220px ;
        float: left ;
    }

    .formContainer .additionalData{
        width: 220px ;
        float: left ;
        padding-left: 20px ;
    }

    .formContainer .additionalData{
        padding-top: 0px ;
    }

    .formContainer .additionalData h2 {
        margin-top: 0px ;
    }

    .clearfix:after {
    content: "";
    display: table;
    clear: both;

    }
}

@media (min-width: 800px) {

    .formContainer .clientData{
        width: 400px ;
        float: left ;
    }

    .formContainer .additionalData{
        width: 280px ;
        float: left ;
        padding-left: 100px ;
    }

    .formContainer textarea{
        width: 430px ;
    }

    .formContainer span.break {
        display: inline-block ;
    }
}
</style>
</head>
<body>
<div class="formContainer clearfix">
<form class="clearfix" action="contact" method="post">
    <div class="clientData ">
        <div class="formField">
        <label class="no-break" for="man">Herr</label>
            <input type="radio" name="gender" value="Herr" id="man">
        <label class="no-break" for="woman">Frau</label>
            <input type="radio" name="gender" value="Frau" id="woman">
        </div>
        <div class="formField">
            <label for="Kontaktname">* Name</label>
            <input type="text" size="29" name="Kontaktname" id="Kontaktname">
        </div>
        <div class="formField">
            <label for="Vorname">Vorname</label>
            <input type="text" size="29" name="Vorname" id="Vorname">
        </div>
        <div class="formField">
            <label for="Landeskennzeichen">Landeskennzeichen</label>
            <input class="small1" type="text" size="29" name="Landeskennzeichen" id="Landeskennzeichen">
        </div>
        <div class="formField">
            <div class="formFieldLeft">
            <label for="PLZ">* PLZ</label>
            <input class="small1" type="text" size="29" name="PLZ" id="PLZ">
            </div>
            <div class="formFieldRight">
            <label for="Ort">Ort</label>
            <input class="small2" type="text"  size="29" name="Ort" id="Ort">
            </div>
        </div>
        <div class="formField">
            <label for="Strasse">* Strae</label>
            <input type="text" size="29" name="Strasse" id="Strasse">
        </div>
        <div class="formField">
            <label for="Telefon">* Telefon</label>
            <input type="text" size="29" name="Telefon" id="Telefon">
        </div>
        <div class="formField">
            <label for="Telefax">* Telefax</label>
            <input type="text" size="29" name="Telefax" id="Telefax">
        </div>
        <div class="formField">
            <label for="Email">* e-mail</label>
            <input type="email" size="29" name="Email" id="Email">
        </div>
        <div class="formField">
            <label for="Freie_Texteingabe">Ihre Nachricht an uns:</label>
            <input type="textarea" rows="3" cols="40" placeholder="Ihre Frage oder Anregung..." name="Freie_Texteingabe">
        </div>
        <div class="formField">
            <input type="radio" name="Antwort_per" value="Schreiben" id="Schreiben">
            <label class="no-break rightdistance" for="Schreiben">Bitte um schriftliche Nachricht</label><span class="break"></span>
            <input type="radio" class="" name="Antwort_per" value="EMail" id="EMail">
            <label class="no-break" for="EMail">Bitte um Nachricht per-email</label>    
        </div>
    </div>
    <div class="additionalData">
        <div class="headerContainer ">
            <h2>Kreuzen Sie an</h2>
        </div>
        <div class="block">
            <h2>Produkte</h2>
            <div class="formField">
                <input  type="checkbox" name="Produkt1" value="Ja" id="Produkt1">
                <label class="no-break" for="Produkt1">Produkt1</label>
            </div>
            <div class="formField">
                <input type="checkbox" name="Produkt2" value="Ja" id="Produkt2">
                <label class="no-break" for="Produkt2">Produkt2</label>
            </div>
            <div class="formField">
                <input type="checkbox" name="Produkt3" value="Ja" id="Produkt3">
                <label class="no-break" for="Produkt3">Produkt3</label>
            </div>
            <div class="formField">
                <input type="checkbox" name="Produkt4" value="Ja" id="Produkt4">
                <label class="no-break" for="Produkt4">Produkt4</label>
            </div>
                </div>
        <div class="block">
            <div class="formField">
                <input class="button" type="reset" name="B2" value="Zurcksetzen">
            </div>
        </div>
        <div class="block">
        * Summe von 1 und 2 =
        <input class="small1 no-break" type="text" size="2" name="ergebnis">
        </div>
        <div class="block">
            <input class="button" type="submit" value="Abschicken">
        </div>
    </div>
    </form>
</div>
</body>
</html>

Upvotes: 1

Views: 1648

Answers (2)

Kenneth Larsen
Kenneth Larsen

Reputation: 95

Your problem sounds similar to this one: reset value of multiple (but not all) form fields with jQuery in one line

You could solve it with the same jQuery.

Upvotes: 0

nshah143
nshah143

Reputation: 559

Reset button does not reset part of a form , if you need to reset a portion of a form using the button you can try using jquery for this like

Change the reset button to a simple button , id attribute is added to the reset button originally & the form to access them easily

<input class="button" type="button" id="B2" name="B2" value="Zurcksetzen">

Then assign a click event on the button as follows

$(document).ready(function(){
    $("#B2").click(function(){
        $('#my-form').find('input:checkbox').prop('checked', false);
    });
});

Below is the code that helps resetting all types of form elements , you can keep whatever you wish to reset and remove which you don`t want to be reset.

$('#my-form').find('input:text, input:password, select, textarea').val('');
$('#my-form').find('input:radio, input:checkbox').prop('checked', false);

A working fiddle based on your needs is here - http://jsfiddle.net/hwpmeu6d/

Upvotes: 1

Related Questions