How to get wildcard form ID - javascript

How can I archive to get wildcard form name or ID?
I need to get form ID and both form are identical i only want Last digit in form ID for example in form1 I need 1 Please advice
<script>
$(document).on('submit', '[id^=addformj]', function(event){
event.preventDefault();
var formid=//I need to get form id here
alert('You have submited form ' + formid);
}
</script>
HTML is like this
<form id="form1">
<input id="value1">
</form>
<form id="form2">
<input id="value2">
</form>
I want to alert 1 if form ID 1 is submitted and 2 if Form ID 2 is submitted
<script>
$(document).on('submit', '[id^=addformj]', function(event){
event.preventDefault();
var formid=//I need to get form id here
alert('You have submited form ' + formid);
}
</script>

The form element can be accessed via the this keyword. Here's an example:
$(document).on('submit', '[id^=form]', function(event) {
event.preventDefault();
console.log('The form: ', this);
var formid = this.id;
// Change substring start value based on length of the formid prefix.
alert('You have submited form ' + formid.substr(4));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1">
<input id="value1">
<input type="submit">
</form>
<form id="form2">
<input id="value2">
<input type="submit">
</form>

Why not use a data attribute instead? Much more convenient.
$('form').on('submit', handleSubmit);
function handleSubmit(e) {
e.preventDefault();
const id = $(this).data('id');
console.log(id);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form data-id="1">
<input value="value1">
<button type="submit">Submit</button>
</form>
<form data-id="2">
<input value="value2">
<button type="submit">Submit</button>
</form>

Related

Why's my form action still being triggered when validating the form despite using e.preventDefault()?

I'd like to display a message above the name field if the user submits a name with a length greater than 20. This means the form will not get submitted - in other words, the form's action won't be triggered.
I've tried almost every suggestion I could find to prevent the form action from being triggered upon form validation but nothing seems to be working.
I've hit a wall with this and can't figure out what I'm doing wrong. How can rectify this?
html:
<form method="POST" id="form" action="/post.php">
<span class="nameError"></span>
<input type="text" class="name" name="name" placeholder="Name" required/>
<input class="button" type="submit" value="Submit"/>
</form>
Here's my jquery:
let name = $('.name');
let nameError= $('.nameError');
$(document).ready(function() {
$('input[type=submit]').on('click', function(e) {
if (name.length > 20) {
e.preventDefault();
nameError.val("Too many characters!");
return false;
}
});
});
I have modified the logic for validation. Basically we need to capture the submit event for the form and use the correct jquery methods to retreive data based upon the selectors.
$(document).ready(function() {
$("#form").submit(function( event ) {
let name = $('.name').val();
let nameError= $('.nameError');
if (name.length > 20) {
nameError.text("Too many characters!");
event.preventDefault();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<form method="POST" id="form" action="/post.php">
<input type="text" class="name" name="name" placeholder="Name" required/>
<label class="nameError"></label> <br/>
<input class="button" type="submit" value="Submit"/>
</form>

validate simple html form with JavaScript

Simple html form with some JavaScript code to check if user name is empty and then display error message otherwise submit the form.
First part works fine when the user name is empty.
Second part does not work once I click the submit button when the user name is not empty.
What is wrong with the code and how can I submit the form correctly?
let userName = document.getElementById('uname');
let form =
document.querySelector('#myForm');
form.addEventListener('submit',function(e){
e.preventDefault();
if(userName.value === ''){
alert('user name is required');
}
});
<form method="get" id="myForm">
<div>
<input type="text" class="form-control" id="uname" name="uname">
</div>
<button type="submit" name="submit">send</button>
</form>
That is because of using preventDefault. You are calling e.preventDefault(); even there is no error while you just need to call the function when form is not valid.
So put e.preventDefault(); in if part
let userName = document.getElementById('uname');
let form =
document.querySelector('#myForm');
form.addEventListener('submit',function(e){
if(userName.value === ''){
alert('user name is required');
e.preventDefault();
}
});
<form method="get" id="myForm">
<div>
<input type="text" class="form-control" id="uname" name="uname">
</div>
<button type="submit" name="submit">send</button>
</form>
You need to conditionally call the e.preventDefault() so that it doesn't prevent the submit behaviour of the form.
You only need to prevent the form submit behaviour while showing the alert box.
preventDefault() will tell the browser to avoid the default action of the form (submit action)
Move preventDefault in the condition where the username is empty:
let userName = document.getElementById('uname');
let form =
document.querySelector('#myForm');
form.addEventListener('submit',function(e){
if(userName.value === ''){
alert('user name is required');
e.preventDefault();
}
});
<form method="get" id="myForm">
<div>
<input type="text" class="form-control" id="uname" name="uname">
</div>
<button type="submit" name="submit">send</button>
</form>

Convert input text to lowercase on submitting a form

I have a form in which there is one text field is provided with a submit button.On clicking submit button,it redirects to second php page from first php page.
index.php
<form action="submit.php" method="get">
<input type="text" name="search" id="search" />
<input type="submit" value="submit" onclick="convert()" />
</form
<script type="text/javascript">
function convert()
{
alert("hi");
var str ;
str = document.getElementById("search").value;
document.writeln(str.toLowerCase());
}
</script>
On submitting the form,i want the url to become like submit.php?search=text
I want this text to be in lower case,although if text entered is uppercase.
Please guide me how to make this text lower case,I am using the above script for converting it to lower case.But its not converting the text in lower case in URL.
Please guide me on this..
There was a few errors, you were missing the right angle bracket on </form> and you were trying to write the value rather than setting the field value, try this...
<form action="submit.php" method="get">
<input type="text" name="search" id="search" />
<input type="submit" value="submit" onclick="convert();" />
</form>
<script type="text/javascript">
function convert() {
alert("hi");
var str;
var srch=document.getElementById("search");
str = srch.value;
srch.value=str.toLowerCase();
}
</script>
You can do this only using javascript with a few extra stuff:
1) Give your <form> an id
<form action="submit.php" method="get" id="form1">
2) Make your <input> type as button. The reason for this is because we want to make sure the convert() function is executed first, and after that we will submit the form.
<input type="button" value="submit" onclick="convert()" />
3) Finally javascript to:
function convert()
{
alert("hi");
var str ;
str = document.getElementById("search");
str.value = (str.value.toLowerCase());
//get the form id and submit it
var form = document.getElementById("form1");
form.submit();
}
Fiddle
You are use form element so you can get any elements inside form element access by name, Here Our form name is form1 and inside this form inputbox name="search" and access this value by this way, document.form1.search.value.toLowerCase();
Check this Demo jsFiddle
JavaScript
function convert() {
alert("hi");
var str = document.form1.search.value.toLowerCase();
document.writeln(str);
//console.log(str);
}
HTML
<form name="form1" method="get">
<input type="text" name="search" id="search" />
<input type="submit" value="submit" onclick="convert();" />
</form >
try like this:
alert("hi");
document.getElementById("search").value = document.getElementById("search").value.toLowerCase();
return true;
Fiddle Live

Force form field value on page load & submit

How could I force a specific value within a form field on page load; and have that value 'Submit' with JavaScript or jQuery?
I tried the below; but no cigar.
<script>
window.onload = function(){
document.forms['coolform'].submit()
}
</script>
Mark-Up.
<form id="search" name="coolform" class="navbar-form form-search" action="#">
<div class="input-append">
<input id="query" type="text" class="search-query" value="Bars" >
<button type="submit" class="btn"><i class="icon-search"></i></button>
</div>
Try the following (jQuery):
$(function(){
var s = $('#search');
$('#query', s).val('The value you want to force in.');
s.submit();
});
HTML:
<input id="query" name="query" type="text" class="search-query" value="Bars" >
you could use ajax to submit the value on document.ready...
$(document).ready(function(){
var query = $('#query').value;
$.ajax({
url:'url/to/your.php',
data:'query='+query,
success:function(data){
//handle response
}
});
});
You need a name attribute on the form field, otherwise it won't be included when the form is submitted:
<input id="query" name="query" type="text" class="search-query" value="Bars" >

use javascript and html form input in form action=

I have a simple form. A user inputs text and I need that text to be used in the action attribute of form. I also need to use a JavaScript variable in the form attribute action. The other thing I need is to be able to test the form input to make sure it's ok.
<script>
function validate(form){
var formVal=document.forms["myForm"]["test"].value;
simple test code for formVal
return true;
}
var scrt_var=737; //I've got more code to get this variable, I've just hardcoded it for simplicity
</script>
<FORM name="myForm" method="POST" action='http://www.example.com/viewdetails.php?id='+how to get scrt_var + '&page=' + how to get the text input; onsubmit="return validate(this);">
<input type="text" name="test" value="">
<input type="submit" value="Submit">
</form>
So how do I go about getting the variable scrt_var in the action attribute and also the inputted text as well?
This is simple event listener attached to the form onsubmit event. It simply concatenates url string, input value and scrt_var and submits form to given url.
<script>
var form=document.forms['myForm'];
form.addEventListener('submit', function(){
var testVal = this.elements['test'].value,
scrt_var = 737;
if(testVal){
this.action = 'http://www.example.com/viewdetails.php?id=' + scrt_var + '&page=' + testVal;
this.submit();
}
}, false);
</script>
<form name="myForm" method="POST">
<input type="text" name="test" value="">
<input type="submit" value="Submit">
</form>
I don't know what do you mean by statement: "The other thing I need is to be able to test the form input to make sure it's ok.". "Ok input value" is very subjective and varies depending on what you want to achieve. You have to try to validate it on your own (eg. check if the value is empty) ;)
I think you should use jQuery. It is more simplier. :)
With jQuery:
function validiate(){
//your validiation
var testVal = $('#myForm #test').val();
if(testVal == '' || testVal == ' '){
alert('Not valid');
}else{
$('#myForm').attr('action','yourUrl');
$('body').append($('#myForm').attr('action'));
}
return true;
}
$('#myForm').submit(function(e){
e.preventDefault();
validiate();
Demo:
http://jsfiddle.net/kxaAn/
plain and simple
<script>
function validate(){
formVal = document.getElementById('test').value;
var scrt_var=737;
document.forms["myForm"].action='http://www.example.com/viewdetails.php?id='+ scrt_var + '&page=' + formVal;
}
</script>
<FORM name="myForm" method="POST" action='http://www.example.com/viewdetails.php?id='+how to get scrt_var + '&page=' + how to get the text input; onsubmit="validate();">
<input type="text" id="test" value="">
<input type="submit" value="Submit">
</form>

Categories