Pre-populating HTML5 form with URL variable - html

I have the following HTML code:
<section id="two" class="wrapper alt style2">
<section dir="rtl">
<center>
<h1> מילוי פרטים אישיים לתעודת אחריות</h1>
</center>
<br>
<!-->
<form method="post" action="#">
<!-->
<form id="frmcontainer6" method="post" enctype="application/x-www-form-urlencoded" action="https://web.mxradon.com/t/FormTracker.aspx" onsubmit="return lpContentGrabber('frmcontainer6');">
<!-->
<form action="mailto:graphics#emka.co.il" method="post">
<!-->
<div class="row uniform">
<div class="6u 12u$(xsmall)">
<input type="text" id="EfullName" name="EfullName" maxlength="100" value="" placeholder="שם מלא" autocomplete="off" />
</div>
<div class="6u$ 12u$(xsmall)">
<input type="email" name="email" id="email" value="" placeholder="Email" required />
</div>
<div class="6u 12u$(xsmall)">
<input type="text" name="PhoneNu" id="PhoneNu" value="" placeholder="מספר טלפון" required />
</div>
<div class="6u$ 12u$(xsmall)">
<input type="text" name="CAdress" id="CAdress" value="" placeholder="כתובת" required />
</div>
<br>
<div class="6u 12u$(xsmall)">
<input type="text" id="Pmodel" name="Pmodel" maxlength="100" value="" autocomplete="off">
</div>
<div class="6u$ 12u$(xsmall)">
<input type="text" name="SerialNu" value="SN12-8486-EF19-8541" id="SerialNu" readonly/>
</div>
<div class="12u$">
<textarea name="message" id="message" placeholder="הערות נוספות" rows="6"></textarea>
</div>
<div class="image center">
<input type="checkbox" id="demo-copy" name="demo-copy">
<label for="demo-copy">סמן לקבלת מבצעים והנחות למייל</label>
</div>
<div class="12u$">
<ul class="actions">
<center>
<li>
<input type="submit" value="שלח טופס" class="special" />
</li>
<li>
<button type="reset" value="Reset">נקה טופס</button>
</li>
</center>
</ul>
</div>
</div>
</form>
</section>
I'm trying to pre-fill the Pmodel value by URL using somthing like
www.ee.com?Pmodel=123456
but it doesn't work.
What am I doing wrong?

You're just inserting it as a URL parameter. In order to pre-fill the value you need to retrieve it from the URL and insert it as a value for the Pmodel element.
You can do this either on the server side (for example PHP, Java, depends on your server) or on client's side with JavaScript after the page loads.
For example (JavaScript) insert this script on the end of your page:
<script type="text/javascript">
//get all URL parameters
var parameters = window.location.search.substring(1).split("&");
var splitParam, value;
//cycle through them and find the correct one
for(var i=0; i<parameters.length; i++){
splitParam = parameters[i].split("=");
if(splitParam[0]=="Pmodel"){
//get its value
value = splitParam[1];
break;
}
}
if(value){
//set the input value
document.getElementById("Pmodel").value = value;
}
</script>
Example for filling: jsFiddle

Related

unable to redirect to another page after submit form

hello after the form is completed a blankpage with php insertion are shown but instead id like to be redirect to another page
<body>
<div class="main-block">
<form action="insertion.php" method="GET">
<div class="title">
<i class="fas fa-pencil-alt"></i>
<h2>Vos informations</h2>
</div>
<div class="info">
<input class="fname" type="text" required value="" name="prenom" placeholder="Prenom" />
<input class="lname" type="text" required value="" name="nom" placeholder="Nom" />
<input type="text" name="email" required value="" placeholder="Email" />
<input type="text" name="telephone" required value="" placeholder="Numéro de téléphone" />
<input type="password" name="mot_de_passe" required value="" placeholder="Mot de passe" />
</div>
<div class="checkbox"><input type="checkbox" name="checkbox" onclick="reset_msg();" /><span>Les informations sont exactes</span></div>
<div id="msg"></div>
<button type="submit" value="send" id="bouton" onclick="return send();" href="/">Envoyez</button>
</form>
</div>
</body>
Since the action is sent to insertion.php, you should do redirection in that file. You can accomplish that by setting header location after your insertion process. For example:
<?php
// YOUR INSERTION CODE HERE
// ...
// ...
header('Location: ' . $redirectURL);
exit();
?>

How to hide div class in css

