I have a form which links to a PHP script using an AJAX script. Up to now I have had a single submit button to process the form which passes values to the PHP script to generate the sending of an email. Now I would like to have two options on the form, either to send the email or to view the email first before sending it. I am thinking that having two buttons with the same class that triggers the AJAX/PHP script would be the way to go. Each button could have a different value and depending on this value, the scripts could behave in a different way.
I am not sure if using two buttons is the best way of handling this. If it is though, I am not sure how to handle the values in the buttons. Does only the value of the button that is clicked get passed?
The rest of the values in my form are processed in the following way (as there are multiple forms on the page):
var form_data = {
name: $jform.find("[id^=name]").val(),
date: $jform.find("[id^=date]").val(),
time: $jform.find("[id^=time]").val(),
};
How do I include the value of the button though? There would be two buttons that would look something like this:
echo "<button type='submit' class='submit_s' value='view'>View</button>";
echo "<button type='submit' class='submit_s' value='email'>Email</button>";
Presumably I can't have two buttons with the same id, and as I mentioned before I am not sure if both button values are passed when I click on one.
I would like to be able to do something like this in the AJAX script:
if (button == 'email') {
$jform.fadeOut(800);
}
What would be the best way of going about this?
Your input buttons must have different name.
echo "<button type='submit' name="name1" class='submit_s' value='view'>View</button>";
echo "<button type='submit' name="name2" class='submit_s' value='email'>Email</button>";
after this, you can do this in form
$jform.find("input[name=name1]").click(function() {
$jform.submit();
})
or something like that.
Use a JS function to set the value of a common field to keep track of which button was pressed.
Add code to pick up new field which will be set by our JS function:
var form_data = {
name: $jform.find("[id^=name]").val(),
date: $jform.find("[id^=date]").val(),
time: $jform.find("[id^=time]").val(),
button: $jform.find("[id^=button]").val(),
};
Our new JS function to set the hidden field's value:
function setHiddenButtonValue(buttonValue)
{
$("#button").value = buttonValue;
return true;
}
Add the onclick events to our buttons so that when clicked they update the hidden field. Also draw the new hidden field:
echo "<input type='hidden' id='button' value='' />";
echo "<button type='submit' class='submit_s' value='view' onclick='return setHiddenButtonValue(this.value);'>View</button>";
echo "<button type='submit' class='submit_s' value='email' onclick='return setHiddenButtonValue(this.value);'>Email</button>";