I need to make a JqueryMobile app for college work,
i have that form -
<form name="local_storage_form" method="post" action="#" data-ajax="false" autocomplete="on" data- theme="e" style="padding: 10px;" onsubmit="save_data()">
<label for="id">identity card number</label><input type="text" name="id" id="id" placeholder="identity card number..." data-theme="e" required class="localStore">
<label for="hphone">Home Phone Number</label><input type="tel" name="hphone" id="hphone" placeholder="Home Phone Number..." data-theme="e" class="localStore">
<label for="mphone">Mobile Phone Number</label><input type="text" name="mphone" id="mphone" placeholder="Mobile Phone Number..." data-theme="e" required class="localStore" oninvalid="setCustomValidity('Invaild Phone Number (05********)')">
<label for="bdate">Birth Date</label><input type="date" name="bdate" placeholder="Birth Date..." id="bdate" data-theme="e" required class="localStore">
<label for="email">Email Address</label><input type="email" name="email" id="email" autocomplete="off" placeholder="Email Address..." data-theme="e" required class="localStore">
<button type="button" value="Save" id="Save" data-theme="a">Submit</button>
</form>
i need to store all the details on localstorage and get them after,
how can i do it when i click on the submit button?
btw,it's an offline website so when i click submit it gives me an error.
Have a look into the Jquery API documentation.
$('#local_storage_form').submit(function(e) {
e.preventDefault(); // prevent the form from attempting to send to the web server
var $inputs = $('#local_storage_form :input');
var values = {};
$inputs.each(function() {
values[this.name] = $(this).val();
});
localStorage.setItem('testForm', JSON.stringify(values));
});
Related
Here is the problem I have:
When validating my form I would like to :
1- Send the form information to a Webhook (to process the information) I would like it to be invisible for the user
2- Redirect the user to a confirmation page (or display a confirmation message on the form)
Here is my current form that only sends the info to the webhook:
<form method="post" action="https://hooks.zapier.com/hooks/catch/12195186/bzjhk97/">
<input id="prenom" type="text" name="first_name" placeholder="Votre prénom" required="required" />
<input id="email" type="email" name="email" placeholder="Votre adresse e-mail" required="required" />
<button id="submit" type="submit" class="btn">RECEVOIR LE KIT COMPLET</button>
I don't know if it's adjustable with Javascript or just HTML...
Thanks for your help :)
You can change your button type to "button" and then add a handler to that button to POST the data. In the example below I modified your code to do that and use fetch to POST the data to the endpoint.
Inside the ".then" part is the callback (this does not get execited until you receive the response from the fetch). This is where you would display the dialog to the user or redirect them to another page.
<form method="post" action="https://hooks.zapier.com/hooks/catch/12195186/bzjhk97/">
<input id="prenom" type="text" name="first_name" id="first_name" placeholder="Votre prénom" required="required" />
<input id="email" type="email" name="email" id="email" placeholder="Votre adresse e-mail" required="required" />
<button id="submit" type="button" class="btn" id="btn">RECEVOIR LE KIT COMPLET</button>
</form>
<script>
const getButton = document.getElementById('btn');
const getFirstName = document.getElementById('first_name');
const getEmail = document.getElementById('email');
fetch('https://hooks.zapier.com/hooks/catch/12195186/bzjhk97/', {
method: 'POST',
body: new URLSearchParams({
first_name: getFirstName.value,
email: email.value
})
})
.then(response => {
// Do stuff with the response
});
I am trying to specify a dynamic url in the actions properties of form.
The url will be dependant on what the user enters in the textbox. For example, if the user enters "Fred" as firstname and 1234 as courseId, then the url should be "/users/Fred/course/1234"
This is what I have so far but it is not reading the firstname and courseId.
<form action="/users/{{firstname}}/course/{{courseId}}" method="POST">
<input type="text" placeholder="firstname" name="firstname">
<input type="email" placeholder="email" name="email">
<input type="text" placeholder="courseId" name="courseId">
<input type="submit" value="Submit">
</form>
No php and ajax can be used.
You need javascript to do this
const template = (firstname, courseId) => `/users/${firstname}/course/${courseId}`;
document.getElementById('myForm').addEventListener('submit', function(s) {
s.preventDefault();
this.action = template(this.elements["firstname"].value, this.elements["courseId"].value);
this.submit();
});
<form action="placeholder" method="POST" id="myForm">
<input type="text" placeholder="firstname" name="firstname">
<input type="email" placeholder="email" name="email">
<input type="text" placeholder="courseId" name="courseId">
<input type="submit" value="Submit">
</form>
HTML form
I am trying to combine:
<input name="domain" id="domain" required="" type="hidden" value="domain.com">
<input name="username" id="username" required="" type="text">
to pass this combined information in the form as what is now:
<input name="user" id="user" required="" type="text">
Current code:
<input name="user" id="user" required="" type="text">
This requires the user to type both the domain and user name into the text box.
Example: domain.com\username
I would like to include the static domain “domain.com\” as hidden text to the input so they can just type the username.
Example: username
The code currently is:
<p>Username:</p>
<input name="user" id="user" required="" type="text">
I've been able to change the error message when the user has not typed their email in yet, but how do I change the error message when the user types in their email with the wrong format?
This is my code written in Bootstrap 4 style:
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="" class="form-control" oninvalid="this.setCustomValidity('Please Enter valid email')" oninput="setCustomValidity('')">
</div>
You simply can fix this with adding title to input tag
<input type="email" class="form-control" name="email" id="freeform_email"
placeholder="Enter an email" required="required"
oninvalid="this.setCustomValidity('Enter an email that contains "#". Example: info#roshni.nl')" title="Email: the email contains '#'. Example: info#ros-bv.nl" />
Yours should be then:
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="" class="form-control" oninvalid="this.setCustomValidity('Please Enter valid email')" oninput="this.setCustomValidity('')" title='<your text>'">
</div>
You're welcome.
Here’s an example of how to do it:
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["email"].value;
var atpos = x.indexOf("#");
var dotpos = x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
alert("Not a valid e-mail address");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="/action_page.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
</body>
</html>
You’ll have to change the text inside alert to include your custom message and action_page.php to include your own and add your desired styles all over!
UPDATE
If you don't want to implement your own JavaScript functions then you can just go ahead and add conditions to the oninvalid as follows:
<input type="email" name="email" required="" class="form-control" oninvalid="if (this.value == ''){this.setCustomValidity('This field is required!')} if (this.value != ''){this.setCustomValidity('The email you entered is invalid!')}" oninput="setCustomValidity('')">
<form class="form-asd" role="form">
<h2 class="form-signin-heading">login</h2><hr />
<label class="control-label" for="username">Username</label>
<input class="form-control" type="email" required="" placeholder="username"data-error="enter username"></input>
<label class="control-label" for="username">password</label>
<input class="form-control" type="password" required=" " placeholder="Password"></input>
<label class="checkbox"></label>
<button class="btn btn-lg btn-primary " type="submit">submit</button>
</form>
how can we change this default message of popover of the require field "Please fill out this field "to "please enter username"
You can use setCustomValidity function when oninvalid event occurs.
Like below:-
<input class="form-control" type="email" required=""
placeholder="username" oninvalid="this.setCustomValidity('Please Enter valid email')">
</input>
Update:-
To clear the message once you start entering use oninput="setCustomValidity('') attribute to clear the message.
<input class="form-control" type="email" required="" placeholder="username"
oninvalid="this.setCustomValidity('Please Enter valid email')"
oninput="setCustomValidity('')"></input>
Combination of Mritunjay and Bartu's answers are full answer to this question. I copying the full example.
<input class="form-control" type="email" required="" placeholder="username"
oninvalid="this.setCustomValidity('Please Enter valid email')"
oninput="setCustomValidity('')"></input>
Here,
this.setCustomValidity('Please Enter valid email')" - Display the custom message on invalidated of the field
oninput="setCustomValidity('')" - Remove the invalidate message on validated filed.
And for all input and select:
$("input[required], select[required]").attr("oninvalid", "this.setCustomValidity('Required!')");
$("input[required], select[required]").attr("oninput", "setCustomValidity('')");
I wanted to change the text of the textarea. This method helped
<form action="/action_page.php" method="post">
<input type="text" required placeholder="username" oninvalid="this.setCustomValidity('Error validate')" oninput="setCustomValidity('')">
<br><br>
<textarea placeholder="Ko’cha, uy, xonadon" name="address" required oninvalid="this.setCustomValidity('Majburiy maydon')" oninput="setCustomValidity('')"></textarea>
<input type="submit" value="Submit">
</form>
$("input[required]").attr("oninvalid", "this.setCustomValidity('Say Somthing!')");
this work if you move to previous or next field by mouse, but by enter key, this is not work !!!