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("");
});
Related
I have a form of different types of input fields. It looks something like this:
<form action="function.php" method="POST" ...>
<select name="table" ...>
<option> ... </option>
<option> ... </option
</select>
<select name="column" ...>
<option> ... </option>
<option> ... </option
</select>
<input type="text" name="searchword">
<input type="button" name="operator" value="=" id="operator" onclick="change(this.id)">
<input type="submit" ...>
</form>
With my dynamic button, I can switch the operators (=, <, >) with my "change()" function which I need to create my queries. In my function.php file, I'm trying to get all the values of my input fields ...
$table = $_POST["table"];
$column = $_POST["column"];
$operator = $_POST["operator"];
... but unfortunately, it only works for the table and for the column input. I can't store the value of my operator button. I tried to find a solution for my problem but most people wrote that I have to change my button's input type to "submit" to pass the value. However, I do not want the action to be executed directly when this button is pressed, but only when the real "submit" button is pressed.
Edit:
Here is my "change()" function:
function change(operatorId) {
let element = document.getElementById(operatorId);
if (element.value == "=") {
element.value = ">";
} else if (element.value == ">") {
element.value = "<";
} else if (element.value == "<") {
element.value = "=";
}
}
And this is the error message I get when the function.php file opens: "Undefined array key "operator" in ..."
Edit: Solution
Thanks to Professor Abronsius' answer, I was able to resolve my problem. As he suggested, I inserted another hidden input field with the name "operator" and changed my button to "operator-selector". In this way, I just had to add some lines to my function to change the hidden field's value. This is how it looks like now:
<input type="hidden" name="operator" id="operator" value="">
<input type="button" name="select-operator" value="=" id="select-operator" onclick="change(this.id)">
function change(selectorOperatorId) {
let selector = document.getElementById(selectorOperatorId);
if (selector.value == "=") {
selector.value = ">";
document.getElementById("operator").value = selector.value;
} else if (selector.value == ">") {
selector.value = "<";
document.getElementById("operator").value = selector.value;
} else if (selector.value == "<") {
selector.value = "=";
document.getElementById("operator").value = selector.value;
}
}
What you could possibly do would be to keep the button as a regular button but change it's name and then add a hidden input named operator - the value can be assigned by the change function and will appear in the POST array.
Incidentally I had already written the alternative change function below before I saw the edited question. It does have the advantage of being easily extensible if other operators were required/possible.
If the button were changed to a submit the change function would need to have the event passed in as an argument and then call event.preventDefault(); to stop the form from actually being submitted.
const change=function(e){
e.preventDefault();//if the button was a `submit` button this would stop the form being submitted.
const operators=['=','>','<'];
const input=this.parentNode.operator;
let i=Number( this.dataset.i );
let j=i < operators.length-1 ? i+1 : 0;
this.dataset.i=j;
input.value=this.value=operators[j]
}
document.querySelector('input[type="button"][name="op-selector"]').addEventListener('click',change);
<form method='POST'>
<select name='table'>
<option>coffee
<option>dining
</select>
<select name='column'>
<option>doric
<option>corinthian
</select>
<input type='text' name='searchword' />
<input type='hidden' name='operator' />
<!--
the button appears the same but now sets the value of the real `operator`
field.
-->
<input type='button' name='op-selector' data-i=0 value='=' />
<input type='submit' />
</form>
Change input type from button to submit and then you can access button value with $_POST["operator"];
<input type="submit" name="operator" value="=" id="operator" onclick="change(this.id)">
If you're using a style framework and don't want your button type to get affected add another hidden field with text type and change its value programmatically.
value
Defines the value associated with the button’s name when it’s submitted with the form data. This value is passed to the server in params when the form is submitted using this button.
As documented here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
I am attempting to build a simple contact form inside of a function so that I may add it as a shortcode later. I wish to change the mailto address based on a "select" value.
function contact_form_function() {
switch($_POST['selectedValue']){
case 'webmaster':
$mailbox='webmaster#email.com';
break;
case 'careers':
$mailbox='careersk#email.com';
break;
case 'projects':
$mailbox='projects#email.com';
break;
case 'info':
$mailbox='info#hotmail.com';
break;
default:
// Something went wrong or form has been tampered.
}
?>
<form action="MAILTO:<?php echo($mailbox); ?>" method="post" enctype="text/plain">
<input type="text" name="name" required> Name(required)
<input type="text" name="mail" required> Mail(will not be published, required)
<input type="text" name="website"> Website
<select name="selectedValue">
<option value="webmaster">Website Comment</option>
<option value="careers">Careers Information</option>
<option value="projects">Project Opportunity</option>
<option value="info">Other</option>
</select>
<textarea></textarea>
<?php
echo($mailbox);
?>
<input type="submit"></submit>
</form>
<?php
}
?>
Its not echoing anything back and not changing the email address so I know I've done something wrong. I just don't know what. I'm a novice when it comes to coding so any advice is helpful.
You need to set the $mailbox value before you try to use it. I recommend using jQuery.
<script src="jquery.js"></script>
<script type="text/javascript">
jQuery.noConflict();
(function ($) {
function readyFn() {
$("#emailSelect").change(function(){
$("#your_form").attr('action', 'MAILTO:' + $("#emailSelect").val() + '#email.com');
});
}
$(document).ready(readyFn);
})(jQuery);
/*$(document).ready(function(){
$("#emailSelect").change(function(){
$("#your_form").attr('action', 'MAILTO:' + $("#emailSelect").val() + '#email.com');
});
});*/
</script>
...
<form action="" id="yoor_form" method="post" enctype="text/plain">
...
<select name="selectedValue" id="emailSelect">
<option value="webmaster">Website Comment</option>
<option value="careersk">Careers Information</option>
<option value="projects">Project Opportunity</option>
<option value="info">Other</option>
</select>
</form>
You need to set the $mailbox value before you try to use it.
And if you want something to happen in the browser when the user selects an option in the drop down, you have to use javascript, not PHP.
You are defining $mailbox after you try to use the value.
You have to have your $mailbox = ... stuff before your <form>.
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);
}
});
I have generated multiple text boxes using PHP with name="student[<?php echo $StudentID ; ?>]".
Now on a button click i want to change the value of all these text boxes using jquery.
How do i do this ? Please help.
You can use the Attribute Starts With selector, to look for student[ at the beginning of the name attribute:
$('input[name^="student["]').val('the new value');
It's probably unnecessary to include the [ at the end, and name^="student" will be sufficient, assuming you don't have other inputs with names like student_name or the like.
// If no conflicting named inputs, use
$('input[name^="student"]').val('the new value');
HTML
<input type="text" name="student[]"></input>
<input type="text" name="student[]"></input>
<input type="text" name="student[]"></input>
<button id="button">Change</button>
JavaScript
$('#button').click(function() {
$('input[name^="student"]').val('some value ');
});
JSFiddle
You can also simply add a class that is unique to all of those text boxes (i.e. changableTextBox) and then select it with that and change them all at once. It's also helpful for the future if you need to adjust some styling on all of them at once. Just declare that class in CSS and you're styling.
<input type="text" class="changeableStudentTextBox" id="student[11]" />
<input type="text" class="changeableStudentTextBox" id="student[23]" />
<input type="text" class="changeableStudentTextBox" id="student[45]" />
<input type="text" class="changeableStudentTextBox" id="student[66]" />
<script type="text/javascript">
$('#button').click( function() { $('.changeableStudentTextBox').val('hi!'); });
</script>
Is it possible?
I want a user to post an array full of 1-5 pieces of data.
At first there would be only one text field on show, but on clicking a 'plus' icon next to it, it would create another text field below it for more user input.
I would also want to have a delete icon next to text boxes 2-5, to remove them if necessary.
My JQuery knowledge is limited, and I can work out how to append text boxes to a list, but not to keep track of them/delete them. Ideally I would also want to pass them as an array to php, so I can easily loop through them.
<input type="text" size="15" maxlength="15" name="1"><img src="add.png" onclick="add();">
<!-- Below is hidden by default, and each one shows on click of the add image -->
<input type="text" size="15" maxlength="15" name="2"><img src="delete.png" onclick="delete(2);">
<input type="text" size="15" maxlength="15" name="3"><img src="delete.png" onclick="delete(3);">
<input type="text" size="15" maxlength="15" name="4"><img src="delete.png" onclick="delete(4);">
<input type="text" size="15" maxlength="15" name="5"><img src="delete.png" onclick="delete(5);">
jQuery clone() is very handy for this. A small example how it could be done (working example on jsfiddle)
<ul>
<li><input type="text" name="textbox[]" /></li>
</ul>
<input type="button" id="addTextbox" value="Add textbox" />
<script type="text/javascript">
$(function(){
$('#addTextbox').click(function(){
var li = $('ul li:first').clone().appendTo($('ul'));
// empty the value if something is already filled in the cloned copy
li.children('input').val('');
li.append($('<button />').click(function(){
li.remove();
// don't need to check how many there are, since it will be less than 5.
$('#addTextbox').attr('disabled',false);
}).text('Remove'));
// disable button if its the 5th that was added
if ($('ul').children().length==5){
$(this).attr('disabled',true);
}
});
});
</script>
For the server-side part, you could then do a foreach() loop through the $_POST['textbox']
As long as you give each text box a name like "my_input[]", then when the form is submitted, PHP can get the answer(s) as an array.
$_REQUEST['my_input']; would be an array of the values stored in each text box.
Source: Add and Remove items with jQuery
Add
Remove
<p><input type="text" value="1" /></p>
<script type="text/javascript">
$(function() { // when document has loaded
var i = $('input').size() + 1; // check how many input exists on the document and add 1 for the add command to work
$('a#add').click(function() { // when you click the add link
$('<p><input type="text" value="' + i + '" /></p>').appendTo('body'); // append (add) a new input to the document.
// if you have the input inside a form, change body to form in the appendTo
i++; //after the click i will be i = 3 if you click again i will be i = 4
});
$('a#remove').click(function() { // similar to the previous, when you click remove link
if(i > 1) { // if you have at least 1 input on the form
$('input:last').remove(); //remove the last input
i--; //deduct 1 from i so if i = 3, after i--, i will be i = 2
}
});
$('a.reset').click(function() {
while(i > 2) { // while you have more than 1 input on the page
$('input:last').remove(); // remove inputs
i--;
}
});
});
</script>
You will need to create DOM elements dynamically. See how it is done for example in this question. Notice that
document.createElement
is faster then using jquery's syntax like
$('<div></div>')
Using that technick, you could create inputs like
<input name="id1"/>
<input name="id2"/>
<input name="id3"/>
<input name="id4"/>
<input name="id5"/>
On submitting your form you'll get all them in your query string like
...id1=someval1&id2=someval2&...
Having that, you could process this query as you want on server side.
<form method="POST" id="myform">
<input />
Add textbox
<input type="submit" value="Submit" />
</form>
<script type="text/javascript">
$(document).ready(function(){
$('#add_textbox').click(function(){
var form=$(this).closest('form');
var count=form.find('input').length();
form.append('<div class="removable_textbox"><input />delete</div>');
$('.delete_input').click(function(){
$(this).find('.removable_textbox').remove();
return false;
});
return false;
});
$('#myform').submit(function(){
var i=1;
$(this).find('input').each(function(){
$(this).attr('name','input-'+i);
i++;
})
});
});
</script>
<?php
if(isset($_POST['input-1'])){
$input_array=$_POST;
}
?>
something like this?
I wrote a litte jQuery plugin called textbox. You can find it here: http://jsfiddle.net/mkuklis/pQyYy/2/
You can initialize it on the form element like this:
$('#form').textbox({
maxNum: 5,
values: ["test1"],
name: "textbox",
onSubmit: function(data) {
// do something with form data
}
});
the settings are optional and they indicate:
maxNum - the max number of elements rendered on the screen
values - an array of initial values (you can use this to pass initial values which for example could come from server)
name - the name of the input text field
onSubmit - onSubmit callback executed when save button is clicked. The passed data parameter holds serialized form data.
The plugin is not perfect but it could be a good start.