I have a select box outside my form, When the users selects an option, the right form is being shown. But I want to send the value of the selected option together with the form.
<select id="selection" onchange="showForm()">
<option value="iphone">iPhone</option>
<option value="Android">Android</option>
</select>
<form action="iphone.php" method="post" id="form1">
<input type="text name="username" required>
</form>
<form action="android.php" method="post" id="form2">
<input type="text name="username" required>
</form>
Please note: This is a simple example, I want to know how you can send the value of the selectbox outside the form.
Add to each form a hidden input element:
<input type="hidden" name="selection" class="hiddenselection" />
Use javascript to copy the value on change. In jquery something like this:
$('#selection').on('change',function(){
$('.hiddenselection').val($('#selection').val());
})
function showForm(value) {
$.ajax({
type: "POST",
success: function(value){
if(value =='iphone'){
$("#form2").hide();
}else{
$("#form1").hide();
}
}
});
}
Keep the selected value in hidden field form1 and form2
<select id="selection" onchange="showForm(this)">
<option value="iphone">iPhone</option>
<option value="Android">Android</option>
</select>
<form action="iphone.php" method="post" id="form1">
<input type="text" name="username" required />
<input type="hidden" name="selection" id="iphone_selection" />
</form>
<form action="android.php" method="post" id="form2">
<input type="text" name="username" required />
<input type="hidden" name="selection" id="android_selection" />
</form>
<script>
function showForm(THIS){
var thisVal = $(THIS).val();
if(thisVal == 'iphone'){
$('#form2').hide();
$('#form1').show();
$('#iphone_selection').val(thisVal);
//$("#form1").submit();
}
if(thisVal == 'Android'){
$('#form1').hide();
$('#form2').show();
$('#android_selection').val(thisVal);
//$("#form2").submit();
}
}
</script>
<style>
#form1{
display:none;
}
#form2{
display:none;
}
</style>
https://jsfiddle.net/9tms99p5/
Try to include this script on your code.
<script type="text/javascript">
window.onload = function(){
document.getElementById("selection").onchange();
};
function showForm(){
if(document.getElementById("selection").value == "iphone"){
document.getElementById("form1").style.display = "block";
document.getElementById("form2").style.display = "none";
}else if(document.getElementById("selection").value == "Android"){
document.getElementById("form1").style.display = "none";
document.getElementById("form2").style.display = "block";
}
}
</script>
Related
I have a multiple field input and I want to remember the input values after submitting it , how can I do that using php or maybe another language if it is possible?
I have this input:
<input type="text" name="passport[]" class="form-control" aria-describedby="basic-addon1"required/>
I have tried something like this :
value="<?php if(isset($_POST['passport'])) { echo $_POST['passport'][$i]; } ?>"
but nothing works.
You can use browser local storage to keep the value after form submission.
<form method="post" action="" onSubmit="return saveElement();">
<input type="text" name="passport[]" id="password"/>
<input type="submit" name="submit" value="save"/>
</form>
<script type="text/javascript">
document.getElementById("password").value = localStorage.getItem("password");
function saveElement() {
var passValue = document.getElementById("password").value;
if (passValue == "") {
alert("Please enter a password first!");
return false;
}
localStorage.setItem("password", passValue);
location.reload();
return false;
}
</script>
I have a form with the action set to "/resutls". But i have a txt input and i want to check if that is not empty to redirect to another location than "/results". Is this possible?
Code example as below:
<form id="results" action="/results" method="get">
<select id="country" name="country">
....
</select>
<input type="text" name="id">
<input type="submit" class="form-submit" value="Apply Search" name="submit">
</form>
Any ideas? Can this be done with jquery?
Sure you can do that in the submit handler. Warning: I wouldn't give a form control a name of id. It does cause confusion: if this refers to the form, should this.id refer to the id of the form or the text field with name="id"?
if( !!this.somefield.value ) { //did not want to write this.id.value !!!!
this.action = '/other-url';
} else {
this.action = '/results';
}
$(function() {
$('#results').on('submit', function(e) {
e.preventDefault(); // just so we can see that form action changes
if( !!this.somefield.value ) {
this.action = '/other-url';
} else {
this.action = '/results';
}
alert( this.action );
//$(this)[0].submit(); //now submit the form
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="results" action="/results" method="get">
<select id="country" name="country">
</select>
<input type="text" name="somefield">
<input type="submit" class="form-submit" value="Apply Search" name="submit">
</form>
Yes it is possible. Just set the form element's action property using jQuery .prop().
As a simple example:
var valid = false;
// go though validation here
if (false === valid) {
$('#results').prop('action', '/some/url/to/redirect/to');
}
HTML5 provides the "required" attribute wich will prevent the form for being posted, use it like this
<input type="text" name="id" required="required">
or, if you prefer to redirect to other page instead, you can do this
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script>
$("#results").submit(function (e){
e.preventDefault();
if($("#results input[name='id']").length < 1){
window.location.href = "your detiny url";
}
else{
this.submit();
}
});
</script>
I have this html example form that I need to submit to MySQL table without having to refresh the page. Basically the main idea is to keep the username value in the input field after the data is sent. I have been struggling for days trying to use Ajax and JQuery functions to achieve my goal but I cannot get it right, that's why I'm only posting this piece of html code, I'm open to ideas, if you can please provide some code. Thank you so much.
<html>
<head>
<title>Test</title>
</head>
<body>
<form method="post" name="form">
name:<input id="name" name="name" type="text" />
<select id="gender" name="gender">
<option value="">Gender</option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<input type="submit" value="Submit" class="submit"/>
</form>
</body>
</html>
Inside my php file:
<?php
$dbhost = 'localhost';
$dbuser = 'Myuser';
$dbpass = 'Mypass';
$db = 'Mydb';
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
mysql_select_db($db);
$name = $_POST['name'];
$gender = $_POST['gender'];
mysql_query("INSERT INTO callWrapper ('user','data')
VALUES ('$name','$gender'") or die(mysql_error());
?>
Use event.preventDefault() in jQuery:
$("form").submit(e) {
e.preventDefault();
// the rest of your code
}
See here for more details.
If you do not want to use jQuery, you can do it like this:
<form onsubmit="myFormFunction();return false">
Bear in mind these do slightly different things as explained here
HTML:
<html>
<head>
<title>Test</title>
</head>
<body>
<form method="post" name="form" id="frm_data">
name:<input id="name" name="name" type="text" />
<select id="gender" name="gender">
<option value="">Gender</option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<input type="button" value="Submit" class="submit" id="btn_submitForm"/>
</form>
</body>
</html>
JS:
// bind click event
$('#btn_submitForm').click(function(e){
e.preventDefault();
var url = 'Your PHP File URL';
var formData = $("#frm_data").serializeObject();
$.post(url, formData,
function(data) {
//alert(data);
}
);
});
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#frm_data").submit(function(){
$.ajax({
type: "POST", // data send format POST/GET
url: "./process_form.php", // file url for data processing
data: $("#frm_data").serialize(), // all form field are serialize
dataType: "json", // response type xml, json, script, text, htm
success: function(data) {
alert('hi');
}
});
});
});
</script>
</head>
<body>
<form method="post" name="form" id="frm_data" onsubmit="return false;">
name:<input id="name" name="name" type="text" />
<select id="gender" name="gender">
<option value="">Gender</option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<input type="submit" value="Submit" class="submit" id="btn_submitForm"/>
</form>
</body>
</html>
for the reference check the url : http://api.jquery.com/jquery.post/
i want to get back or post back textbox value after form has been submit it is necessary because of user's must be see what values he or her typed in the textbox?
function getComboA(sel) {
var cname=document.getElementById("cname");
var input_val = document.getElementById("cname").value;
name.action = "searchreceivable.php?cname="+input_val+"";
name.submit();
}
<form name="name" id="name"><input class="input_field" type="text"
name="cname" id="cname" onchange="getComboA();"></form>
Now Problem is Solved This Is My Final Code So It Will Retain Textbox Value Once Form Submitted
function getComboA(sel) {
var cname=document.getElementById("cname");
var input_val = document.getElementById("cname").value;
name.action = "searchreceivable.php?cname="+input_val+"";
name.submit();
}
<form name="name" id="name"><input class="input_field" type="text"
name="cname" id="cname" onchange="getComboA();"
value="<?php echo $txtVal=$_GET['cname']; ?>"></form>
Do you really need it to store via javascript? Maybe you can just do something like:
<input class="input_field" type="text"
name="cname" id="cname" onchange="getComboA();" value="<?php echo $_GET['name']; ?>">
function getComboA(sel) {
var cname=document.getElementById("cname");
var input_val = document.getElementById("cname").value;
form.action = "searchreceivable.php?cname="+input_val;
form.submit();
}
The code is to be done on searchreceivable.php-
<?php
$txtVal=$_GET['cname'];
?>
Since you mark this question jQuery and you want to send data to the server onchange, then I suggest
$(function() {
$("#cname").on("change",function() {
$.get("searchreceivable.php?cname="+$(this).val(),function(data) {
$("#result").html(data);
});
});
});
using
<form>
<input id="cname" class="input_field" type="text" value=""/>
</form>
<div id="result"></div>
I'd like to submit a form thanks to AJAX and display the error messages contained in "form_treatment.php" (form verification) without the php redirection to "form_treatment.php" when I submit. What have I to write in the following lign ?
$.post("form_treatment.php",name, ???);
I have a basic form in form.php :
<form method="post" action="form_treatment.php" >
<input type="text" name="user_name" value="Your name..." />
<button type="submit" >OK</button>
</form>
This form is treat in form_treatment.php :
if ( empty($_POST['user_name']) ){
echo 'You have to enter your name.';
} else {
$already_existing = verify_existence( $_POST['user_name'] );
// verification in the DB, return true or false
if( $already_existing ){
echo 'Name already used.';
} else {
// Entering the name in the DB
}
}
You can try something like the following:
<form id="myForm" method="post" action="form_treatment.php" >
<span id="message"></span>
<input type="text" name="user_name" value="Your name..." />
<input type="submit" >OK</button>
</form>
And the javascript:
$('#myForm').submit(function() {
var myForm = $(this);
$.ajax({
type: 'POST',
url: 'form_treatment.php',
data: myForm.serialize(),
success: function (data) {
$('#message').html(data);
}
});
return false;
});
You can accomplish this by two ways
1st One in the same page
2nd one via AJAX
The first way can be done like this
<?php
if(isset($_POST['sub']) && $_POST['sub'] == 'true'):
if ( empty($_POST['user_name']) ){
echo 'You have to enter your name.';
} else {
$already_existing = verify_existence( $_POST['user_name'] );
// verification in the DB, return true or false
if( $already_existing ){
echo 'Name already used.';
} else {
// Entering the name in the DB
}
}
endif;
?>
<form method="post" action="<?php echo $PHP_SELF; ?>" >
<input type="text" name="user_name" value="Your name..." />
<input type="hidden" name="sub" value = "true" >
<button type="submit" >OK</button>
</form>
The 2nd way via ajax
can be done like this
<div id="errors"></div>
<form method="post" id="myFrm">
<input type="text" name="user_name" value="Your name..." id="name" />
<button type="submit" >OK</button>
</form>
<sctipt>
$("#myFrm").submit(function() {
var NameFromForm = $('#name').val();
$.post("form_treatment.php", { "user_name": NameFromForm },
function(data){
$("#errors").html(data);
});
event.preventDefault();
});
</script>
If you need any explanation leave a comment