Jquery Radio Button Submit Form - php

I have multiple forms on one page all are like this: The ID value changes but the options can be similar.
<form class="test"><td>4000</td>
<td align='center'><input type='radio' name='radio' value='car' checked></td>
<td align='center'><input type='radio' name='radio' value='boat' ></td>
<td align='center'><input type='radio' name='radio' value='Plane' ></td>
<input type='hidden' name='id' value='4000'/>
<input type='hidden' name='location' value='local'/>
<div class="form" style="display: none;">
</div></form>
Using JQuery I'm trying to submit this when any of the 3 radio buttons are selected.
<script>
$("input[name='radio']").click(function() {
var CurrectForm=$(this).parents('.test:first');
$.post(
'do.php',
CurrectForm.serialize(),
function( response ) {
CurrectForm.find('#form').html( response );
show( response );
}
);
} );
</script>
I've used similar to the above with checkboxes and dropdown lists, which have worked fine. But this doesn't seem to submit the values to the do.php page. The values that are submitted are show in the div form. Doing a var_dump($_POST); results in an empty array.
Can someone point me in the right direction ?
Thanks
Changing the form ti this seems to work ?
<td><form class="test">
<input type='radio' name='radio' value='car' checked>
<input type='radio' name='radio' value='boat' >
<input type='radio' name='radio' value='Plane' >
<input type='hidden' name='id' value='4000'/>
<input type='hidden' name='location' value='local'/>
<div class="form" style="display: none;">
</div></form></td>
Why does changing the cause it to work ?
Jfiddle with working example :) http://jsfiddle.net/QvpH5/

My guess is that there are multiple forms on your page with the class test. What is happening, is when you use parents(), you don't realize it first finds all of the ancestors, and then searches for .test:first. This will return the very first form's values, regardless of which form is clicked.
Look at this jsFiddle to see the fix (change .parents to .parent): http://jsfiddle.net/SDzzr/

Related

Is it possible to have multiple actions in forms using only one submit button?

See question -
I've tried this:
echo "<form action='index.php' method='post'>
Use the previous input of participants: <input type='radio' name='participants[]'value='$participants[0]'>
OR <br>
<form action='index.html' method='post'>
Use a different input of participants: <input type='radio' name='participants[]' value='0'>
<input type='submit' value='send' name='send'> </form> <br>";
Both of the radio button lead me to index.php when I want to be able to go to index.html in case i press on the second radio button.
You may solve it by using JQuery
<form action='index.php' method='post'>
Use the previous input of participants:
<input type='radio' name='participants[]' value='$participants[0]'>
<br/>OR <br>
Use a different input of participants:
<input type='radio' name='participants[]' value='0'>
<input type='submit' value='send' name='send'>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var form = $('form');
var input = $('input[type=radio]');
input.on('click', function() {
if ($(this).val()==0) {
form.prop('action', 'index.html');
} else {
form.prop('action', 'index.php');
}
});
});
</script>

Beautifing $_GET Array URL

I'm trying to send a GET Request using a normal form with checkboxes
<form action="" method="get">
<input type='checkbox' value='1' name='checkbox[]' value='1'>
<input type='checkbox' value='2' name='checkbox[]' value='2'>
<input type='checkbox' value='3' name='checkbox[]' value='3'>
<button type='submit' name='submit'>Submit</button>
</form>
Right now, When i submit the form, I get the following URL
Firefox: www.domain.com/page.php?checkbox[]=1&checkbox[]=2&checkbox[]=3
Chrome: www.domain.com/page.php?checkbox%5B%5D=1&checkbox%5B%5D=2&checkbox%5B%5D=3
both URLs doesn't seems good for SEO and ease of use.
How can i turn the URL to something prettier and simpler like
www.domain.com/page.php?checkbox=1,2,3
Jquery/javascript ajax the post.
Leaving out some of the JS assuming that would be more or less intuitive.
$(document).on('submit','.form-class',function(e){
e.preventDefault();//stops all posts...
var checkboxes = $(this).find('input[name="checkbox"]');
if(checkboxes.length > 0)
{
$.each(checkboxes,function(){
//Loop through each to add to a string or array and concat with "," or explode and implode it with commas.
//Than do an ajax get/post to a url with query param of your choosing.
});
}
});

