I need a multiple select form, like this:
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<form action="" method="get">
<p>
<select class="multiple normal-selectbox" id="RW" name="RW" multiple="multiple">
<option value="N" ><span class="input-group"><strong>Region Nord</strong></span></option>
<option value="HAM" ><span class="input-group">Hamburg</span></option>
<option value="HAJ" ><span class="input-group">Hannover</span></option>
<option value="BRE" ><span class="input-group">Bremen</span></option>
</select>
<div class="form-group submit f0 " data-fid="f0" style="position: relative;">
<div class="progress" style="display: none; z-index: -1; position: absolute;">
<div class="progress-bar progress-bar-striped active" role="progressbar" style="width:100%">
</div>
</div>
<button type="submit" class="btn btn-primary btn-lg" style="z-index: 1;">
GO
</button>
</form>
</body>
</html>
After submit it hast to get Values as String in URL it get it so:
...?RW=N&RW=HAM&RW=HAJ&RW=BRE
But I need it so:
Rw=HAMxHAJxBRE ...
i find this
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var x = $("form").serializeArray();
$.each(x, function(i, field){
$("#results").append(field.name + "x" + field.value + " ");
});
});
});
</script>
</head>
<body>
<form action="" method="get">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
</form>
<button>Serialize form values</button>
<div id="results"></div>
</body>
</html>
But it doesn't Get Values to URL
Do you have any idea to solve my problem?
Regards
Hello friends thank you for your help, I made some code the result is what I want to string in to URL i don't know why
hier is the Code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var x = $("form").serializeArray();
$.each(x, function(i, field){
$("#results").append("" + field.value+"x");
});
});
});
</script>
</head>
<body>
<form action="" method="get">
<label>
<select name="RW" multiple class="multiple normal-selectbox" id="RW">
<!--<option value="-" selected="selected" >alle Abflughäfen</option>-->
<optgroup label="Norden">
<option value="N" ><span class="input-group">Region Nord</span></option>
<option value="HAM" ><span class="input-group">Hamburg</span></option>
<option value="HAJ" selected ><span class="input-group">Hannover</span></option>
<option value="BRE" ><span class="input-group">Bremen</span></option>
</select>
</label>
</form>
<button>Serialize form values</button>
<div id="results"></div>
</body>
</html>
also the string should be RW="results"
Assuming that you are using PHP on the server-side - as implied by the PHP tag on this post, PHP should show this as an Array automatically. For an ordinary field, $_REQUEST['RW'] would be a single value (e.g., "HAM") for a multiple select it will be an array (e.g., ["HAM","HAJ"]). Just let PHP do the work for you and don't try to decode the URL yourself.
Related
Hi am trying to print the value of <span class="paymentID" name="txn_id">ABC</span></div> ABC into my input field named txn
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
var result = getElementByClass('.paymentID');
$('#txn').val("result");
$("#test3").val("Dolly Duck");
});
});
</script>
</head>
<body>
<span class="paymentID" name="txn_id">ABC</span></div>
<input type="text" name="txn" id="txn" value="">
<p id="test1">This is a paragraph.</p>
<p id="test2">This is another paragraph.</p>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">Set Text</button>
<button id="btn2">Set HTML</button>
<button id="btn3">Set Value</button>
</body>
</html>
I the below script does not work. I am trying to pass values generated using a jquery function to php. when I run this code it. The form slides to the right, but no values are encoded. I am thinking I am doing something simple wrong.
<!DOCTYPE html>
<html>
<head>
<title>Target Example</title>
<?php
$x = $_POST['total'];
echo $x;
?>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.js"></script>
<script>
$(document).ready(function() {
function compute() {
var a = $('#a').val();
var b = $('#b').val();
var total = a * b;
$('#total').val(total);
}
$('#a, #b').change(compute);
});
</script>
</head>
<body>
<form action="<?php echo $PHP_SELF;?>" method="post">
<div data-role="page" id="irr">
<div data-role="header">
<h1>Calculation</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="a">Diameter:</label>
<input type="number" name="a" id="a" value="" />
<label for="b">Diver:</label>
<input type="number" name="b" id="b" value="" />
<label for="total">Result:</label>
<input type="text" name="total" id="total" value="" />
<input type="submit">
</div>
What did we do here?
</div>
</div>
</form>
</body>
</html>
Your form action was not set correctly. Use $_SERVER['SCRIPT_NAME'] instead. Also, I used the short hand echo feature in case you are wondering. Hopefully that fixes it for you :)
<!DOCTYPE html>
<html>
<head>
<title>Target Example</title>
<?php
$x = $_POST['total'];
echo $x;
?>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.js"></script>
<script>
$(document).ready(function() {
function compute() {
var a = $('#a').val();
var b = $('#b').val();
var total = a * b;
$('#total').val(total);
}
$('#a, #b').change(compute);
});
</script>
</head>
<body>
<form action="<?=($_SERVER['SCRIPT_NAME'])?>" method="post">
<div data-role="page" id="irr">
<div data-role="header">
<h1>Calculation</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="a">Diameter:</label>
<input type="number" name="a" id="a" value="" />
<label for="b">Diver:</label>
<input type="number" name="b" id="b" value="" />
<label for="total">Result:</label>
<input type="text" name="total" id="total" value="" />
<input type="submit">
</div>
What did we do here?
</div>
</div>
</form>
</body>
</html>
Here am working on a page were i need the content inside a textarea in a form tag to be passed to another set of form tag in the same page were i have no submit button to pass the content, please help me on this and pardon me if went wrong somewhere, thank you.
content.php
<?php
echo'
<form>
<div class="col-sm-12 form-group"><textarea rows="6" type="text" class="form-control" placeholder="Mail body" name="mail_body"></textarea></div>
//Without using submit button
</form>';
?>
pass_content.php
<?php
<form>
//pass the the content in above textarea in this form which is on the same page
</form>
?>
You can do this using jquery. Like this :
var $mail = $(".mail");
$(".email").keyup(function() {
$mail.val( this.value );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="col-sm-12 form-group"><textarea rows="6" type="text" class="form-control email" placeholder="Mail body" name="mail_body"></textarea></div>
</form>
<form>
<textarea rows="6" type="text" class="form-control mail" ></textarea>
</form>
UPDATE : As you want another field to be hidden.
you jquery code:
var $mail = $(".mail");
$(".email").keyup(function() {
$mail.val( this.value );
});
and here is your html code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="col-sm-12 form-group">
<textarea rows="6" type="text" class="form-control email" placeholder="Mail body" name="mail_body"></textarea>
</div>
</form>
<form>
<input type="hidden" class="mail" >
</form>
Check this -
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
console.log('document loaded');
$( "#box-texarea" ).keyup(function() {
console.log( "Handler for .keyup() called." );
// Get data from textarea
var userData = $(this).val();
console.log('userData : '+userData);
// Place data inside form
$('#fm-userdata').html(userData);
});
});
</script>
</head>
<body>
<textarea placeholder="Place for textarea" id="box-texarea" style="width:500px; height: 100px;"></textarea>
<br>
<form id="fm-userdata" style="border: 1px solid #ccc;"></form>
</body>
</html>
I am unable to load external file while using AJAX jQuery. I want to use jQuery AJAX to pop up form then validate, enter data in MySQL. but starting from a simple AJAX function. Kindly let me know where I am going wrong
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="test_style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("#ajax-contact-form").submit(function(){
var str = $(this).serialize();
$.ajax({
type: "POST",
url:"contact.php",
data: str,
success:function(result) {
$("#div1").html(result);
}
});
});
});
</script>
</head>
<body>
<div id="contact_form">
<form id="ajax-contact-form" name="contact" action="">
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input"/>
<label class="error" for="name" id="name_error">This field is required.</label>
<input class="button" type="submit" name="submit" value="Send Message">
</fieldset>
</form>
</div>
</body>
</html>
and contact.php file is
<?php
echo "Hello";
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="test_style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$(".button").click(function() {
$.ajax({url:"contact.php",success:function(result){
$("#div1").html(result);
}});
return false;
});
});
</script>
</head>
<body>
<div id="contact_form">
<form name="contact" action="">
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
<label class="error" for="name" id="name_error">This field is required.</label>
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</fieldset>
</form>
</div>
<div id="div1">
</div>
</body>
</html>
Try that:
What needed to be fixed:
1) You'd duplicated the onReady function,
2) you can use a submit form button, but since it's default action is to submit the form, the result wouldn't have been visible.
3) There was no #div1 for the result to be displayed in.
Hopefully, this has been helpful... Happy Coding!
Try with type button type
<input type="button" name="submit" class="button" id="submit_btn" value="Send" />
And also your both scripts are same use either DOM ready or $(function) like
<script>
$(document).ready(function(){
$(".button").click(function(){
$.ajax({url:"contact.php",success:function(result){
$("#div1").html(result);
}});
});
});
</script>
button is your class name so that it will represented like .button And create an div with id div1 at your html page
$("#div1").html(result);
Use one div which id is div1 inside your page which you want to show the result.
<div id="div1"></div>
what i am trying to do is when i click on the submit button and try to get the value it is not displaying it properly . I am writing the code of 2 file down 1) enable.php 2) abc.php
File Name : enable.php
<html>
<head>
<script type="text/javascript">
function showdetail(boxid){
document.getElementById(boxid).style.display = "block";
}
function hidedetail(boxid){
document.getElementById(boxid).style.display = "none";
}
</script>
</head>
<body>
<form name="abc" method="post" action="abc.php">
<ul>
<li><a id="r" href="#" title="" alt="" onclick="showdetail('res'); hidedetail('comm');">bb</a></li>
<li style="width: 1px;">|</li>
<li style="width:85px;"><a id="r" href="#" title="" alt="" onclick="showdetail('comm'); hidedetail('res');">Cc</a></li>
<li style="width: 2px;">|</li>
</ul>`
<div id="res" style="display:none;">
<select id="pr" name="pr" class="textarial12 textcolorgrey flot_left">
<option value="Hello">Hello</option>
</select>
</div>
<div id="comm" style="display:none;">
<select id="pr" name="pr" class="textarial12 textcolorgrey flot_left">
<option value="Hi">Hi</option>
</select>
</div>
<input type="submit" value="submit" />
</form>
</body>
</html>
File Name : abc.php
<?php
$PropertyType=$_POST[pr];
echo $PropertyType;
?>
$_POST elements must be referenced as a string. Instead of:
$PropertyType=$_POST[pr];
please use:
$PropertyType=$_POST['pr'];