How to get a specific form elements using jQuery - javascript

I have a multiple forms in a page and i would like to get the elements of a specific form. For example:
<form class="form" id="1">
<input type="text" name="message" value="message">
<button type="submit" value="submit">Submit</button>
</form>
<form class="form" id="2">
<input type="text" name="message" value="message">
<button type="submit" value="submit">Submit</button>
</form>
How to get the value of message of form id=2...... Thanks in advance

Just use attribute selectors
$('form[id=2]') // get the form with id = 2
.find('input[name=message]') // locate the input element with attribute name = message
.attr("value"); // get the attribute = value

You really shouldn't use raw numbers for ids, let's rename those to form_1 and form_2, then your jquery selector would be:
$("#form_2 [name='message']").val();

Simply query the input from the id of the form you'd like
console.log($('#2 input').val());
//more specific
console.log($('#2 input[name="message"]').val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form" id="1">
<input type="text" name="message" value="message">
<button type="submit" value="submit">Submit</button>
</form>
<form class="form" id="2">
<input type="text" name="message" value="message">
<button type="submit" value="submit">Submit</button>
</form>

You can use jQuery, or you can use basic JavaScript to return the message value. With basic JS, you would have to give your form a name, but then could return the message value.
Code:
function getValue() {
var message = document.forms["form_name"]["message"].value;
}
You would then have to return the function when the form is submitted
<form class="form" name="form_name" onsubmit="return getValue()">

Related

Disable or enable only the current button

With a PHP for each cycle, I'm bringing articles from the database. In those articles, we have a comment section with a form. I want to check with jQuery if there is something written on the input before the comment is sent.
As the articles are being brought with a PHP cycle, I want to check only the article in which it is being written a comment, but jQuery checks all the articles and only enables or disables the first or top result being brought from the database. I want jQuery to check only on the article with a written comment.
Here's what I'm doing:
$(document).ready(function() {
$(".comment-submit").attr("disabled", true);
$("#group-post-comment-input").keyup(function() {
if ($(this).val().length != 0) {
$(".comment-submit").attr("disabled", false);
} else {
$(".comment-submit").attr("disabled", true);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="comment.php" method="POST">
<input autocomplete="off" type="text" placeholder="Add a comment" id="group-post-comment-input">
<button class="comment-submit">
Comment
</button>
</form>
<br>
<form action="comment.php" method="POST">
<input autocomplete="off" type="text" placeholder="Add a comment" id="group-post-comment-input">
<button class="comment-submit">
Comment
</button>
</form>
<br>
<form action="comment.php" method="POST">
<input autocomplete="off" type="text" placeholder="Add a comment" id="group-post-comment-input">
<button class="comment-submit">
Comment
</button>
</form>
As you can see on the snippet above, the buttons only get enabled when text is written on the first input only. I want the buttons to get enabled when text is written on their dependent input. If input 2 has text on it, enable button 2, and so on and so on.
How can I do that?
Since IDs must be unique to the DOM tree, you might consider using a class instead.
$(function() {
$(".group-post-comment-input").on('keyup', function() {
let $button = $(this).next('.comment-submit');
let disabled = !this.value;
$button.prop('disabled', disabled);
});
});
form {
margin: 0 0 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="comment.php" method="POST">
<input autocomplete="off" type="text" placeholder="Add a comment" class="group-post-comment-input">
<button class="comment-submit" disabled>Comment</button>
</form>
<form action="comment.php" method="POST">
<input autocomplete="off" type="text" placeholder="Add a comment" class="group-post-comment-input">
<button class="comment-submit" disabled>Comment</button>
</form>
<form action="comment.php" method="POST">
<input autocomplete="off" type="text" placeholder="Add a comment" class="group-post-comment-input">
<button class="comment-submit" disabled>Comment</button>
</form>
In my demonstration, I use jQuery's next() to traverse from the input on which the "keyup" event is fired to its associated button.
.next( [selector ] )
Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
Another method is to traverse up to the form element with closest() and back down to the button with find(). This might be useful if you expect your HTML structure to change in a way that could break the next() traversal.
let $button = $(this).closest('form').find('.comment-submit');
I also recommend using prop() instead of attr() to enable and disable inputs.
ID must be unique,
but you need to use a name for sending information to your PHP server
document.querySelectorAll('button.comment-submit').forEach( bt => bt.disabled = true )
document.querySelectorAll('input[name="group-post-comment-input"]').forEach( inEl =>
inEl.oninput = e =>inEl.nextElementSibling.disabled = (inEl.value.trim().length === 0) )
<form action="comment.php" method="POST">
<input autocomplete="off" type="text" placeholder="Add a comment" name="group-post-comment-input">
<button class="comment-submit"> Comment </button>
</form>
<br>
<form action="comment.php" method="POST">
<input autocomplete="off" type="text" placeholder="Add a comment" name="group-post-comment-input">
<button class="comment-submit"> Comment </button>
</form>
<br>
<form action="comment.php" method="POST">
<input autocomplete="off" type="text" placeholder="Add a comment" name="group-post-comment-input">
<button class="comment-submit"> Comment </button>
</form>

How can i pass arrays between HTML pages by using ONLY HTML and JS?

I have this simple code in the test0.html file, it sends data to test1.html :
<body>
<form action="test1.html">
<input type="text" name="array[0]" placeholder="val1" id="">
<input type="text" name="array[1]" placeholder="val2" id="">
<input type="submit" value="send">
</form>
</body>
Then i have this code on the test1.html, that is supposed to send some new data back to test0:
<body>
<form action="test0.html">
<input type="text" name="array[2]" placeholder="val3" id="">
<input type="text" name="array[3]" placeholder="val4" id="">
<input type="submit" value="send back">
</form>
When i send data back to test0, i just get the newest data typed in test1.html. I'd like to know how to keep track of the ones sent previously from test0.
Thanks!
As the default form method is GET, the form parameters will be passed using the query parameters
So you can add a hidden input field to your form for each query parameters.
<body>
<form action="test0.html">
<input type="text" name="array[2]" placeholder="val3">
<input type="text" name="array[3]" placeholder="val4">
<input type="submit" value="send back">
</form>
<script>
(function() {
var form = document.querySelector("form");
var queryParams = new URLSearchParams(location.search);
for (var key of params.keys()) {
var input = document.createElement("input");
input.type = "hidden";
input.name = key;
input.value = queryParams.get(key);
form.insertBefore(input, form.firstChild);
}
})();
</script>
</body>
You take the sent data and store it temporarily, so you can then pass it on to the following pages. Input fields of type hidden are suitable here.
<form action="test0.html">
<input type="hidden" name="array[0]" value="SUBMITTED_DATA">
<input type="hidden" name="array[1]" value="SUBMITTED_DATA">
<input type="text" name="array[2]" placeholder="val3" id="">
<input type="text" name="array[3]" placeholder="val4" id="">
<input type="submit" value="send back">
</form>
With this approach, you can not determine whether the data were subsequently edited! Here a signature can provide remedy.

Form handling and validation in Google spreadsheet sidebar

I have a sidebar in a Google spreadsheet with a HTML form in it.
Now, how do I handle the values submitted?
In index.html:
<form id="configs" action="#">
<fieldset>
////input fields here
<input type="submit" id="enviar" value="Send" onclick="google.script.run.validarForm()" />
</fieldset>
</form>
In code.gs the functin validarForm() is called but how do I pass the submitted values to it so I can validate it first and store them in variables?
Thanks in advance for your help!
You can pass parameters using google.script.run. I'd do something like this:
<form id="configs" action="#">
<fieldset>
<input type="text" id="exampleField1" />
<input type="text" id="exampleField2" />
<input type="submit" id="enviar" value="Send" onclick="enviarForm()" />
</fieldset>
</form>
<script>
function enviarForm(){
var exampleField1Value = document.getElementById("exampleField1").value;
var exampleField2Value = document.getElementById("exampleField2").value;
google.script.run.validarForm(exampleField1Value, exampleField2Value);
}
</script>
Of course, this can be done with event handlers instead of "onclick=", and jQuery too.

Issue with javascript retrieve form data for url

I am kind of new to javascript however I have created a submit form that I want to redirect me to a url based on form input. Here is my current code...
The issue I'm running into however is that the form is sending me the initial value rather than the updated form value (It is using "whatevs" no matter what).
HTML
<form id="Search-Form" onClick="genURL()"><label>Value: </label>
<input type="text" id="search" placeholder="Enter Value"></input>
<div id="search-buttons">
<input id="searchSubmit" value="whatevs" type="submit" tabindex="1" />
</div>
</form>
Javascript
function genURL() {
var searchSubmit = document.getElementById("searchSubmit").value;
window.location = "randomsite/view" + searchSubmit;
}
Add return and use onsubmit:
<form id="Search-Form" onsubmit="return genURL()"><label>Value: </label>
<input type="text" id="search" placeholder="Enter Value"></input>
<div id="search-buttons">
<input id="searchSubmit" value="whatevs" type="submit" tabindex="1" />
</div>
</form>
Revise function like so:
function genURL()
{
location.href = "randomsite/view" + document.getElementById("search").value;
return false;
}
If you were to use onclick, it would go on the button, not the form.

Jquery multiple forms in same page

I have the following dynamically generated HTML
<div id="1">
<form name = "inpForm">
<input name="FirstName" type="text"/>
<input type="submit" value="Submit"/>
</form>
</div>
<div id="2">
<form name = "inpForm">
<input name="FirstName" type="text"/>
<input type="submit" value="Submit"/>
</form>
</div>
The outer divs have different IDs but the form names are the same. I am using Jquery to perform some validation when the form is submitted. However, when the second form is submitted, I always get the values of the first form.
$(document).ready(function () {
$('form[name="inpForm"]').live('submit', function () {
alert($('input[name="FirstName"]').val());
return false;
});
});
How can I modify myJquery to find the "FirstName" element that matches the current form where the submit was triggered?
Thanks
Add some context:
alert($(this).find('input[name="FirstName"]').val());
Use this (the form-element) as context-argument:
alert($('input[name="FirstName"]',this).val());

Categories