I have the following code so depending on the selected option, the visitor is directed to a new page on change. But I want them to be directed to that page after they've clicked on the submit button, not immediately on change. How can I do that?
<script type="text/javascript">
function go()
{
window.location=document.getElementById("link").value
}
</script>
<form>
<select id="link" onchange="go()" > <option>DEFAULT</option>
<option value="page1.php">TITLE1</option>
<option value="page2.php">TITLE2</option>
<option value="page3.php">TITLE3</option>
</select>
<div class="submit"> <input name="submit" type="image" id="submit" src="images/getaquotebutton.png" height="93" width="259"/> </div><!--end of submit class-->
</form>
Many thanks in advance
This is simple:
Remove the onchange from here:
<select id="link" onchange="go()" >
Instead add:
<input onclick="go()" name="submit" type="image" id="submit" src="images/getaquotebutton.png" height="93" width="259"/>
Edit:
Just noticed the type is set to image, well if this doesn't work as intended, try to change the type to button and add image through css as:
<input onclick="go()" name="submit" type="button" id="submit" style="background-image: url('images/getaquotebutton.png'); height:93px; width:259px;" />
With jQuery you can do something like this:
$('#submit').click(function(
window.location=document.getElementById("link").value;
));
Of course you should remove the onchange.
$(function() {
$('form').on('submit', function() {
if($('#link').val() == page1.php) {
do redirect..
}
});
});
Do like this for each!
Related
i got this annoying problem i can't figure out how to solve
After a quick research i found those links bellow, which i could partially make work
verifying if checkbox is checked in php
How to read if a checkbox is checked in PHP?
This is my html:
<form method="post">
<!-- CHECK BOX TIPO DE PRODUTO (INTEIRO/PEDAÇO) !-->
<input type="checkbox" name="stipo" id="stipo" value="1" onchange="document.getElementById('tipo').disabled = !this.checked;">Tipo
<select name="tipo" id="tipo" disabled="false">
<option value="Inteiro">Inteiro</option>
<option value="Pedaço">Pedaço</option>
</select><br>
<input type="submit" href="/consulta/consulta_produto.php" class="loader" value="Consultar">
</form>
and this is my php:
if ($_POST['stipo'] == 1){
echo "123";
} else {
echo "456";
}
Because at the Html code im using form like this:
<form method="post">
</form>
and making the post with a submit button like that:
<input type="submit" href="/consulta/consulta_produto.php" class="loader" value="Consultar">
It doesn't work due to the Href at the submit button.
However, if i do the Html code like this:
<form action="/consulta/consulta_produto.php" method="post">
<input type="submit" class="loader" value="Consultar">
</form>
It will work. But, the problem of the form above is that my script stop working. I Cant use the method above because i need Href into the submit button, because when i submit the form, im loading the next page inside a Div
Just in case it helps, this is my Javascript and why i need the Href
<script type="text/javascript">
$(function() {
$('.loader').click(function(event) {
event.preventDefault(); // stop the link loading the URL in href
$('#content').load($(this).attr('href'));
});
});
</script>
Anyone got some idea on how to make the POST method works with href instead of action on the form?
I am working on a registration page that has two buttons. One that saves a user data and the other which should edit the data.
Before a user submits the data, only the "save" button should be active, meaning the "edit" one should be disabled.
After a user enters the data and successfully saves it to the database (implying that it has passed all the validation), the "save" button should be disabled permanently such that a user saves data to the database only once, after which the "edit" button becomes active to enable him/her to edit the data whenever he/she dims it fit.
I understand jquery is the most appropriate for such a case and your help will be highly appreciated. I have tried to search every where for help but I haven't succeeded.I am not that good in jquery, thus the reason I am seeking for the assistance. Thank you in advance.
The html script for the two buttons are as indicated below:
<button type="button" class="buton" name="submit" id="btnOne">Save »</button>
<button disabled id="btnTwo" type="buton" class="button" name="edit">Edit »</button>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form name='' id='' action='' method='post'>
<input type='text' name='txt_category' id='category' value='Jhon' placeholder="Firstname" disabled>
<input type='text' name='txt_stage' id='stage' value='Smith' placeholder="Lastname" disabled>
<select disabled>
<option>Male</option>
<option>Female</option>
</select>
<input type='checkbox' name='txt_approve' id='approve' value='$approve' disabled>
<input type="button" name='edit' value='edit'>
<input type="button" name='save' value='save'>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("form input[type=text],form input[type=checkbox]").prop("disabled",true);
$("input[name=edit]").on("click",function(){
$("input[type=text],input[type=checkbox],select").removeAttr("disabled");
})
$("input[name=save]").on("click",function(){
$("input[type=text],input[type=checkbox],select").prop("disabled",true);
})
})
</script>
</body>
</html>
i never put too much thought on how the data would be submitted without using <form> . I initially just focused on the design of my form.
now, im having trouble trying to send POST data without having a <form> markup.
im using bootstrap framework.
also, how do i get the values in my <select> markup to be submitted. below is my HTML and PHP code.
below HTML
<div id="box1">
<input name="fname" type="text" placeholder="name">
</div>
<div id="box2">
<select id="food" name="food">
<option value="meat" name="nmeat"> meat </option>
<option value="fruit" name="nfruit"> fruit </option>
</select>
</div>
// ^ Above code is in a JQuery Conditional Statement
// When user select meat, <select id="meat"> will display else fruit
<div id="box3">
<!--MEAT-->
<select id="meat" name="topic">
<option value="hotdog" name="nhotdog"> hotdog </option>
<option value="sausage" name="nsausage"> sausage </option>
</select>
<!--FRUIT-->
<select id="fruit" name="topic">
<option value="apple" name="napple"> apple </option>
<option value="grapes" name="ngrapes"> grapes </option>
</select>
</div>
<div id="box4">
<textarea name="desc" rows="5" class="span11" placeholder="Description"></textarea>
<button name="submit" class="btn btn-large btn-block btn-primary" type="button">Submit</button>
</div>
below PHP
Im having a hardtime making the correct syntax in PHP, specially if the values being submitted is not in a <form>
<?php
if ( isset( $_POST['submit'] ) ) {
$name = $_POST["fname"]; //box1
$gender =$_POST["gender"]; //box2
$topic =$_POST["topic"]; //box3
$desc =$_POST["desc"]; //box4
//echo $msg;
$sql = "insert into z_form (name) values ('".$msg."')";
mysql_query( $sql );
} else {
echo "error";
}
?>
Just use the <form> tag, really. POST method requires a <form> tag. I don't see any valid reasons to exclude the <form tags from a form.
now, im having trouble trying to send POST data without having a markup. im using bootstrap framework.
Bootstrap doesn't restrict you from using <form> tags. :)
Wrap your form in <form tags, as follows:
<form action="somefile.php" method="post" name="myForm">
<!-- your form code here -->
</form>
Also, change your button from:
<button name="submit" class="btn btn-large btn-block btn-primary" type="button">Submit</button>
to:
<input type="submit" name="submit" value="Submit" class="btn btn-large btn-block btn-primary"/>
And finally, in your PHP code, you're doing:
$gender =$_POST["gender"];
But there's no input field with the name attribute gender. Either you should create one input field with that name, or remove the definition from your script.
That should fix the issues. Cheers!
Why would you not use a <form> ? all other methods consist of using jquery in combination with ajax, or just ajax for sending the values. But there shouldn't be a reason to not use a <form> tag.
I always thought that you have to use the -tag if you want to submit data just with submit button.
An alternative is to take a button and use javascript / jquery to read data from fields and submit them via get-parameters with an url.
However it seems you would like to go the classic / easy way. So you need the and define the method and action.
In addition a little hint: Try to use a php framework with mvc-(model view controller)pattern. When you use it in the right way it makes you easier to handle your code, brings predefined functions / classes and makes your functions against database safer. An example for such a framework would be codeigniter but there are many more...
First, you need to include form tags:
<form action="process.php" method="post">
//form content
</form>
Change your submit button. It's also good to change the name to somthing other than "submit" to avoid namespace conflicts:
<input type="submit" name="sub" class="btn btn-large btn-block btn-primary" value ="Submit" />
Also, give your selects different names (You have two with the name "topic"):
<select id="meat" name="meat">
<option value="hotdog" name="nhotdog"> hotdog </option>
<option value="sausage" name="nsausage"> sausage </option>
</select>
And then retrieve those values from $_POST:
$meat = $_POST['meat'];
Please see below code:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(button).click(function() {
var name=$("#name").val();
var frt=$("#fruit").val();
var gender = $("#gender").val();
var topic= $("#topic").val();
var descr= $("#description").val();
var dataString = 'name='+name+'fruit='+ frt+'gender='+gender+'topic='+topic+'desc='+descr;
$.ajax
({
type: "POST",
url: "ajax.php",
data: dataString,
cache: false,
success: function(html)
{
$("#success").html(html);
}
});
});
});
</script>
You should add id in all dropdown fields.
also add which you want to view the show success or error result
<div id="success"></div>
In #box3 you have 2 selects with the same name.
Try something like:
<select id="meat" name="meatSelect">
<select id="fruit" name="fruitSelect">
And then:
$meatSelect = $_POST['meatSelect'];
$fruitSelect = $_POST['fruitSelect'];
I searched the question several times, but didn't get the solution, that's why I'm asking here. I already know how to add&remove one-level input elements, as follow:
<script type="text/javascript">
$(document).ready(function() {
$('#btn_addOpt').click(function () {
var opt = $('<div></div>');
opt.append('<p>Answer:</p>');
opt.append('<input type="text" name="lable[]">');
$('#opt').append(opt);
});
$('#btn_removeOpt').click(function () {
$('#opt div:last').remove();
});
});
</script>
And the body of html is:
<form action="" method="post">
What's the question?<br/>
<input type="text" name="name"/><br />
<input type="button" id="btn_addOpt" value="Add Answer"/>
<input type="button" id="btn_removeOpt" value="Remove Answer"/><br/>
<div id="opt"></div><br/>
<input type="submit" value="submit"/>
</form>
The idea is when I click the 'Add Answer' button, a group of elements:
<p>Answer:</p>
<input type="text" name="lable[]">
will be added, and also will be removed after I click the 'Remove Answer' button. However, what I try to do is to take all elements above as a group, which inclues the:
What's the question?<br/>
<input type="text" name="name"/><br />
<input type="button" id="btn_addOpt" value="Add Answer"/>
<input type="button" id="btn_removeOpt" value="Remove Answer"/><br/>
<div id="opt"></div><br/>
And I try to add&remove this group dynamically. So I try:
<script type="text/javascript">
$(document).ready(function() {
$('#btn_addQues').click(function () {
var que = $('<div></div>');
que.append('<p>What\'s the question?</p>');
que.append('<input type="text" name="name"/>');
que.append('<input type="button" id="btn_addOpt" value="Add Answer"/>');
que.append('<input type="button" id="btn_removeOpt" value="Remove Answer"/><br/>');
que.append('<div id="opt"></div><br/>');
$('#question').append(que);
});
$('#btn_removeQues').click(function () {
$('#question div:last').remove();
})
$('#btn_addOpt').click(function () {
var opt = $('<div></div>');
opt.append('<p>Answer:</p>');
opt.append('<input type="text" name="lable[]">');
$('#opt').append(opt);
});
$('#btn_removeOpt').click(function () {
$('#opt div:last').remove();
});
});
</script>
And the body become:
<body>
<input type="button" id="btn_addQues" value="Add Question"/>
<input type="button" id="btn_removeQues" value="Remove Question"/>
<form action="" method="post">
<div id="question"></div>
<input type="submit" value="submit"/>
</form>
</body>
However, it can add&remove the whole group of elements dynamically, but inside the group, the "Add Answer" and "remove answer" buttons don't work. Seems there are some conflicts. Or there might be some other ways that can do it. Basically, What I try to do is to add&remove a group of elements by buttons, and inside the group there are also two buttons to add&remove some other input elements. So it's a nested(two-level) elements creation. And all information filled in will be posted to another page. I'm not sure if I explain clearly, but anyone could help? Please provide some codes, thank you!
You would need to rebind the onclick events to the new html elements created in your new group. So after copying the HTML, you would need to do $("#btn_addQues).click("etc..."), so you might want to think about creating reusable functions for them.
However, if you are going to use ids they need to be unique.
what is the code if I have checkbox and by choosing it(without any submit button) showing me a submit button
<html>
<head>
<title>test</title>
<form method="post">
<?php
//what will be the code here?
?>
<input type='checkbox' name='cb'>
</form>
</html>
Simply CAN'T DO without Javascript. With Javascript?
Easy, quick, sweet and approachable
<script>
function openinput() {
document.getElementById('submit').style.visibility = "visible";
}
</script>
<form>
<input type="checkbox" onclick="openinput()" />
<input type="submit" id="submit" value="go" style="visibility: hidden" />
</form>
Not a JS guy but something simple like this should work (untested code):
<script>
function showHide(obj){
if(obj.checked==true){
document.getElementById('submit_btn').style.display = 'inline';
}else{
document.getElementById('submit_btn').style.display = 'none';
}
}
</script>
<form method="post">
<input type='checkbox' name='cb' onclick="showHide(this)">
<input type="submit" id="submit_btn" value="submit" style="display:none" />
</form>
Ofcourse there are more elegant solutions using frameworks like JQuery
Something like this, but this will only work if you indeed submit the form but don't do anything with the post values other than this check. JavaScript would be the better option.
<?php
if(isset($_POST['cb'])) {
?>
<input type="submit" value="go power rangers" />
<?php
};
?>
raw code: (in jQuery v1.6)
$('input[type="checkbox"]').change(function() {
var $input = $(this);
if($input.prop('checked')){
alert('checked');
$('input[type="submit"]').show();
}
else
$('input[type="submit"]').hide();
});
DEMO