Two Forms, One Button. Not sure of how to make this happen

I have a page that prints out rows of information. In each row is a notes box:
<?php
<td style='font-size:12px;width:300px;'>
{$row['Notes']} <br /><center><br />
<form action=\"http://********/functions/notes.php\" id='formNotesform' method='post'>
<input type='hidden' id='ID' name='ID' value='{$row['ID']}' />
<textarea placeholder=\"Add more notes here...\" name=\"notes\" rows=\"5\" cols=\"30\"'></textarea><br />
<input type='submit' name='formNotes' id='formNotes' value='Add to Notes' />
</form>
</center></td>
?>
Then there's also another button on the page in each row.
<form action=\"http://********/functions/archive.php\" method='post' id='formArchiveform' onclick=\"return checkArchive()\">
<input type='hidden' id='ID' name='ID' value='{$row['ID']}' />
<input type='submit' name='formArchive' id='formArchive' value='Archive' style=\"height:25px; width:80px\"/>
</form>
What I need to happen is that when someone clicks the "Add to Notes" button it does its job but when someone clicks the "archive" button it checks to see if notes is empty and if not then it submits that as well (kind of like a failsafe).
Ideally I'd like to just pick up the Notes data and post it to the archived.php file the form is going to anyways since that would cause minimal disruption to the code base but I can't get it to work.
I understand this isn't really a sensible choice. It just has to be done. Thanks for the help!
If I had reputation I would ask first because what I understood is that you want to now what button has been pressed to then do another things.
If that's it do this:
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
if(isset($_POST['formNotes']))
{
//...
}
elseif(isset($_POST['formArchive']))
{
//...
}
}

Regular button and submit button in one form don't work

I have a form returned back from a PHP request. The form has a submit button and a regular button. The submit seems to work just fine, but the regular one won't work! Please advise.
Here is my HTML:
<tr id='actionRow' name='actionRow' hidden='hidden'>
<td>
<input class='actionBtn' type='submit' id='confirm' name='confirm'
value='Confirm' onclick='genChanged();'/>
</td>
<td>
<input class='actionBtn' type='button' id='cancel' name='cancel'
value='Cancel' onclick='cancel();' />
</td>
</tr>
And here is the cancel() function:
function cancel(){
alert('in cancel');
document.getElementById('editRow').hidden = false;
document.getElementById('actionRow').hidden = true;
window.location.replace("admin.php");
};
The alert never appears!
Is it even right to put multiple non-submit buttons in one form?
UPDATE
my form looks something like:
<form action='save.php' method='POST' id='myForm'>
I've added the line document.getElementById('myForm').submit(); to the getChange(); function, to make the button be:
<input class='actionBtn' type='button' id='confirm' name='confirm'
value='Confirm' onclick='genChanged();'/>
Yet, cancel(); function still doesn't work!
You can't use the same name for the id and the function name.
In my sample 'a' have the same id and function name test() and b have different id and function name cancel()... cancel work fine and test don't.
<script>
function cancel(){
alert('in cancel');
};
function test(){
alert("in test")
};
</script>
<body>
<form action='save.php' method='POST' id='myForm'>
<tr id='actionRow' name='actionRow' hidden='hidden'>
<td>
<input class='actionBtn' type='button' id='test' name='a'
value='a' onclick='test();'/>
</td>
<td>
<input class='actionBtn' type='button' id='b' name='b'
value='b' onclick='cancel()' />
</td>
</tr>
</form>
</body>
For more informations you can see this helpful answer : https://stackoverflow.com/a/9160009/1318727

Submitting form issues: TypeError: this.form is null

