Javascript send variable post - javascript

i've got this script that send the variable recordID with GET (and works OK)
<input type="hidden" id="suggest1_hidden" name="suggest1_hidden" value="">
<input name="suggest1" type="text" class="suggest_table {th : ['nome', 'email', 'tel', 'cell']}" id="suggest1" style="width:650px;" alt="Adm_ut_search.php" />
<span id="comando"><span class="button">Dettagli utente</span></span>
<script language="javascript">
$(document).ready(function()
{
$('#comando').click(function () {
var url="Adm_ut_view_details.php?recordID=" + $('#suggest1_hidden').val()
document.location.href = url
});
});
</script>
I need to send the variable with POST and i wrote this... but doest work
<form id="myForm" action="Adm_ut_view_details.php" method="post"/>
<input type="hidden" id="suggest1_hidden" name="suggest1_hidden" value="">
<input name="suggest1" type="text" class="suggest_table {th : ['nome', 'email', 'tel', 'cell']}" id="suggest1" style="width:650px;" alt="Adm_ut_search.php" />
<input name="recordID" type="hidden" id="userID" value="" />
<button type="submit" id="comando">Submit</button>
</form>
<script language="javascript">
$(function(){
$('#myForm').on('submit', function(e){
document.getElementById('userID').value=+ $('#suggest1_hidden').val()
$('#myForm').submit();
});
});
</script>
what i do wrong ?

