I want to email the value of the slider along with some things they entered into my form to my php email script. This is how the form looks that will pass data to the POST method of mailer.php:
<form method="POST" action="mailer.php">
Name:
<input type="text" name="name" size="19"><br>
<br>
E-Mail:
<input type="text" name="email" size="19"><br>
<input type="hidden" name="slider_value" size="19" value=document.getElementById('sliderValue').value><br>
<br>
<input type="submit" value="Submit" name="submit">
</form>
document.getElementById('sliderValue').value is the call I make to get the value of the slider but when I pass this to the value of my hidden input slider_value I get back "document.getElementById('sliderValue').value" in the email that is sent by my php script. How would I pass the value instead?
document.getElementById is a Javascript function. It probably won't do what you want it to unless you put it in a place where Javascript is accepted.
One way to pass the slider value is by putting the sliderValue element in the form that you are submitting.
If that is not an option, you can set the value of the slider_value element with Javascript. Either set an onsubmit attribute to the form like this:
<form method="POST" action="mailer.php"
onsubmit="this.slider_value.value = document.getElementById('sliderValue').value">
or add an event listener to do it:
var form = document.forms[0]; //this may need to be changed depending on your form
function addSliderValue() {
this.slider_value.value = document.getElementById('sliderValue').value;
}
if (form.addEventListener) { //most browsers
form.addEventListener("submit", addSliderValue, false);
} else if (form.attachEvent) { //IE
form.onsubmit = addSliderValue;
}
Bind a function to the sliders "onSlide/onChange/whatever it's called" event that will update the hidden input field with the slider value. Also set the input value to the initial slider value on slider init. That should do the trick.
Related
Is there a way to get submitted form's attribute value using PHP, when the submit button is clicked?
I have a form which has attribute data-id: someid, I need to get this value.
There is no direct way to get the data attribute value in PHP.
You have to first get data-attribute, set this value to hidden field and then use PHP to get it.
If You Wants Data id on submit
$(document).ready(function(){
$('#formid').on('submit', function(){
var id = $(this).data("id")
alert(id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="POST" name="myformName" id="formid" data-id="someid">
<input type="submit" name="submit">
</form>
You can achieve this in php with two ways:
1. Either pass your 'someid' in input with hidden type
<input type="hidden" name="data-id" value="someid" />
2. Just pass your 'someid' in action attribute
<form name="" action="filename.php?data-id=someid">
For a project, I need to generate a dynamic html form that will send POST info to a PHP page via the ACTION field.
The form has not to be static, it has to be dynamic so the user has to be able to generate(ADD) a not fixed(dynamic) number of input tags, then when all the inputs are generated and filled the user may click on submit button and send all the info to a php document via post.
I'm completely lost
I've been playing with this piece of code that generates the inputs but I'm not able to send the data via post to the php file
<script>
var choices=[];
choices[0]="one";
choices[1]="two";
function addInput(divName){
var newDiv=document.createElement('div');
newDiv.innerHTML="<input type='text'>";
newDiv.innerHTML=newDiv.innerHTML+"</input>";
document.getElementById(divName).appendChild(newDiv);
}
</script>
<form class="new" method="post" action="action.php">
<div id="dynamicInput">
</div>
<input type="button" value="Add" onclick="addInput('dynamicInput');" />
<input type="button" value="Save" />
</form>
To submit the form, one possible scenario is to change the type of Save button to submit:
<input type="submit" value="Save" />
Also add name property to your auto generated inputs. Otherwise you won't access the submitted $_POST data:
<input name="enter_name[]" type='text'>
As you see, I'm concatenating [] to the input field. That will convert all submitted data into an array. Otherwise, that last one auto generated input will overwrite the previous entered data.
just change your input type to submit instead of save
<input type="submit" value="Save" />
and you don't need to create new div each time to create an input you can either append it to the div you already have
document.getElementById(divName).innerHTML+= "<input type='text' name= 'added_input[]'/>";
or
var newInput=document.createElement('input');
// if you want each input in separate lines
newInput.style.display = "block";
newInput.setAttribute("name","added_input[]");
document.getElementById(divName).appendChild(newInput);
and in your php file you can get post values like this :
for ($i = 0; $i < $_POST['added_input']; $i++){
echo $_POST['added_input'][$i];
}
for more option to get post values see This Question
I am try to get the value of the input field with a custom attribute I have created using PHP. This is my code:
<form action="uploadform.php" method="post">
<input type="text" name="email" id="email" mynewattribute="myemail">
<input type="submit" name="submit">
</form>
//uploadform.php
<?php
//I know $name = $_POST['email']; will give me the value but I would like to get the value of the input field with "mynewattribute" and not name. Is it possible?
?>
The web browser doesn't know what to do with your custom attribute, so will simply ignore it. The only data sent when you submit the form is the values of "successful" elements. So your custom data will never be sent, and can never be read by the receiving script.
The best place to put such data is into hidden input fields. One possibility is to use names with square brackets in, which PHP automatically converts into arrays. e.g.
<input type="text" name="email[value]">
<input type="hidden" name="email[magic]" value="true">
Populates an array like this:
$_POST['email']['value'] = '';
$_POST['email']['magic'] = 'true';
I want to ask how i can get value of input ONLY ON SUBMIT in Javascript from HTML form when i have many forms with same name on one page.
It's looking like this:
First printed HTML form:
<div id="addCommentContainer3">
<form class="add-comment-form" id="addCommentForm3" method="post" action="">
<input type="hidden" value="3" name="comentonpost" id="comentonpost"/>
<textarea class="commentinput" name="body" id="body" cols="20" rows="5"></textarea>
<input type="submit" id="submit" value="Submit" />
</form>
</div>
Second printed:
<div id="addCommentContainer2">
<form class="add-comment-form" id="addCommentForm2" method="post" action="">
<input type="hidden" value="2" name="comentonpost" id="comentonpost"/>
<textarea class="commentinput" name="body" id="body" cols="20" rows="5"></textarea>
<input type="submit" id="submit" value="Submit" />
</form>
</div>
And like this there are many more .
I must take the value of comentonpost because i need it in my Javascript so when i post comment it wil appear before addCommentContainer of the submited form.
And there is the whole Javascript:
$(document).ready(function(){
var name_element = document.getElementById('comentonpost');
var x = name_element.value;
/* The following code is executed once the DOM is loaded */
/* This flag will prevent multiple comment submits: */
var working = false;
/* Listening for the submit event of the form: */
$('#addCommentForm'+x).submit(function(e){
e.preventDefault();
if(working) return false;
working = true;
$('#submit').val('Working..');
$('span.error').remove();
/* Sending the form fileds to submit.php: */
$.post('comment.submit.php',$(this).serialize(),function(msg){
working = false;
$('#submit').val('Submit');
/*
/ If the insert was successful, add the comment
/ below the last one on the page with a slideDown effect
/*/
$(msg.html).hide().insertBefore('#addCommentContainer'+x).slideDown();
},'json');
});
});
And in this way when i press the Submit button it's working only for the first form printed in the page.
My question is how i can fix this? How i can make it get the comentonpost value only of the submited form not the first printed, is there any better way this script may work?
Thanks in advance!
This will do what you need:
$(document).ready(function(){
/* Watch OnSubmit for all forms */
$('form').submit(function(e){
e.preventDefault();
/* Show the 'commentonpost' for the submitted form */
alert($(this).children('#comentonpost').val());
});
});
This works, but you should keep in mind that your document is not valid because you have elements that have the same IDs. IDs must be unique within a document for it to be valid.
You may only need to change this part:
$(document).ready(function(){
/* The following code is executed once the DOM is loaded */
/* This flag will prevent multiple comment submits: */
var working = false;
/* Listening for the submit event on all the forms: */
$('form[id^=addCommentForm]').on('submit', (function(e) {
var submitted_form = $(this);
//etc...
when you use jquery to select an ID, it will return 0 or one elements that match, and it will match the first one it finds. from http://api.jquery.com/id-selector/
Calling jQuery() (or $()) with an id selector as its argument will
return a jQuery object containing a collection of either zero or one
DOM element.
whenever you use $("#submit") its parsing through the DOM and finding the first instance of <input type="submit" id="submit" value="Submit" /> and returning that element. what you really want to do in your to scope your search down. you know you want the input from the form that was submitted, so you should try
$(this).find("#submit")
this will start at the form element, and search only elements contained inside the form for the first element with an ID of submit.
update
didnt realize your event was only tied to the first form, this whole things needs some work.
you've got a generic form template, and when you've got multiple forms like this, you really shouldnt be giving them all the same ID. instead, start binding event handlers to classes, and use the dom to store whether a form is 'working' or not as well
http://jsfiddle.net/neKdz/3/
I would suggest something like this
$(document).ready(function(){
$(".add-comment-form").submit(function(e){
var x = $(this).find("#comentonpost").eq(0).val();
// now you have number x of submitted form and you can do the rest
});
});
Edit:
To prevent page reloading because of form submission, add onSubmit="return false;" on form elements, e.g.:
<form class="add-comment-form" id="addCommentForm3" method="post" action="" onSubmit="return false;" >
But because of this we have to follow another approach using click event:
$(document).ready(function(){
$("#submit").click(function(e){
var x = $(this).parent(".add-comment-form").eq(0).find("#comentonpost").eq(0).val();
// now you have number x of submitted form and you can do the rest
});
});
Combination of click event and cancelling submit event should work. But just for the record (you should already know this, but I can imagine you might have a reason for doing it) using same id on multiple html elements is not a good strategy.
Right now I am updating user_list List using jquery and submitting the form data using Ajax
now I want to submit that form like normal form submit
Here is the problem I am unable to pass the JQuery updated user_list along form ?
Is There any way to do this ?
What I have tried
<script>
var user_names=[];
function check_selected(id){
user_names.push(id);
$("#username").val(user_name);
}
</script>
Where username is a form field like
<input type ="hidden" val = "" id="username" name ="username">
val is not a valid attribute for the <input /> element. Change it to value
<input type="hidden" value="" id="username" name="username" />
I am not sure if this will help or not, but you have used a variable that may have not been initialized
$("#username").val(user_name);
should be
$("#username").val(user_names); //missing s
besides, if you are after sending an array to the server, and the server is php, I would suggest adding [] square brackets at the end of the field name, this is a clean way of sending the list and the server can build the array and you would be able to access it as a list
$_POST['list_name'][index]
Try this
<script>
var user_names=[];
function check_selected(id){
user_names.push(id);
$("#username").val(user_names.join(","));
}
</script>