Serialize form with Dynamic form names - javascript

I have to choose one simple jquery function to serialize both oft these forms by getting form name dynamically
following jsfiddle is not working.
JSFIDDLE
HTML
<form id="JotForm" method="post" enctype="text/plain" class="jot">
FirstName:<input type="text" name="FirstName">
Email:<input type="text" name="Email">
<input id="btnFade" type="button" name="submit" value="Submit">
</form>
<form id="MyForm" method="post" enctype="text/plain" class="jot">
FirstName:<input type="text" name="FirstName">
Email:<input type="text" name="Email">
<input id="btnFade" type="button" name="submit" value="Submit">
</form>
Code Part
$(function () {
$("#btnFade").bind("click", function () {
//alert(FormId);
// setTimeout(function () {
var FormId = $(".jot").attr('id');
alert(FormId);
var FormSerialize = $(FormId).serialize();
console.log(FormSerialize);
});
});

You need to change
var FormSerialize = $(FormId).serialize();
to this
var FormSerialize = $("#" + FormId).serialize();
to make it match to element with id FormId.
In future when asking questions, please provide more complete example or explain more thoroughly what you are trying to achieve. I still can't understand what you are trying to achieve with this.

Related

how can I make this submit?

Trying to get my form to submit to no avail. Totally new to javascript and HTML so any help would be much appreciated!
<form class="form" id="MyForm" onsubmit="submit(get('name').value, get('email').value, get('information').value); return false;">
I assume that you have an input element with type="submit" attribute.
If you want to keep the input values while submitting. You could use "this.[name].value" as a onsubmit function parameter.
So that, an example form should be like this:
function myFunction(name, email, information) {
alert("name" + value);
alert("email" + value);
alert("information" + value);
}
<p>Example form that returns input value as an alert.</p>
<form onsubmit="myFunction(this.name.value, this.email.value, this.information.value)">
name: <input type="text" name="name"><br>
email: <input type="text" name="email"><br>
information: <input type="text" name="information"><br>
<input type="submit" value="Submit">
</form>
try this
<form onsubmit="myFunction()">
Enter name: <input id="name" name="name" type="text">
Enter email: <input id="email" name="email" type="text">
<!--And more inputs...-->
<input type="submit" value="Submit">
</form>
add this code below your form
<script type="text/javascript">
function myFunction() {
// My Example code (I think you want get input value, True??)
var Name = document.getElementById("name").value;
var Email = document.getElementById("email").value;
// Or put your code in here
}
</script>
I hope its works, good luck.

How to pass the input entered in an html form to the action of the same form

<form action="<c:url value = "/deal/#value-that-user-enters#"/>" method="POST">
Kindly enter the deal id : <input type="text" name="dealId">
<input type="submit" value="Get the deal" />
</form>
In the above code, I want the action attribute of form to be /deal/(deal-id-entered-by-user). Is there any way to do it without using any javascript? And is it at all possible even with javascript?
You should be able to do it simply with javascript like this:
document.querySelector('form').onsubmit = function() {
this.setAttribute('action', "/baseurl/" + document.querySelector('input[name=dealId]').value)
}
<form action="/baseurl/" method="POST">
Kindly enter the deal id :
<input type="text" name="dealId">
<input type="submit" value="Get the deal" />
</form>
The best way is to change the form action by javascript:
document.forms[0].action=documnet.getElementById('dealId').value;
You can use it like this:
<form action="<c:url value = "/deal/#value-that-user-enters#"/>" method="POST">
Kindly enter the deal id : <input type="text" class="myBox" name="dealId">
<input type="submit" value="Get the deal" />
</form>
$('.myBox').on('change', function (event) {
var myVal = $(this).val();
$('form').attr('action', function(i, value) {
return value + myVal;
});
});

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

Why is not my HTML form sending the data to my JS file?

I am working on a simple ASP.NET project. I have HTML and a JS file. I am trying to send the values of the form inputs to the JS file, but it seems to be broken for some reason.
My form looks like:
<div class="set-the-clock">
<form name="settheclock">
<span>Hours: </span><input type="text" id="fhours" value=""><br>
<span>Minutes: </span><input type="text" id="fminutes" value=""><br>
<span>Seconds: </span><input type="text" id="fseconds" value=""><br>
<input type="button" id="send" value="Enter">
</form>
and my JS is:
var setHour = document.getElementById("fhours").value;
var setMinute = document.getElementById("fminutes").value;
var setSecond = document.getElementById("fseconds").value;
and the function that meant to use it:
function setTheClockByButton() {
setTheClock(setHour, setMinute, setSecond);
alert(setHour);
}
If I put a number to the value in the HTML form it works fine(like this)
<span>Hours: </span><input type="text" id="fhours" value="3"><br>
but it not accepting any data from the keyboard.
And of course I have the onclick function associated to the form:
document.getElementById("send").onclick = setTheClockByButton;
(otherwise it'd make no sense).
Move those assignment statements inside the function:
function setTheClockByButton() {
var setHour = document.getElementById("fhours").value;
var setMinute = document.getElementById("fminutes").value;
var setSecond = document.getElementById("fseconds").value;
setTheClock(setHour, setMinute, setSecond);
alert(setHour);
}
Now each time the button is clicked (and note that I'm assuming that part works, since you say it does), the values of the input fields will be fetched so that the clock update function is working with up-to-date values.
You need an onclick event:
<div class="set-the-clock">
<form name="settheclock">
<span>Hours: </span><input type="text" id="fhours" value=""><br>
<span>Minutes: </span><input type="text" id="fminutes" value=""><br>
<span>Seconds: </span><input type="text" id="fseconds" value=""><br>
<input type="button" id="send" value="Enter" onclick="setTheClockByButton()">
</form>
</div>
<script>
function setTheClockByButton() {
var setHour = document.getElementById("fhours").value;
var setMinute = document.getElementById("fminutes").value;
var setSecond = document.getElementById("fseconds").value;
alert(setHour);
}
</script>

formData.display() in input field

Aweber from data display javascript code something look like:
<script type="text/javascript">formData.display("name")</script>
<script type="text/javascript">formData.display("email")</script>
<script type="text/javascript">formData.display("phone")</script>
Now How can I use this in input filed value like:
<form method="post" action="">
<input name="name" type="text" value="<script type="text/javascript">formData.display("name")</script>">
<input name="email" type="text" value="<script type="text/javascript">formData.display("email")</script>">
<input name="phone" type="text" value="<script type="text/javascript">formData.display("phone")</script>">
<input type="submit" value="Go">
</form>
Reference: https://help.aweber.com/entries/21696333-How-Do-I-Display-Subscribers-Names-or-Email-Addresses-On-My-Thank-You-Page-
Please help me.
You can not simple place some code inside a value attribute hoping it will work, you need to appropriate JavaScript code to add the formData to the value attribute of the input field. You can do it with something like:
window.onload = function() {
document.getElementsByName('name')[0].value = formData.display("name");
document.getElementsByName('email')[0].value = formData.display("email");
document.getElementsByName('phone')[0].value = formData.display("phone");
}

Categories