I'm having a form looks like this:
<form method="POST">
<input type="text" name="htdate" id="htdate">
<br/>
<input type="text" name="pgdate" name="pgdate">
<br/>
<input type="submit" name="submit" value="submit">
</form>
I would like get the textbox id when on form change. My js code looks like this:
$('form :input').change(function()
{
var eleID = $(this).id;
console.log("changeID: ", eleID);
});
Console output :
changeID: undefined
Is there any ways to get the id of the element during value change.?
id is the property of dom object and jQuery object doesn't have any id property, so it will always return undefined
Use this.id or $(this).attr('id') to get id of the element
$('form :input').change(function() {
var eleID = this.id;
// var eleID = $(this).attr('id');
console.log("changeID: ", eleID);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="POST">
<input type="text" name="htdate" id="htdate">
<br/>
<input type="text" name="pgdate" name="pgdate">
<br/>
<input type="submit" name="submit" value="submit">
</form>
If you want to listen inputting value then use keypress , keyup or input event
$('form :input').on('input', function() {
var eleID = this.id;
// var eleID = $(this).attr('id');
console.log("changeID: ", eleID);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="POST">
<input type="text" name="htdate" id="htdate">
<br/>
<input type="text" name="pgdate" name="pgdate">
<br/>
<input type="submit" name="submit" value="submit">
</form>
use $().attr();
$('form :input').change(function()
{
var eleID = $(this).attr("id");
console.log("changeID: ", eleID);
});
Is there any ways to get the id of the element during value change.?
For this you can use input event which is introduced in the html5. so this can be done:
$('form :input').on('input', function()
{
var eleID = this.id; // <----this.id; || $(this).attr('id');
console.log("changeID: ", eleID);
});
change event only gets invoked when you loose focus from the input so if you are looking for immediate effect while typing/cut-copy-paste then input would be beneficial for you.
Related
I have tried to create a html form where I want to be redirected to a url if the input you insert is the same as the value of a variable. I have tried to make it work in many different ways, but I have not succeeded. : - /
Someone who can help?
Here is my code:
My HTML-form:
<form autocomplete="off" onsubmit="script.js">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input id="submit" type="submit">
</form>
My JS:
var country = 'Brazil';
var input = $("input[id='myInput']").val();
$("#submit").on("submit", function(event){
if (country == input) {
window.location.href = "https://www.google.com/";
}
});
Few things. Since you are targeting the submit button and not the form, your event listener should be "click" not "submit." Next, call event.preventDefault() inside the click function. Finally, you want to get the input value after you click the button, so that assignment has to go inside your click function:
var country = "Brazil";
$("#submit").on("click", function(event) {
event.preventDefault();
var input = $("input#myInput").val();
if (country == input) {
console.log("redirect");
window.location.href = "https://www.google.com/";
} else {
console.log("don't redirect");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form autocomplete="off" onsubmit="script.js">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input id="submit" type="submit">
</form>
You need to init the value after the form is submitted otherwise it will be undefined.
var country = 'Brazil';
$("#submit").on("submit", function(event){
let input = $("input[id='myInput']").val();
if (country == input) {
window.location.href = "https://www.google.com/";
}
});
This should work:
$("#submit").on("click", function(e){
e && e.preventDefault();
var country = 'Brazil';
var input = $('#myInput').val();
if (country === input) {
window.location.href = "https://www.google.com/";
}
});
You need to get the value of the input after the click (or submit) event is fired
Place input = $("input[id='myInput']").val(); as first line inside the function which handles the submit.
So your code actually almost work. Minor adjustments:
var country = 'Brazil';
$("#submit").on("click", function(event){ // this event change to click since we change the type=submit on the input
var input = $("input[id='myInput']").val(); // this line moves inside the event
if (country == input) {
window.location.href = "https://www.google.com/";
}
else { alert('B R A Z I L type Brazil to redirect');}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form autocomplete="off" onsubmit="script.js">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input id="submit" type="button" value="GO?" /> <!-- Changed from submit to button -->
</form>
try like this
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
$('#submit').on('submit', function(event){
event.preventDefault();
event.stopPropagation();
var country = 'Brazil';
var input = $("input[id='myInput']").val();
if (country == input) {
window.location.href = "https://www.google.com/";
}
});
});
</script>
</head>
<body>
<form autocomplete="off" id="submit">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input id="submit" type="submit">
</form>
</body>
</html>
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>
jQuery(function ($) {
var submitbnt = '<input type="button" id="submit" class="btn btn-primary pull-right" value="Submit" />';
var formData = '[{"type":"select","label":"Select","className":"form-control","name":"select-1498804267849","values":[{"label":"Option 1","value":"option-1"},{"label":"Option 2","value":"option-2","selected":true},{"label":"Option 3","value":"option-3"}]},{"type":"text","label":"Text Field","className":"form-control","name":"text-1498804394861","subtype":"text"},{"type":"text","label":"Text Field","className":"form-control","name":"text-1498804395129","subtype":"text"}]';
formRenderOpts = {
dataType: 'json',
formData:formData
}
$('#mform').formRender(formRenderOpts);
$('#mform').append(submitbnt);
document.getElementById('submit').onclick = function () {
var formData = new FormData(document.forms[0]);
var result = {};
for(var pair of formData.entries()) {
result[pair[0]] = pair[1];
}
console.log($('#mform').formData());
result = JSON.stringify(result); // just key/ value
var htmlForm = $('#mform').html(); // Can not get merge values in code
};
});
<h1>Form demo</h1>
<form class="col-md-12" id="mform" style="background-color:white;padding:50px">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://formbuilder.online/assets/js/form-builder.min.js"></script>
<script src="https://formbuilder.online/assets/js/form-render.min.js"></script>
I use the formbuilder of http://formbuilder.readthedocs.io. I render a form. And show that form, then I input the data, and I want to get the html code of that form, I have found many ways but only I can not get the html code of form and values. I only get the html code, but no values. Or I just get the values but no html, I think I will have to manually "mix" the values that I get into the html code. But actually it is very troublesome.
I have a registration form, I want when the user click on the submit button will get all the html code of the form tag, it includes all input, drop-down list, radio, button .. and value already was inputed.
I tried using $('#myform').html() to get all the form's code, but it did not get the values that I entered into the input, or radio ...
I want to get something like this:
<form id="myForm" class="cusForm">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
Try serialize() function of jquery
console.log($('form').serialize())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" class="cusForm">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
I don't know why you need the html, just in case you need the values of properties that are being post you can check this code, you will get array of the values which are being posted,
$(function(){
$('.submit').click(function(){
var result = [];
$('#myForm input').each(function(e,v){
var value = {};
value.property = v.name;
value.value = v.value;
result.push(value);
});
alert(JSON.stringify(result));
});
});
Working Fiddle: https://jsfiddle.net/jks7afpx/
You can use $('#myForm').serializeArray() and $('#myForm input:text'); to get data and text type input's html of your form.
$("#getTextInputs").on("click", function(){
console.clear();
var textInputs = $('#myForm input:text');
$.each(textInputs, function(){
$(this).attr("value", $(this).val());
console.log(this);
})
})
$("#getFormData").on("click", function(){
console.clear();
var data = $('#myForm').serializeArray();
console.log(data);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" class="cusForm">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="button" id="getTextInputs" value="Get Text Input Html">
<input type="button" id="getFormData" value="Get Form Data">
</form>
Suppose I have several forms with dynamically generated ID
<form id = "1">
employer: <input type = "text" />
</form>
<form id = "2">
employer: <input type = "text" />
</form>
<form id = "3">
employer: <input type = "text" />
</form>
I want to create a button associated with each form so that when I click the button the form will be hidden. So the onclick function should take the id as a parameter. How to achieve this?
I tried the following
<script type="text/javascript">
var inputElement = document.createElement('button');
inputElement.addEventListener('click', function(){
hideForm(1);
});
document.body.appendChild(inputElement);
</script>
With hideForm defined below
<script>
function hideForm(id){
$("#id").hide();
}
</script>
You don't really need the ID when you have a reference to the form elemnt
for example:
$('form').each(function(i){
var $form = $(this),
$button = $('<button>',{text:'Hide form # '+(i+1)}).click(function(){
$form.hide()
});
$('body').append( $button);
})
You can use the string concatenation in jQuery selector:
function hideForm(id){
$("#"+id).hide();
}
I think, this is what you are looking for.
HTML :
<form id="1">
employer:
<input type="text" />
<button>Hide</button>
</form>
<form id="2">
employer:
<input type="text" />
<button class="hide-button">Hide</button>
</form>
<form id="3">
employer:
<input type="text" />
<button>Hide</button>
</form>
JavaScript :
$('form').on('submit', function(e) {
e.preventDefault();
$(this).hide();
});
JSFiddle :
https://jsfiddle.net/nikdtu/pp6j8zvx/
Is it possible to get dynamic values in a form with jQuery?
For example I have this:
<form id="contact" method="post" action"contact.php" class="ajaxForm">
<label>Name:</label>
<input type="text" name="name" />
<label>Email:</label>
<input type="text" name="email"/>
<label>Message:</label>
<textarea name="message"></textarea>
<input type="submit" value="send!"/>
</form>
In js:
$(".ajaxForm").send(function(){
var page = $(this).attr("action");
});
I want to get var name=value with some loop like .each but the code is only reading inputs/textarea/select data.
Thanks for the help!
You can obtain input/textarea/select values in a form with jQuery.
$(".ajaxForm").send(function(){
var page = $(this).attr("action");
var its = $(this).find('input, textarea, select');
its.each(function(){
console.log($(this).val());
})
});
Use .children()
$(".ajaxForm").send(function(){
var page = $(this).attr("action");
$(this).children('input').each(function() { // Loop over all the children
// that are input elements
console.log( $(this).val() );
OR
console.log( this.value );
});
});