On clicking submit button how to hide the below div class. I have tried >with div id but div class is not working as exactly as div id. As I have
written the code but It was closing entire window. Below is the code without adding jquery.
<div class="w3-container w3-light-grey w3-padding-32 w3-padding-large" id="contact">
<div class="w3-content" style="max-width:600px">
<h4 class="w3-center"><b>Please fill the form to continue</b></h4>
<script type="text/javascript">var submitted=false;</script>
<!--Update the URL for thank you page on form submit -->
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;"
onload="if(submitted) {window.location='';}"></iframe>
<!-- Update the Google forms URL in action-->
<form class= 'form1' action="https://docs.google.com/forms/u/0/d/a/1FAIlQLDFDHBaSVqkaf1BLTQ1MeRa1NH8OGw4Tpj_SZUvRj-QUTYu9Qw/formResponse" method="post" target="hidden_iframe" onsubmit="return validateForm(); ">
<div class="w3-section">
<label>Name</label>
<input class="w3-input w3-border" type="text" placeholder="Name" id="name" required name="entry.482263238">
</div>
<div class="w3-section">
<label>Email</label>
<input class="w3-input w3-border" type="text" placeholder="Email" id="email" required name="entry.227786006">
</div>
<div class="w3-section">
<label>Phone</label>
<input class="w3-input w3-border" type="text" placeholder="Phone" id="phone" required name="entry.30499006">
</div>
<div class="w3-section">
<button class="w3-button w3-block w3-black w3-margin-bottom" type="submit">submit</button>
</div>
</form>
</div>
</div>
In case you want to hide the entire form, you can add form.style.display = "none" to your validateForm() function:
const form = document.querySelector(".w3-container");
function validateForm() {
form.style.display = "none";
}
The same methodology applies if you want to hide some other div, just select it and apply element.style.display = "none";.
JSfiddle: Link

Text area placeholder is not showing up while having no space or newline between opening and closing tags

