hy, i have a problem with a form. i know the question is simple but i can not have a solution. Well, this is my form:
<form id="search" method="post" action="cerca_redirect2.php" >
<select id="tipo" name="tipo"class="chzn-select" style="width:165px;" tabindex="1" >
<option value="http://case.vortigo.it/vendita-immobili/index.php"> Vendita</option>
<option value="http://case.vortigo.it/affitto-immobili/index.php">Affitto</option>
</select>
<input id="field" name="field" type="text" value=""/>
<input id="submit" type="submit" value="" />
</form>
my goal is when i select "Vendita" and i submit the form i have to go to the url in the select "Vendita", for each select. someone can help me? thanks
In the server side php code, do something like this
if (isset($_POST['tipo']) && !empty($_POST['tipo']))
{
header('Location: ' . $_POST['tipo']);
}
Note: This is a very basic version, you will want to ensure the url is valid by either maintaining a list of urls on the server, or something similar.
There are many different ways, but you can for example use following:
See the onsubmit part in the form definition
<form id="search" method="post" action="cerca_redirect2.php" onsubmit="this.action=document.getElementById('tipo')[document.getElementById('tipo').selectedIndex].value" >
If I understan your question correctly, you need a way to change the action value to the selected option's value
this is how to do that
$(document).ready(function(){
$("#tipo").on("change", function(){
$("#search").attr("action", $(this).val());
});
});
DEMO: http://jsfiddle.net/6ybMP/
You want to change the action of the form based on the select? The following should be along the lines of what you want.
$('#tipo').on('change', function() {
var newAction = this.val();
$('#search').prop('action', newAction);
}
UPDATE
You will want to wrap this code in $(document).ready() so that the event will be registered after the DOM has been loaded.
Like so:
$(document).ready(function() {
$('#tipo').on('change', function() {
var newAction = this.val();
$('#search').prop('action', newAction);
}
});
Related
As the title says This is the code that I tried with. The forms must appear one by one because information from previous forms determine how the next ones will look.
$(document).ready(function(){
$('#first_form').submit(function(){
$('#first_form').fadeOut('fast');
$('#second_form').fadeIn('fast');
});
});
<form action="new_patch.php" method="POST" id="first_form">
Title: <input type="text" name="patch" placeholder="Patch 4.20">
<br/>
Number of Champions: <input type="number" name="champ_number" min="1" max="99">
<br/>
<input type="submit" value="submit">
</form>
<form action="new_patch.php" method="POST" id="second_form" style="display: none;" >
<input type="text" value="text">
<input type="submit" value="submit">
<?php
$champ_number = null;
if(isset($_POST['champ_number']))
{
$champ_number = $_POST['champ_number'];
for($champ_number;$champ_number>0;$champ_number--)
{
echo "<br/>Champion ".$champ_number."<input type=\"number\" name=".$champ_number." min=\"1\" max=\"99\">";
}
}
?>
</form>
You're mixing client-side and server-side form code. Submitting the form will reload the page entirely, so from the looks of your code it will fade in the new form when the old form is submitted, but then reload the page so the old form will show again anyway.
You could either:
Let the PHP determine how the next form appears based on the submission of the first form, e.g. if (isset($_POST["First_form_submit"]) { Show second form... }
Probably better and more user-friendly: make the second form appear below once the user has filled in the relevant inputs on the first form before they've submitted
you can use:
$('#first_form').submit(function(){
$('#first_form').fadeOut(function() {
$('#second_form').fadeIn('fast');
});
return false;
});
From the jQuery documentation the syntax is fadeIn( [duration ] [, complete ] ) it accepts a duration and a onComplete callback that you can use to execute the next action when the first is completed.
I did this once too, just add a submit class to the button and make it like this:
<input type="submit" value="submit" class="submit">
Change script to a click function.
$(document).ready(function(event){
event.preventDefault();
$('.submit').click(function(){
$('#first_form').fadeOut(400);
$('#second_form').fadeIn(400);
});
});
PS, also you need to prevent submit default...otherwise it will just submit the form, see this JSfiddle
I would like to do this:
I have a bunch of buttons in a form. They all have unique names. Whenever someone CLICKS on any of these, in this specific form, I would like to submit an event (SUBMIT_IMAGES) and just get the $_POST variable or data of the clicked button and not of the entire form.
Something like this:
<form enctype="multipart/form-data" method="post" id="IMAGE_FORM">
<input value="" type="button" name="CLICKHERE1" class="IC10" onclick="SUBMIT_IMAGES();">
<input value="" type="button" name="CLICKHERE2" class="IC10" onclick="SUBMIT_IMAGES();">
</form>
$('#IMAGE_FORM:input').on('click', SUBMIT_IMAGES);
function SUBMIT_IMAGES(event)
{
var DATA = new FormData(event);
}
first, how can I specify .on event in a specific form, on an input in that form... is this correct?
$('#IMAGE_FORM:input').on('click', SUBMIT_IMAGES);
Secondly, how can I do something like:
function SUBMIT_IMAGES(event)
{
var DATA = new event.target.FormData();
}
but insead do a events.target.INPUTDATA(); kinda thing
Why don't you try AJAX ?
If your form looks like :
<form enctype="multipart/form-data" method="post" id="IMAGE_FORM">
[many inputs]
<input value="" type="button" name="CLICKHERE1" class="IC10" onclick="SUBMIT_IMAGES();">
[many inputs]
<input value="" type="button" name="CLICKHERE2" class="IC10" onclick="SUBMIT_IMAGES();">
</form>
Then you can try something like this :
$('input[name=CLICKHERE1]').click(function(){
var fields = '{ ';
$('#IMAGE_FORM').each(function(){
if($(this).name() == 'CLICKHERE1')
{
fields += ' }'// close json
}
else
{
fields += // feed fields var
}
});
$.ajax({
// Do some stuff
});
});
Then you can send datas using AJAX.
Of course, if you have to post images or other files it'll be quite difficult.
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.
I have a set of code, in which i have a drop down list, and have 6-8 text fields below it. Now whenever i change the option, i want all the fields to be refreshed, i mean the fields must be made empty....
What i have tried:-
$(document).ready(function(){
$('#typed').change(function() {
$('#fieldid1').val("");
$('#fieldid2').val("");
....
})
});
But my question is can it be done using only a single line of code such that all the textboxes present will be cleared ????
Try this:
$('#typed').change(function () {
$('input:text').val("");
});
Also, you can put a class to all the input fields you want to clear and do as follows:
$('#typed').change(function () {
$('input.someclass').val("");
});
Give all your fields a common class name like class='test3' and then:
<input type="text" class="test3" >
<input type="text" class="test3" >
<input type="text" class="test3" >
<input type="text" class="test3" >
<input type="text" class="test3" >
<select id="btn3">
<option value="volvo">111</option>
<option value="saab">222</option>
<option value="mercedes">333</option>
<option value="audi">444</option>
</select>
$("#btn3").change(function(){
$(".test3").val("");
});
DEMO
1.Create a input type='reset' and hide it the form using jquery .hide()
2.Trigger('click') click of that input type.
$('input').val("");
or
$('textarea').val("");
Give all your fields a common class name like class='resetme' then
$('#typed').change(function () {
$('.resetme').val("");
});
I have several questions regarding forms and PHP but if I should put them into different posts then I will.
Here is my form code:
<form id="t-form" name="tForm" action="translate.php" method="POST">
<div id="t-bar">
<div class="t-select">
<select name="start-lang" id="choice-button">
<option value="english">English</option>
</select>
<label>into</label>
<select name="end-lang" id="choice-button" onChange="document.forms['tForm'].submit();">
<option value="caps"<?php if ($resLang == 'caps') echo ' selected="selected"'; ?>>CAPS</option>
<option value="lowercase"<?php if ($resLang == 'lowercase') echo ' selected="selected"'; ?>>lowercase</option>
</select>
<input type="submit" id="t-submit" value="Translate">
</div>
</div>
<div id="t-main">
<textarea id="txt-source" name="t-src" autofocus="autofocus" placeholder="Type in what you would like to convert…" onChange="document.forms['tForm'].submit();"><?php echo $source; ?></textarea>
<input type="button" id="t-clear" onclick="this.form.elements['t-src'].value=''">
<textarea id="txt-result" name="txt-result" readonly disabled="disabled" placeholder="result..."><?php echo $result; ?></textarea>
<input type="button" id="t-copy" name="t-copy">
</div>
</form>
Question 1: I currently have onclick="this.form.elements['t-src'].value=''" which clears one textbox when the button is pressed. Is it possible to have the same attribute clear both textareas in my form? I can't seem to find an answer anywhere for clearing 2 elements with 1 button. I do not want to clear the form as I would like to keep the selected dropdown values so that is why I'm doing it this way.
Question 2: How would I go about implementing a live refresh of the results textarea so they user can simply type and see the result? I've look at the ajax and jquery required and am confused as most don't show how to output to a form element and only to a div. (Similar to google's translate)
Question 3: I realized that if a user does a new line in the textarea, when they submit for translate, it gives them a php header error. Any ideas how I can avoid this? This is my header for the translate.php file used in the form:
header("location: /?txt-result=$result&t-src=$textSource&end-lang=$outputLang");
I am merely trying to do this as a learning excersise and would really appreciate any guidance or answers to the three questions. Many thanks for your help!
question 1
you should have:
onclick="clearTextboxes();"
and in javascript something like:
//if you want to delete all the inputs that are of type text
function clearTextboxes(){
var inputs = document.getElementById('t-form').getElementsByTagName('input');
for (var control in inputs){
if(inputs[control].getAttribute('type') == 'text'){
inputs[control].value = '';
}
}
}
question 2
it is far too broad to put here as an answer, you should really look at jQuery's $.ajax, and create a different question with specific doubts.
question 3
use the PHP urlencode() function
Answer 1: Have your onclick event call a function which clears those values for you:
<script type="text/JavaScript">
function clearTextareas()
{
this.form.elements["t-src"].value = "";
this.form.elements["txt-result"].value = "";
}
</script>
<input type="button" id="t-clear" onclick="clearTextareas()">
Answer 2: Add an onkeydown event in the source textarea that peforms the translation (or whatever it needs to do) and then puts the result in the result textarea:
<script type="text/JavaScript">
function translateText()
{
var text = this.form.elements["t-src"].value;
// do something
this.form.elements["txt-result"].value = text;
}
</script>
<textarea id="txt-source" name="t-src" autofocus="autofocus" placeholder="Type in what you would like to convert…" onkeydown="translateText()"><?php echo $source; ?></textarea>
Answer 3: Perhaps an onsubmit event in the form element that will sanitize the input from the text area. Have a look at JavaScript's encodeURIComponent. Perhaps this will work for you:
<script type="text/JavaScript">
function sanitize()
{
this.form.elements["t-src"].value = encodeURIComponent(this.form.elements["t-src"].value);
}
</script>