We Keep Coding

How to get a specific form elements using jQuery

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()">

change input value before submit form using jQuery

I want to set hidden input value(username) based on client other input(email) in a form, then submit to server. (to make sure username equal to email)
However, the assignment to the hidden input is processed AFTER the form submitted. So 'username' is already None on server side.
<form id="altForm" action="" method="post">
<input type="hidden" name="username" id="id_username" maxlength="40" >
<input type="email" name="email" id="id_email" maxlength="40">
<input class="btn btn-primary pull-right" type="submit" value="Register" />
</form>
<script>
$("#altForm").submit(function(e){
e.preventDefault();
var username = $("#id_email").val();
$("#id_username").val(username);
});
</script>

I would do this serverside, but if you want it clientside you can also accomplish it like this:
$('#id_email').keyup(function() {
$('#id_username').val($(this).val());
});

How can I pass in this data into a form submit call (similar to data parameter for an ajax post)?

I have the following code that submits data to an asp.net-mvc controller action via jquery ajax
var queryString = "name=Joe&age=22&weight=200";
$.ajax({
url: '/MyController/Generate',
type: 'post',
data: queryString,
dataType: 'json'
});
this works fine and binds to the controller action parameter
public ActionResult Generate(MyParams p)
{
Console.Write(p.name);
Console.Write(p.age);
Console.Write(p.weight);
}
The issue now is that I need to change this from ajax to being a regular form post (I need to use regular form post as I am now returning a file from the controller action). I am trying to figure out how I can get that same querystring variable to get submitted as part of a regular form post (non ajax).
Is this possible?

try with html.beginform
#using (Html.BeginForm("Generate", "MyController","name=Joe&age=22&weight=200", FormMethod.Post, new { id = "frmMyForm" }))
{
// Your form elements
}

If you want that data to be fixed you can make a form like this:
<form action="/MyController/Generate" method="post">
<input type="hidden" name="name" value="Joe" />
<input type="hidden" name="age" value="22" />
<input type="hidden" name="weight" value="200" />
<input type="submit" />
</form>
Otherwise, if you want the data to be editable, it goes like this:
<form action="/MyController/Generate" method="post">
<input type="text" name="name" />
<input type="number" name="age" />
<input type="number" name="weight" />
<input type="submit" />
</form>

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.

Confused about the action tag

I've got an html page with a form set up as follows:
<form name="form" action="process.php" method="POST">
Username: <input type="text" name="user">
<br>
Password: <input type="text" name="pass">
<br>
<input type="submit" value="LOGIN">
</form>
When I click my submit button, the data is sent to my process.php script, and that's all well and good.
But what I'd like to do is send a JSON string to a PHP script instead, and have that PHP script parse it.
As such I tried the following:
<body>
PLEASE ENTER YOUR INFORMATION:
<form name="form" action="">
Username: <input type="text" name="user">
<br>
Password: <input type="text" name="pass">
<br>
<input type="submit" value="LOGIN" onclick="encrypt(this.form, 0)">
</form>
</body>
<script LANGUAGE="JavaScript">
function encrypt(form, key){
var user = form.user.value;
var pass = form.pass.value;
var str = {"username": user, "encrypted_password": pass};
var JSON_str = JSON.stringify(str);
var xhr = new XMLHttpRequest();
xhr.open("POST", "process.php", true);
xhr.send(JSON_str);
}
</script>
Yet this doens't do anything. When I click the submit button nothing happens. Even if I could just get process.php to display something when I click the submit button, that would be enormously helpful.
Thanks!

If you want to use onclick event then you need to replace submit with button.
<input type="button" value="LOGIN" onclick="encrypt(this.form, 0)">
and submit form with javascript.