My text area place holder is not showing up. All previous answers I have seen here describe there should be no space or new line between opening and closing tags of text area and my code don't have both. Is data-validation-required-message is creating problem ? How can I solve this.
Here is my code:
<div class="col-md-6">
<div class="form-group">
<textarea class="form-control" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
I go and try
<textarea class="form-control" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>
But it`s work for me !:S
It works, check the snippet:
Demo: https://reactiveraven.github.io/jqBootstrapValidation/
$(function() {
prettyPrint();
$("input,textarea,select").jqBootstrapValidation(
{
preventSubmit: true,
submitError: function($form, event, errors) {
// Here I do nothing, but you could do something like display
// the error messages to the user, log, etc.
},
submitSuccess: function($form, event) {
alert("OK");
event.preventDefault();
},
filter: function() {
return $(this).is(":visible");
}
}
);
$("a[data-toggle=\"tab\"]").click(function(e) {
e.preventDefault();
$(this).tab("show");
});
});
<link rel="stylesheet" href="https://reactiveraven.github.io/jqBootstrapValidation/css/prettify_bootstrap.css">
<link rel="stylesheet" href="https://reactiveraven.github.io/jqBootstrapValidation/css/bootstrap.css">
<script src="https://reactiveraven.github.io/jqBootstrapValidation/js/jQuery-1.7.2-min.js"></script>
<script src="https://reactiveraven.github.io/jqBootstrapValidation/js/bootstrap.js"></script>
<script src="https://reactiveraven.github.io/jqBootstrapValidation/js/prettify.js"></script>
<script src="https://reactiveraven.github.io/jqBootstrapValidation/js/jqBootstrapValidation.js"></script>
<form class="form-horizontal" novalidate>
<div class="control-group">
<label class="control-label" for="email">Email address</label>
<div class="controls">
<input type="email" name="email" id="email" required>
<p class="help-block">Email address we can contact you on</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="emailAgain">Email again</label>
<div class="controls">
<input type="email" data-validation-matches-match="email" data-validation-matches-message="Must match email address entered above" id="emailAgain" name="emailAgain">
<p class="help-block">And again, to check for speeling miskates</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="terms-and-conditions">Legal</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" id="terms-and-conditions" name="terms-and-conditions" required data-validation-required-message="You must agree to the terms and conditions">
I agree to the terms and conditions
</label>
<p class="help-block"></p>
</div>
</div>
<div class="control-group">
<label class="control-label">Quality Control</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" name="qualityControl[]" value="fast" data-validation-minchecked-minchecked="2" data-validation-minchecked-message="Choose two" data-validation-maxchecked-maxchecked="2" data-validation-maxchecked-message="You can't have it all ways" >
Fast
</label>
<label class="checkbox">
<input type="checkbox" name="qualityControl[]" value="cheap">
Cheap
</label>
<label class="checkbox">
<input type="checkbox" name="qualityControl[]" value="good">
Good
</label>
<p class="help-block"></p>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Test Validation <i class="icon-ok icon-white"></i></button><br />
</div>
</form>
Note
Now if you want to display this message Please enter a message. then you have to validate this using jQuery. Because its data-validation-required-message is used to display custom validation message.

HTML Submit Button not firing when form filled

I have a new login page which is not submitting. :(
If I click the button and the required fields are not entered, it fires me back the errors, but as soon as they're filled and I try to submit it does nothing.
The page is live at https://www.safewise.co.nz/trainwise/login
The code
<form action="login.php" method="post" name="logForm" id="logForm" class="styled_form">
<?php if(isset($redirectURL) && !empty($redirectURL)) { ?><input type="hidden" id="redirect" name="redirect" value="<?php echo $redirectURL; ?>" /><?php } ?>
<div>
<p id="login-title">Login</p>
<input name="userEmail" type="email" class="validate[required]" id="userEmail" placeholder="Email"<?php if(isset($enteredEmail) && !empty($enteredEmail)){echo ' value="'.$enteredEmail.'"';} ?> required /><span class="form_hint">Email Address</span>
<input name="userPwd" type="password" class="validate[required]" placeholder="Password" id="userPwd" required /><span class="form_hint">Password</span>
<div class="login-checkbox"><input type="checkbox" name="remember" id="remember" style="vertical-align:middle;" /> <label for="remember">Remember Me</label></div>
<p><input name="doLogin" type="submit" id="doLogin" value="Continue" class="form-button" /></p>
<div id="forgot"><p>Register</p><p>Forgotten Password?</p>
</div>
</form>
<div id="forgotPass" class="reveal-modal">
<div class="modal-header"><h3>Forgot Password</h3></div>
<div class="modal-body" style="text-align:center;">
<form action="login.php" method="post" name="forgotForm" id="forgotForm" >
<p style="margin-bottom:4px;"><em style="font-size:small;color:#3A3A3A">Enter your email address below to receive your new password.</em></p>
<p><input name="rstEmail" type="text" class="validate[required]" id="rstEmail" placeholder="john#example.com" size="25" /> <input name="doReset" type="submit" id="doReset" value="Reset" class="form-button" /></p>
</form>
</div>
<a class="close-reveal-modal">×</a>
</div>
The weird thing is as soon as I remove this code it works.
<div id="forgotPass" class="reveal-modal">
<div class="modal-header"><h3>Forgot Password</h3></div>
<div class="modal-body" style="text-align:center;">
<form action="login.php" method="post" name="forgotForm" id="forgotForm" >
<p style="margin-bottom:4px;"><em style="font-size:small;color:#3A3A3A">Enter your email address below to receive your new password.</em></p>
<p><input name="rstEmail" type="text" class="validate[required]" id="rstEmail" placeholder="john#example.com" size="25" /> <input name="doReset" type="submit" id="doReset" value="Reset" class="form-button" /></p>
</form>
</div>
<a class="close-reveal-modal">×</a>
</div>
Any suggestions?
Where is that div located in the page? It is incorrect to have a form inside a form. And so your code may work when you remove the div above because you've taken out the second form.
Consider having them as two separate entities instead of nested.
Are these forms nested? You cannot have nested forms. You can have multiple forms in a page, just as long they're not nested.
Here's some ref on it http://www.w3.org/MarkUp/html3/forms.html
I was missing a closing div
<div id="forgot">
<p>Register</p>
<p>Forgotten Password?</p>
Needs a closing div at end
<div id="forgot">
<p>Register</p>
<p>Forgotten Password?</p>
</div>

Editing a basic contact form using hre

I have this template where I customized whats on it BUT i got stuck on the contact page where the contact form upon clicking the button clear OR send button nothing happens. I really don't know much about most of the stuff ALL are from research through net but can't get to fix this. Am I missing something here?
Questions I have in mind:
1. Do I need to put something or create in "action"
2. What do I have to put in "href" to clear or send the form to my email?
Or you have a better idea.
<h2 class="p0">Contact Form</h2>
<form id="contact-form" action="#" method="post" enctype="multipart/form-data">
<fieldset>
<label><span class="text-form">Name:</span>
<input name="p1" type="text" />
</label>
<label><span class="text-form">Email:</span>
<input name="p2" type="text" />
</label>
<div class="wrapper">
<div class="text-form">Message:</div>
<textarea></textarea>
</div>
<div class="buttons"> <a class="button-2" href="#">Clear</a> <a class="button-2" href="#">Send</a> </div>
</fieldset>
</form>
Use real buttons, don't just give them a class called buttons.
In action, put down the name of the server file that will process this form, for example action="contact_form.php". If you would like to send an email, put down action="MAILTO:someone#example.com".
<h2 class="p0">Contact Form</h2>
<form id="contact-form" action="MAILTO:someone#example.com" method="post" enctype="multipart/form-data">
<fieldset>
<label><span class="text-form">Name:</span>
<input name="name" type="text" />
</label>
<label><span class="text-form">Email:</span>
<input name="email" type="text" />
</label>
<div class="wrapper">
<div class="text-form">Message:</div>
<textarea name="message"></textarea>
</div>
<div class="buttons">
<input type="button" value="Clear" onclick="document.getElementById('contact-form').reset()"
/>
<input type="submit" value="Send" />
</div>
</fieldset>
</form>