There is nothing inherently different that you need to do with your form fields because you are sending a POST request vs. a GET request. Changing the form's action to POST is all you need to do as long as no JavaScript pre-submit processing is desired.
And, the hidden form field is going to be sent along with the other form fields anyway, so why bother concatenating it to the userID?
But, to your question and your code, you have a typo:
document.getElementById('userID').value =+ $('#suggest1_hidden').val()
Should be:
document.getElementById('userID').value += $('#suggest1_hidden').val()
Now, you have code that sets up your submit event handler, but you have no code that sets the value of the hidden form field. That needs to be done prior to the submit taking place.
Also, you need to prevent the form from submitting first, so that you can modify the form field value.
$(function(){
$('#myForm').on('submit', function(e){
e.preventDefault(); // Stop the submit
// YOU NEED TO MAKE SURE THAT THE HIDDEN FORM FIELD'S
// VALUE HAS BEEN SET BY THIS POINT.
document.getElementById('userID').value += $('#suggest1_hidden').val()
$('#myForm').submit(); // Then manually submit
});

Related

Can't get input validation Javascript to work

Apologies if this question isn't layed out correctly (my first time using stack overflow).
I'm trying to validate if my inputs on a form are filled in when a user presses submit, it alerts the user when the inputs are empty but also when they are not, I'm not sure whats going wrong. Here is my Javascript:
<script>
function validation() {
var x = document.forms["bookingForm"]["id"].value;
if (x == "") {
alert("Ensure all fileds are filled");
return false;
} else {
sendSMS();
alert("Success");
return true;
}
}
</script>
Here is a link to an expanded part of the code for reference:https://pastebin.com/Dj5fA3gB
The general syntax for accessing a form element and element's value are:
document.forms[number].elements[number]
document.forms[number].elements[number].value
If you are using submitButton as in and you are calling validation on onSubmit of the form then you need to call event.preventDefault();
<!DOCTYPE html>
<html>
<body>
<form onsubmit="validation()" name="bookingForm">
First Name: <input type="text" name="id" value="Donald"><br>
Last Name: <input type="text" name="lname" value="Duck">
<input type="submit" value="Submit" />
</form>
<script>
function validation() {
event.preventDefault();
var x = document.forms["bookingForm"]["id"].value;
if (x == "") {
alert("Ensure all fileds are filled");
return false;
} else {
sendSMS();
alert("Success");
return true;
}
}
</script>
</body>
</html>
As suggested in my comment the most clean solution is to use the html attribute required by adding it to your inputs.
Looks something like this.
<form>
<input type="text" name="example" required>
<input type="submit" name="send">
</form>
The biggest advantage is that it works without any additional JS which is in my opinion always the prefered solution.
You didn't include return keyword in the form tag and adding unnecessary keyword "name" in the form tag.
<form onsubmit="return validation()" method="POST"
action="">
remove the "name" attribute from form tag and add action attribute.
Within the parenthesis in the action attribute, mention what happen if your validation success
Ex:(this code help you understand "action" attribute)
<form onsubmit="return productsvalidationform();" method="POST"
action="AddProductServlet">
when the form was successfully validated, I directed to AddProductServlet.(AddProductServlet is JSP servlet).
so that mention where do you need to redirect.

Making a HTML form submit to different places

Hoping someone can help with this. I have a form which has an action attribute. This action attribute enables the user to subscribe to a newsletter when the form is submitted.
What I'm trying to do is only use that action if the user has checked a checkbox giving permission to subscribe to the newsletter. If the checkbox is left unchecked, the form can still be submitted, but will be redirected to a separate URL, disregarding the form's action attribute.
So far this is what I have, I'm not great with javascript so any help would be appreciated.
$('document').ready(function () {
$('#wifi-capture-form').submit(function() {
var newsletterTrue= $(this).attr("data-newsletter-checked");
var newsletterFalse= $(this).attr("data-newsletter-unchecked");
if ($('input.newsletter-checkbox').is(':checked')) {
$('#wifi-capture-form').attr('action', newsletterTrue);
else (
$('#wifi-capture-form').attr('action', newsletterFalse);
)
}
});
});
and the form is
<form name="wifi-capture-form" id="wifi-capture-form" action="" method="post" class="f24form wifi-capture-form" data-newsletter-checked="https://email.com/t/r/s/dkhywr/" data-newsletter-unchecked="https:www.domain.com/wifi-confirm">
<label for="fieldName">Name</label><br />
<input id="fieldName" name="cm-name" class="form-control" type="text" />
<label for="fieldEmail">Email</label><br/>
<input id="fieldEmail" class="form-control" name="cm-dkhywr-dkhywr" type="email" required /><br/><br/>
<input type="checkbox" name="newsletter" class="newsletter-checkbox" id="newsletter" value="Subscribe to newsletter"> Subscribe to our newsletter<br/><br/>
<button type="submit" class="btn btn-primary">Submit</button>
You can do it by changing the action attribute value of the form on submit. Here is the syntax:
$("#wifi-capture-form").attr("action", wifiConfirm);
So your new code must be like this:
$('#wifi-capture-form').submit(function(e) {
var wifiConfirm = $(this).attr("data-redirect");
/* if newslwetter checkbox is not checked, then change form action value*/
if (!$('input.newsletter-checkbox').is(':checked')) {
$("#wifi-capture-form").attr("action", wifiConfirm);
}
f24("send", "form", "form.#wifi-capture-form");
});
You can see other examples on How to change form action based on selection
Since you're using jQuery you can assign a click event to the checkbox that would dynamically change the action URL in case the checkbox is checked/unchecked.

Can't serialize and grab data from form using JavaScript and jQuery

I'm trying to create a simple form where I can add an item, hit submit and grab the data using serialize or .val() but I can't even console log anything once I press submit, what am I doing wrong? I would just like to be able to grab the data.
HTML CODE:
<form >
<input type="text">
<input type="submit">
</form>
JAVASCRIPT CODE:
$(function(){
$("submit").submit(function(){
var data = $("form").serialize();
console.log(data);
});
});
Change your selector $("submit") to $("form") and give name attribute to input tag . Also add event.preventDefault() to prevent default form action
$(function() {
$("form").submit(function(e) {
e.preventDefault();
var data = $("form").serialize();
console.log(data);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form>
<input name="text" type="text">
<input type="submit">
</form>

my jquery form validation is not working as i hope it should

I have some javascipt code here that validates a user form. When the user inputs the correct answer it tells them and gives them the link to the next question. At least, that's what it is supposed to do. When i click the form it reloads the page but it should not because i added return false.
the div tra holds 35
and the div usermsg is the user inputted value.
<script>
$("#submit").click(function(){
var clientmsg6 = $("#usermsg").val();
var rightanswer = $("#tra").val();
if (clientmsg6<>rightanswer)
{
$("#confirm").html("<h2>Sorry, wrong answer.</h2>");
}
else
{
$("#confirm").html("<a href='#' onclick='play();' style='font-size:20px;' id='new1'>Click here for Question 2</a>");
}
return false;
});
</script>
Any ideas why this is not working?
It should be
if (clientmsg6 != rightanswer)
not
if (clientmsg6<>rightanswer)
To prevent a form submission, you need to return false on the form itself instead of on the submit button. Your code should become:
HTML
<form action="page.php" method="post">
<input id="usermsg" type="text" name="answer" />
<input id="submit" type="submit" value="Submit" />
</form>
JS (please note the line where you have clientmsg6, you have a syntax error)
$("#myform").on('submit', function(){
var clientmsg6 = $("#usermsg").val();
var rightanswer = $("#tra").val();
if (clientmsg6 != rightanswer) { //This line was also wrong, should be != instead of <>
$("#confirm").html("<h2>Sorry, wrong answer.</h2>");
}
else {
$("#confirm").html("<a href='#' onclick='play();' style='font-size:20px;' id='new1'>Click here for Question 2</a>");
}
return false;
});
Alternatively, you can keep your existing code by changing your submit button to be just a plain old button, but you will lose the extra functionality of the user being able to hit the enter key and performing the same action.
<form action="page.php" method="post">
<input id="usermsg" type="text" name="answer" />
<input id="submit" type="button" value="Submit" />
</form>
Instead of using .html(), try using .text()
if #submit is a link tag otherwise use the form ID and the submit event
$("#submit").click(function(e){
e.preventDefault()
...
...
...
});
You need to attach handlers once the document has finished loading.
Wrap your script in the following
<script>
$(function() {
// script
});
</script>

using javascript to modify form action submits form without doing submit

I have an HTML form that I submit after changing the action with some javascript. Two different buttons can do the submit.
The interesting thing is that I was trying to debug it and inserted an alert after changing the action and before submitting the form. The form is submitted without the alert ever being displayed. To make sure it's actually performing the javascript, I added an alert before changing the action. That alert displays; the alert after changing the action does not.
<form name='FormSelect' method='post' action='Undefined'>
...
<button onclick="SubmitForm('class')">Submit</button>
...
<button onclick="SubmitForm('student')">Submit</button>
...
</form>
<script type="text/javascript">
function SubmitForm(target){
alert("Action 1: " + document.FormSelect.action);
if (target=="class") {
document.FormSelect.action = "ClassAction.php";
} else {
document.FormSelect.action = "StudentAction.php";
}
alert("Action 2: " + document.FormSelect.action);
// document.FormSelect.submit();
}
</script>
Is that the expected sequence of events?
Any button placed inside form element will cause submit action. To prevent this you can add type="button" to button elements, or make you submit callback return false;
<button type="button" onclick="SubmitForm('class')">Submit</button
see http://jsfiddle.net/yD2Uu/
As the others have already pointed out the form will be submitted anyway if you don't cancle the event. I want to suggest a JavaScript free solution to your problem.
<button formaction="ClassAction.php">Submit</button>
<button formaction="StudentAction.php">Submit</button>
It's not supported in IE < 10 though. But you can still use your function as a fallback then, just a bit more elegant ;)
function SubmitForm(button){
button.form.action = button.formaction;
}
A better solution is to give the buttons a name each and submit to Action.php and let the server get the value of the named button
$student = filter_var($_POST["student"], FILTER_SANITIZE_STRING); // php5 cleaning
when you have
<form method="post" action="Actions.php">
<input type="submit" name="student" value="John Doe" />
<input type="submit" name="student" value="Jane Doe" />
<input type="submit" name="student" value="Whatever Doe" />
</form>
Otherwise if you must
Try this
<form method='post' action='Undefined'>
...
<input type="button" value="Class" onclick="SubmitForm(this)" />
...
<input type="button" value="Student" onclick="SubmitForm(this)"/>
...
</form>
<script type="text/javascript">
var actions = {
"class":"ClassAction.php",
"student":"StudentAction.php"
}
function SubmitForm(button){
button.form.action = actions[button.value];
button.form.submit();
}
</script>
Thanks to Yauhen Vasileusky's example, I started removing code between my 1st & 2nd alerts and found that the problem seems to be the following IF statement:
if (document.FormSelect.FormName.value.substr(0,19)=="ObservationRequest_" || document.FormSelect.FormName.value=="StudentReg2013rx" || document.FormSelect.FormName.value=="Toddler Update Form v3rx")
{
document.FormSelect.action = "GenerateXDP.php";
}
When I remove it, both alerts are displayed. So the answer to my question is that changing the action does not submit the form; it was some other error in my code that made it appear as if that was the case.

Categories

Resources