EDİTED("I think that i should use Ajax how can i do it")I created comboboxes dynamically. When I want to get the value from the textbox, I can't post to PHP. Here is my code:
HTML code:
<form method="post" name="sigortayap" action="sigorta-process.php" onsubmit="return a()" >
<select id="yetiskinid" class="selectTravelInputFieldsCar" name="yetiskin" onChange="yetiskintext()" >
<option value="-1">Seçiniz</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div id="yetiskindiv"></div>
</form>
JS Code:
function yetiskintext() {
var secenek=document.getElementById("yetiskinid").value;
while (secenek>0){
var textBoxname = document.createElement('input');
textBoxname.name = 'textyetiskinname'+secenek;
textBoxname.id='textyetiskinname'+secenek;
textBoxname.type = 'text';
textBoxname.className='selectTravelInputFieldsCarJS';
document.getElementById("yetiskindiv").appendChild(textBoxname);
}
}
PHP Code:
<?php
$kece=htmlspecialchars($_POST["textyetiskinname1"]);
echo $kece;
?>
When I put echo $kece; in the PHP, I can't see any output. Why?
The name of the combobox is 'textyetiskinname'+secenek not 'textyetiskinname'. You miss the number at the end of the name.
Maybe you should try this:
textBoxname.setAttribute("name", 'textyetiskinname['+secenek+']');
instead of .name
Related
I want to get html slected option value in php or javascript.
I am trying to do is:
<form action="book-page-1.php>" method="POST">
<select name="chosePage">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="submit" name="submit" value="Update">
</form>
What I want is to pass the selected page number in "form action" before submitting the form like:
// I want to pass selected option value in "url" before submit the form
<form action="book-page-<?php echo selected option;?>.php>" method="POST">
I dont want in php post like:
// This is not my requirement - Because I want to pass value in "url" before submit the form
if (isset($_POST['chosePage'])) {
$op = $_POST['searchItemname'];
}
I want to pass the selected option value in url.
PHP or JAVASCRIPT all are welcome.
Any Idea would be welcome.
Thanks
you can add an id to the <select> element, <select id="chosePage "name="chosePage">.
then using javascript you can do:
let selected = document.getElementById("chosePage").value;
you can do it by this simple function :
function SandRequest(){
let selected = document.getElementById("chosePage").value;
document.getElementById("MyForm").setAttribute("action", "book-page-"+selected+".php");
return true;
}
<form id="MyForm" method="post" >
<select id="chosePage" name="chosePage">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input name="Booktitle" type="text">
<button onclick="SandRequest()" >Update</button>
</form>
I have a wp_query where I would like to change the posts per page via a drop-down select box. The code I have has been pieced together from various tutorials and snippets I already have so bear with me...
My basic wp_query is;
<?php
$postsperpage = isset($_POST['amt_per'])? $_POST['amt_per']: 10;
$args = array(
'post_type'=>'product',
'posts_per_page' => $postsperpage,
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) {
echo '<ul>';
while ( $the_query->have_posts() ) {
$the_query->the_post();
echo '<li>' . get_the_title() . '</li>';
}
echo '</ul>';
wp_reset_postdata();
} else {
}
?>
The tutorial I used had a few buttons where the values were the number of posts per page;
<form method="post">
<select id="select-box">
<option class="amt-button" name="amt_per" value="1">1</option>
<option class="amt-button" name="amt_per" value="2">2</option>
<option class="amt-button" name="amt_per" value="3">3</option>
<option class="amt-button" name="amt_per" value="4">4</option>
</select>
</form>
and the jQuery;
<script>
jQuery(document).ready(function($) {
// Postsperpage
$('select').click(function(){
$(this).closest('form').submit();
});
});
</script>
What I want to do is change the buttons into a drop-down select box like this;
<select id="select-box" method="post">
<option class="amt-button" name="amt_per" value="1">1</option>
<option class="amt-button" name="amt_per" value="2">2</option>
<option class="amt-button" name="amt_per" value="3">3</option>
<option class="amt-button" name="amt_per" value="4">4</option>
</select>
The problem I now have is my amended jQuery won't update the query with correct posts per page, this is what I have come up with;
$(function() {
$('#select-box').on('change', function(e) {
$(this).closest('form')
.trigger('submit')
})
})
any and all help is appreciated, Thanks!!
UPDATE
Thanks to #Krystian Barchański I've updated my dropdown code and wrapped the in a . This has got the form firing when you select a dropdown value but now the page just reloads with the same posts per page and the dropdown changes back the initial value, I'm assuming this is a jquery issue as when using the buttons everything worked fine?
You need to change the select box name amt_per. not for options.
<form method="post" action="">
<select id="select-box" name="amt_per">
<option class="amt-button" value="1">1</option>
<option class="amt-button" value="2">2</option>
<option class="amt-button" value="3">3</option>
<option class="amt-button" value="4">4</option>
</select>
</form>
You have to wrap your <select> with a <form> like this:
<form method="post">
<select id="select-box">
<option class="amt-button" name="amt_per" value="1">1</option>
<option class="amt-button" name="amt_per" value="2">2</option>
<option class="amt-button" name="amt_per" value="3">3</option>
<option class="amt-button" name="amt_per" value="4">4</option>
</select>
</form>
In your example you treat <select> as it could be submitted and it would send a post request but that can be done only by a form.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select - here you'll find list of available attributes for select there is no method nor url.
I want to create a form that has two different dropdown lists to select from,(for example a dropdown list to select a name and a dropdown list to select age). Then i want to print them under the form . Then i must be able to select again other options and they will be printed after the fist option's print.
Is this possible?
<form id="form" action="" method="post">
<select id="name">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="age">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="submit" value="submit">
</form>
and how i can pass the selected value to php?
<body>
<form id='form'>
<select id='name' name='selectName'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
</select>
<select id='age' name='selectAge'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
</select>
<input type='submit' value='submit'>
</form>
<div id='print'></div> <!-- Here you will print the submitted values -->
</body>
</html>
<!-- ES6 syntax -->
<script>
const form = document.getElementById('form');
const print = document.getElementById('print');
form.addEventListener('submit', function(event) {
event.preventDefault(); // prevent page reload
const name = this.querySelector('#name').value; // get the name
const age = this.querySelector('#age').value; // get the age
print.innerHTML += `<div>Name: ${name}, Age: ${age}</div>`; // print name and age below the form
// here you can perform an AJAX call to your PHP file and do something with it
});
</script>
In this case there is no reason to put action='YOUR_PHP_FILE.php' in the form, because you want to keep the page and the printed messages below, so just perform AJAX call behind the scenes. Normally you would do:
<form id='form' action='YOUR_PHP_FILE.php' method='POST'>
// ...
</form>
In the php file you can do something like:
<?php
$name = $_POST['selectName'];
$age = $_POST['selectAge'];
// do something with these values ...
?>
Here is old Javascript version:
<!-- Old syntax -->
<script>
var form = document.getElementById('form');
var print = document.getElementById('print');
form.addEventListener('submit', function(event) {
event.preventDefault(); // prevent page reload
var name = this.querySelector('#name').value; // get the name
var age = this.querySelector('#age').value; // get the age
print.innerHTML += '<div>Name: ' + name + ', Age: ' + age + '</div>'; // print name and age below the form
// here you can perform an AJAX call to your PHP file and something with it
});
</script>
I have a page that has several forms created using a while loop and each form has four selects. I am trying to work out how I can check each of the selects belonging to the current form (the one containing the button clicked) to confirm if any been selected. All of the forms are wrapped in a single div called #audit_content.
The intention is to check that if the variable grade isn't a certain value then the script checks if any of the selects have been selected.
(The value $i is created during the while loop, used to uniquely identify each form)
the html
<form id="audit_form<? echo $i; ?>">
<select name="grade" class="grade<? echo $i; ?>">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<select>
<select name="patient" class="reason_select">
<option value="">Select</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="exposure" class="reason_select">
<option value="">Select</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="equipment" class="reason_select">
<option value="">Select</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="positioning" class="reason_select">
<option value="">Select</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="button" name="audit_submit" class="audit_submit audit_submit_btn ie7_submit" value="" />
<input type="hidden" class="form_id" value="<? echo $i; ?>" >
</form>
The JQuery
<script>
$(document).ready(function(){
$('#audit_content').on("click", ".audit_submit", function(){
var form_id = $(this).prev('.form_id').val();
var grade = $('.grade'+form_id).val();
if(grade != 1){
$('select.reason_select').each(function(){
alert($(this).text())
}
});
</script>
The script as it is displays the values of every select with the class reason_select on the page which I realise is because I haven't told it to check a specific form, thats the bit I'm stuck at.
button shown is outside the form, not inside as mentioned.
To isolate any repeating type widget look for the parent of that widget, then search only within it:
Moving the button inside the form would make it very easy by doing:
$('#audit_content').on("click", ".audit_submit", function () {
var form=$(this).closest('form')
var selects=form.find('select');
// do somthing with selects
})
I would change the script to
<script>
$(document).ready(function () {
$('#audit_content').on("click", ".audit_submit", function () {
var form = $(this).prev('form');
var grade = $('select[name="grade"]', form).val();
if (grade != '1') {
$('select.reason_select', form ).each(function () {
alert($(this).text());
});
}
});
});
</script>
In the script you have posted there are several missing ) and } so it should create syntax errors..
You mention
current form (the one containing the button clicked)
but your button is not contained in the form, that is why i changed the code to form = $(this).prev('form')
I have an external Javascript file and i am trying to alert the value of select tag.
My <select> code looks like this:
<select id="vote">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="button" value="vote" onclick="castvote();">
and the Javascript (which is external):
function castvote()
{
alert(document.vote.options[document.vote.selectedIndex].value);
}
But I get the error "document.vote is undefined".
Can someone help me with this.
Best
Zeeshan
If selecting by Id, you should use :
function castvote() {
var sel = document.getElementById("vote");
alert(sel.options[sel.selectedIndex].value);
}
Easy way, change your code so that your form field has a name attribute:
<select name="vote" id="vote">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="button" value="vote" onclick="castvote();">
Better way, change your javascript so it is retreiving the select box by its ID rather than through the document object:
function castvote() {
var mySelect = document.getElementById("vote");
alert(mySelect.options[mySelect.selectedIndex].value);
}