i'm curious how might hack way detect user has chosen selection of options of form. depending on selection change way input field text process.
desired effect:
option a : accepts text, processed right away,
option b : accepts emails validated before continuing form processing.
option c : accepts emails, email validated before continuing form processing.
in end 3 options appended text file. far, can validate emails.
thanks in advance.
html form:
<form method="post" class="subscription-form form-inline" id="subscribe" role="form"> <h4 class="subscription-success"><i class="icon_check"></i> thank requesting... </h4> <h4 class="subscription-error">something wrong!</h4> <select id="iam" name="usertype" class="form-control input-box"> <option data-placeholder = "enter username" selected value="a">enter account username</option> <option data-placeholder = "enter b email" value="b"> enter b email </option> <option data-placeholder = "enter c email" value="c"> enter c email </option> </select> <input type="email" name="email" id="subscriber-email" placeholder="your email" class="form-control input-box"> <button type="submit" name="submit" id="subscribe-button" class="btn btn-default standard-button">submit</button> </form> js - far detecting selection , changing placeholder text:
$('#iam').on('change', function() { var placeholder = $(this).find(':selected').data('placeholder'); $('#subscriber-email').attr('placeholder', placeholder); }); php - far validating email , appending results file:
<?php // note: filter_var() requires php >= 5.2.0 if ( isset($_post['email']) && filter_var($_post['email'], filter_validate_email) ) { $selected_val = $_post['usertype']; // storing selected value in variable $e_mail = $_post['email'] . " - - " . $selected_val . " ," . "\n"; file_put_contents('email-list.txt', $e_mail, file_append | lock_ex); } ?>
if want validate in php need setting option value type want validate instead of x, y , process accordingly. if need values (x , y) set values format x;email , y;email, split in php , original value plus validator method.
if wish in javascript gets bit more tricky. should started set type according selected option. correct names , id put.
<html> <head> <script> function createinputfield(e){ var ts = (e || document.getelementbyid('inputfieldselector')); //the type list var tc = document.getelementbyid('inputfieldcontainer'); //the field container append our input if (ts && tc){ while (tc.firstchild) tc.removechild(tc.firstchild); //empty container var = ts.options[ts.selectedindex]; //selected option var te = document.createelement('input'); //the dynamic input field te.id = 'inputfield'; te.type = (to.getattribute('data-type') || 'text'); te.placeholder = to.getattribute('data-placeholder'); tc.appendchild(te); } } function validateinputfield(){ var te = document.getelementbyid('inputfield'); if (te){ if (te.type == 'number' && (te.value.trim() === '' || isnan(te.value))){ alert('this no number..'); return false; } else if (te.type == 'email' && te.value.indexof('@') === -1){ alert('what email that?'); return false; } } return true } </script> </head> <body onload = 'createinputfield()'> <form onsubmit = 'return validateinputfield()'> <select id = 'inputfieldselector' onchange = 'createinputfield(this)'> <option data-placeholder = 'enter text' data-type = 'text' value = 'influencer'>today want text</option> <option data-placeholder = 'enter email' data-type = 'email' value = 'b'>i feel entering email</option> <option data-placeholder = 'enter number' data-type = 'number' value = 'c'>how number?</option> </select> <div id = 'inputfieldcontainer'> <!--in here going create input field according selection.--> </div> <button type = 'submit'>submit</button> </form> </body> </html> 
Comments
Post a Comment