I have a php page that displays all of the service logs for a given site in a table.
At the end of the table I have a new row that has an "Add new service log" button.
Clicking the button hides that row and displays a new row with a form and the desired inputs as well as a new row with buttons "Save" and "Cancel".
The "Save" button calls a Javascript function that checks that the key input has been filled out. When hitting "Save", I see in the console log
TypeError: this.form is null
Here is my code:
// SQL Query
// Table data of queried results
// Add a new service log
echo "<tr id='AddNew'>
<td><input type=button value='Add New' onclick=\"$('#AddNew').hide();$('#AddNewHid').show();$('#SaveCancel').show();\"></td>
<td colspan=12> &nbsp </td></tr>
<form name='AddNewLog' method='POST' action='servicelook.php' id='AddNewService'>
<tr style='display: none;' id='AddNewHid'>
<td><input type='text' value='$lastID' name='ticketid' size=10></td>
<td><input type='text' value='$siteID' name='SiteID' size=4></td>
<td><input type='text' value='$siteName' name='SiteName' size=20></td>
<td><input type='text' value='$userid' name='takenBy' size=4></td>
<td><input type='text' value='$now' name='callTime' size=20></td>
<td><input type='text' value='' name='caller' size=20></td>
<td><input type='text' value='' name='callPhone' size=14></td>
<td><textarea name='issue' value = '' rows=3 cols=10></textarea></td>
<td><textarea name='fix' value = '' rows=3 cols=10></textarea></td>
<td><input type='text' value='$userid' name='solvedBy' size=4></td>
<td><input type='text' value='$now' name='solvedTime' size=20></td>
<td style='min-width:100px;max-width:100px;'><input type='checkbox' name='fup' value='fup'>Follow Up</td></tr>
<input type='hidden' value='Yes' name='AddNew'>
<input type='hidden' value='$userid' name='userid'>
<input type='hidden' value='$session' name='session'>
<input type='hidden' value='$siteid' name='siteid'>
<tr style='display: none;' id='SaveCancel'>
<td colspan=2>
<input name='save' type='button' onclick='inputCheck(this.form.issue);' value='Save'> &nbsp
<input type='button' value='Cancel' onclick=\"$('#AddNew').show();$('#AddNewHid').hide();$('#SaveCancel').hide();\"></td>
<td colspan=11> &nbsp </td>
</tr></form>";
echo "</table>";
My inputCheck function looks like this:
<script type="text/javascript">
function inputCheck(areaName)
{
console.log("checking...");
if (areaName.value.length > 0)
{
$('form#AddNewService').submit();
}
else
{
alert("You didn't describe the problem!");
}
} // end noteCheck function
</script>
I tried changing the submit button to this:
<input type=submit value=Save>
but nothing happens, nothing on the page or in the log.
Anyone have any idea as to what I am doing wrong or what the problem is here?
Thanks in advance!
EDIT:
After using Steven's advice, I was able to successfully submit the form.
However, the inputs aren't properly being sent. I am submitting to the same page so that the table reloads and and the user can see their latest entry. At the beginning of the script I have this:
if($AddNew == 'Yes')
{
echo "YES...Adding New";
echo $ticketid .$SiteID. $SiteName. $takenBy. $callTime. $caller. $callPhone. $issue. $fix. $solvedBy. $solvedTime;
// Start SQL Query
}
The inputs return null. Is there something wrong with the way I am setting my inputs?
The general strategy here is to make the save button a submit button, then put the validation on the form's submit handler and cancel submit if validation fails, e.g.
<form onsubmit="return inputCheck(this.issue);" ...>
then if validation fails, return false from the inputCheck function.
Your issue is probably because you have a form in a place it can't be, so it's being moved outside the table, i.e. you have:
<table>
<form>
...
</form>
</table>
which the browser is "correcting" to:
<table>
...
</table>
<form>
</form>
Now the form is outside the table but the controls are still inside it. So change the markup to:
<form>
<table>
...
</table>
</form>
so the table and form controls stay inside the form.
when this.form is null:
onclick='inputCheck(this.form.issue);'
replace with:
onclick='inputCheck();'
and edit your inputCheck method:
function inputCheck() {
console.log("checking...");
if ($('textarea[name=issue]').val().length > 0){
$('form#AddNewService').submit();
} else {
alert("You didn't describe the problem!");
}
}

Categories