Question

这是我第一次发帖，我是JavaScript的新手，并且在同一页面上使用两个PayPal表单处理订单页面。两种形式的代码都是相同的，但一种用于成人版本的产品，一种用于儿童。

我创建了一个选择下拉列表，询问客户端反馈，并通过JavaScript验证脚本进行下拉列表。该脚本适用于第一个产品/表单，但如果客户想要购买第二个产品，但未填写第一个表单的必填字段，则他们无法验证/购买该产品。

我尝试过使用两种不同的脚本，但当然，即使客户只是试图购买第二种产品，第一种形式也不会验证是否留空。

我认为解决方案可能是在脚本中添加“else”或“while”参数，如果对＃1 或＃2有反馈，它将验证，但我可以弄清楚如何让它发挥作用。

function validateForm() {
var x=document.forms["myPayPal"]["os1"].value
if (x==null || x=="") {
alert("Please tell us how you heard about our product");
return false;
}
}


<form name="myPayPal" action="https://www.paypal.com/cgi-bin/webscr" onsubmit="return validateForm()" method="post" id="payPalForm">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="1234567890123">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="item_name" value="OUR PRODUCT">
<input type="hidden" name="button_subtype" value="products">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="shipping" value="5.99">
<input type="hidden" name="add" value="1">
<input type="hidden" name="bn" value="PP-ShopCartBF:add-to-cart.png:NonHostedGuest">
<div style="display: inline-block; padding: 4% 3% 1% 0">
<input type="hidden" name="on0" value="CHOOSE STYLE"><h2 style="float: left; display: inline-block; padding: 0 30px 0 0">CHOOSE <br>STYLE:</h2>
<div class="styled-select" style="margin:0;">
<select name="os0" class="select"><option value="White">White $13.95 USD</option>
<option value="Blue">Blue $13.95 USD</option>
<option value="Green">Green $13.95 USD</option>
<option value="Yellow">Yellow $13.95 USD</option>
<option value="Kid's Pink">Kid's Pink $13.95 USD</option>
<option value="Kid's Aqua">Kid's Aqua $13.95 USD</option>
</select>
</div>
</div>
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="option_select0" value="White">
<input type="hidden" name="option_amount0" value="13.95">
<input type="hidden" name="option_select1" value="Blue">
<input type="hidden" name="option_amount1" value="13.95">
<input type="hidden" name="option_select2" value="Green">
<input type="hidden" name="option_amount2" value="13.95">
<input type="hidden" name="option_select3" value="Yellow">
<input type="hidden" name="option_amount3" value="13.95">
<input type="hidden" name="option_select4" value="Pink">
<input type="hidden" name="option_amount4" value="13.95">
<input type="hidden" name="option_select5" value="Aqua">
<input type="hidden" name="option_amount5" value="13.95">
<input type="hidden" name="option_index" value="0">
<!--select !-->
<div style="display: inline-block; padding: 0 3% 1% 0; float:left; height:60px; clear:both; position:relative; left: 13.9%;">
<input type="hidden" name="on1" value="REFERRAL"><p style="float: left; display: inline-block; padding: 19px 30px 0 3px; font-weight:normal;">How did you hear about us?</p>
<div class="styled-select" style="margin:0;">
<select name="os1">
    <option selected></option>
    <option value="Online">Online </option>
    <option value="Through a friend">Through a friend </option>
    <option value="Google">Google </option>
    <option value="My doctor">My doctor </option>
</select>
</div>
</div>
<!--end select !-->
<input type="image" src="add-to-cart.png" border="0" name="submit" alt="" class="add-to-cart" style="position: relative; padding: 0px; left: 13.9%; margin: 1.5% 0px; float:left; clear: both;">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

Answer 1

添加一段javascript以检查是否选择了至少os0或os1。

    function validateForm() {
var y=document.forms["myPayPal"]["os0"].value
var x=document.forms["myPayPal"]["os1"].value

 if (x==null && y==null){
 alert("Please select one option product");
return false;
}


if (x==null || x=="") {
alert("Please tell us how you heard about our product");
return false;
}
}

Answer 2

请尝试以下代码。

使用Javascript：

<script type="text/javascript">

function validateForm() {


if( document.myPayPal.os0.value == "-2" )
   {
     alert( "Please provide your OS0 !" );
     return false;
   }

if( document.myPayPal.os1.value == "-1" )
   {
     alert( "Please provide your OS1 !" );
     return false;
   }
   return( true );

}
</script>

HTML：

<html>
<body>

<form name="myPayPal" action="https://www.paypal.com/cgi-bin/webscr" onsubmit="return(validateForm());" method="post" id="payPalForm">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="1234567890123">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="item_name" value="OUR PRODUCT">
<input type="hidden" name="button_subtype" value="products">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="shipping" value="5.99">
<input type="hidden" name="add" value="1">
<input type="hidden" name="bn" value="PP-ShopCartBF:add-to-cart.png:NonHostedGuest">

<!--select !-->
<div style="display: inline-block; padding: 4% 3% 1% 0">
<input type="hidden" name="on0" value="CHOOSE STYLE"><h2 style="float: left; display: inline-block; padding: 0 30px 0 0">CHOOSE <br>STYLE:</h2>
<div class="styled-select" style="margin:0;">
<select name="os0" class="select">
<option selected value="-2">[choose your os0]</option>
<option value="White">White $13.95 USD</option>
<option value="Blue">Blue $13.95 USD</option>
<option value="Green">Green $13.95 USD</option>
<option value="Yellow">Yellow $13.95 USD</option>
<option value="Kid's Pink">Kid's Pink $13.95 USD</option>
<option value="Kid's Aqua">Kid's Aqua $13.95 USD</option>
</select>
</div>
</div>
<!--end select !-->

<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="option_select0" value="White">
<input type="hidden" name="option_amount0" value="13.95">
<input type="hidden" name="option_select1" value="Blue">
<input type="hidden" name="option_amount1" value="13.95">
<input type="hidden" name="option_select2" value="Green">
<input type="hidden" name="option_amount2" value="13.95">
<input type="hidden" name="option_select3" value="Yellow">
<input type="hidden" name="option_amount3" value="13.95">
<input type="hidden" name="option_select4" value="Pink">
<input type="hidden" name="option_amount4" value="13.95">
<input type="hidden" name="option_select5" value="Aqua">
<input type="hidden" name="option_amount5" value="13.95">
<input type="hidden" name="option_index" value="0">
<!--select !-->

<div style="display: inline-block; padding: 0 3% 1% 0; float:left; height:60px; clear:both; position:relative; left: 13.9%;">
<input type="hidden" name="on1" value="REFERRAL"><p style="float: left; display: inline-block; padding: 19px 30px 0 3px; font-weight:normal;">How did you hear about us?</p>
<div class="styled-select" style="margin:0;">
<select name="os1">
    <option selected value="-1">[choose your os1]</option>
    <option value="Online">Online </option>
    <option value="Through a friend">Through a friend </option>
    <option value="Google">Google </option>
    <option value="My doctor">My doctor </option>
</select>
</div>
</div>
<!--end select !-->
<input type="submit"  value="submit" border="0" name="submit" alt="" class="add-to-cart" style="position: relative; padding: 0px; left: 13.9%; margin: 1.5% 0px; float:left; clear: both;">

</form>
</body>
</html>

js验证两种形式

2 个答案: